feat(ui-react-native): Add theming for IconButton primitive

packages/react-native/src/Authenticator/Defaults/ConfirmResetPassword/__tests__/__snapshots__/ConfirmResetPassword.spec.tsx.snap

@@ -193,8 +193,10 @@ Array [
           onStartShouldSetResponder={[Function]}
           style={
             Array [
+              Object {},
               null,
               null,
+              undefined,
             ]
           }
         >
@@ -316,8 +318,10 @@ Array [
           onStartShouldSetResponder={[Function]}
           style={
             Array [
+              Object {},
               null,
               null,
+              undefined,
             ]
           }
         >
@@ -686,8 +690,10 @@ Array [
           onStartShouldSetResponder={[Function]}
           style={
             Array [
+              Object {},
               null,
               null,
+              undefined,
             ]
           }
         >
@@ -809,8 +815,10 @@ Array [
           onStartShouldSetResponder={[Function]}
           style={
             Array [
+              Object {},
               null,
               null,
+              undefined,
             ]
           }
         >

packages/react-native/src/Authenticator/Defaults/SetupTOTP/__tests__/__snapshots__/SetupTOTP.spec.tsx.snap

@@ -694,8 +694,10 @@ Array [
       onStartShouldSetResponder={[Function]}
       style={
         Array [
+          Object {},
           null,
           null,
+          undefined,
         ]
       }
       testID="amplify__copy-text-button"

packages/react-native/src/Authenticator/Defaults/SignIn/__tests__/__snapshots__/SignIn.spec.tsx.snap

@@ -181,8 +181,10 @@ Array [
           onStartShouldSetResponder={[Function]}
           style={
             Array [
+              Object {},
               null,
               null,
+              undefined,
             ]
           }
         >
@@ -547,8 +549,10 @@ Array [
           onStartShouldSetResponder={[Function]}
           style={
             Array [
+              Object {},
               null,
               null,
+              undefined,
             ]
           }
         >
@@ -855,8 +859,10 @@ Array [
           onStartShouldSetResponder={[Function]}
           style={
             Array [
+              Object {},
               null,
               null,
+              undefined,
             ]
           }
         >

packages/react-native/src/Authenticator/Defaults/SignUp/__tests__/__snapshots__/SignUp.spec.tsx.snap

@@ -332,8 +332,10 @@ Array [
           onStartShouldSetResponder={[Function]}
           style={
             Array [
+              Object {},
               null,
               null,
+              undefined,
             ]
           }
         >
@@ -455,8 +457,10 @@ Array [
           onStartShouldSetResponder={[Function]}
           style={
             Array [
+              Object {},
               null,
               null,
+              undefined,
             ]
           }
         >
@@ -850,8 +854,10 @@ Array [
           onStartShouldSetResponder={[Function]}
           style={
             Array [
+              Object {},
               null,
               null,
+              undefined,
             ]
           }
         >
@@ -973,8 +979,10 @@ Array [
           onStartShouldSetResponder={[Function]}
           style={
             Array [
+              Object {},
               null,
               null,
+              undefined,
             ]
           }
         >
@@ -1527,8 +1535,12 @@ Array [
           onStartShouldSetResponder={[Function]}
           style={
             Array [
+              Object {},
+              Object {
+                "opacity": 0.6,
+              },
               null,
-              null,
+              undefined,
             ]
           }
         >
@@ -1651,8 +1663,12 @@ Array [
           onStartShouldSetResponder={[Function]}
           style={
             Array [
+              Object {},
+              Object {
+                "opacity": 0.6,
+              },
               null,
-              null,
+              undefined,
             ]
           }
         >
@@ -2204,8 +2220,10 @@ Array [
           onStartShouldSetResponder={[Function]}
           style={
             Array [
+              Object {},
               null,
               null,
+              undefined,
             ]
           }
         >
@@ -2327,8 +2345,10 @@ Array [
           onStartShouldSetResponder={[Function]}
           style={
             Array [
+              Object {},
               null,
               null,
+              undefined,
             ]
           }
         >
@@ -2930,8 +2950,10 @@ Array [
           onStartShouldSetResponder={[Function]}
           style={
             Array [
+              Object {},
               null,
               null,
+              undefined,
             ]
           }
         >
@@ -3053,8 +3075,10 @@ Array [
           onStartShouldSetResponder={[Function]}
           style={
             Array [
+              Object {},
               null,
               null,
+              undefined,
             ]
           }
         >

packages/react-native/src/InAppMessaging/components/BannerMessage/__tests__/__snapshots__/BannerMessage.spec.tsx.snap

@@ -95,6 +95,8 @@ exports[`BannerMessage renders a message as expected with an image 1`] = `
         onStartShouldSetResponder={[Function]}
         style={
           Array [
+            Object {},
+            null,
             null,
             Array [
               Object {
@@ -202,6 +204,8 @@ exports[`BannerMessage renders a message as expected without an image 1`] = `
         onStartShouldSetResponder={[Function]}
         style={
           Array [
+            Object {},
+            null,
             null,
             Array [
               Object {

packages/react-native/src/InAppMessaging/components/ModalMessage/__tests__/__snapshots__/ModalMessage.spec.tsx.snap

@@ -61,6 +61,8 @@ exports[`ModalMessage renders a message as expected with an image 1`] = `
         onStartShouldSetResponder={[Function]}
         style={
           Array [
+            Object {},
+            null,
             null,
             Array [
               Object {
@@ -203,6 +205,8 @@ exports[`ModalMessage renders as expected in landscape mode 1`] = `
         onStartShouldSetResponder={[Function]}
         style={
           Array [
+            Object {},
+            null,
             null,
             Array [
               Object {
@@ -302,6 +306,8 @@ exports[`ModalMessage renders as expected in portrait mode 1`] = `
         onStartShouldSetResponder={[Function]}
         style={
           Array [
+            Object {},
+            null,
             null,
             Array [
               Object {

packages/react-native/src/primitives/IconButton/IconButton.tsx

@@ -6,32 +6,43 @@ import {
   ViewStyle,
 } from 'react-native';
 
+import { useTheme } from '../../theme';
+import { getThemedStyles } from './styles';
 import { Icon, iconSizes } from '../Icon';
-import { styles } from './styles';
 import { IconButtonProps } from './types';
 
 export default function IconButton({
   accessibilityRole = 'button',
   color,
+  disabled,
   iconStyle,
   size = iconSizes.medium,
   source,
   style,
   ...rest
 }: IconButtonProps): JSX.Element {
+  const theme = useTheme();
+  const themedStyle = getThemedStyles(theme);
+
   const pressableStyle = useCallback(
     ({ pressed }: PressableStateCallbackType): StyleProp<ViewStyle> => {
       const pressedStateStyle =
-        (typeof style === 'function' ? style({ pressed }) : style) ?? null;
-      return [pressed ? styles.pressed : null, pressedStateStyle];
+        typeof style === 'function' ? style({ pressed }) : style;
+      return [
+        themedStyle.container,
+        disabled ? themedStyle.disabled : null,
+        pressed ? themedStyle.pressed : null,
+        pressedStateStyle,
+      ];
     },
-    [style]
+    [disabled, style, themedStyle]
   );
 
   return (
     <Pressable
       {...rest}
       accessibilityRole={accessibilityRole}
+      disabled={disabled}
       style={pressableStyle}
     >
       <Icon color={color} size={size} source={source} style={iconStyle} />

packages/react-native/src/primitives/IconButton/__tests__/IconButton.spec.tsx

@@ -1,23 +1,71 @@
 import React from 'react';
-import TestRenderer from 'react-test-renderer';
+import { fireEvent, render, renderHook } from '@testing-library/react-native';
 
+import { useTheme } from '../../../theme';
 import IconButton from '../IconButton';
+import { getThemedStyles } from '../styles';
 
 const source = { uri: 'icon.png' };
 
 describe('IconButton', () => {
   it('renders as expected', () => {
-    const iconButton = TestRenderer.create(<IconButton source={source} />);
-    expect(iconButton.toJSON()).toMatchSnapshot();
+    const { toJSON, getByRole } = render(<IconButton source={source} />);
+
+    expect(getByRole('button')).toBeDefined();
+    expect(getByRole('image')).toBeDefined();
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('handles disabled state', () => {
+    const onPressMock = jest.fn();
+
+    const { toJSON, getByRole } = render(
+      <IconButton disabled source={source} />
+    );
+
+    const button = getByRole('button');
+    fireEvent.press(button);
+    expect(onPressMock).not.toHaveBeenCalled();
+
+    const { result } = renderHook(() => useTheme());
+    const themedStyle = getThemedStyles(result.current);
+
+    expect(button.props.style).toStrictEqual([
+      themedStyle.container,
+      themedStyle.disabled,
+      null,
+      undefined,
+    ]);
+    expect(toJSON()).toMatchSnapshot();
   });
 
   it('renders as expected with custom icon style', () => {
-    const iconButton = TestRenderer.create(
-      <IconButton
-        iconStyle={{ backgroundColor: 'antiquewhite' }}
-        source={source}
-      />
+    const customIconStyle = { backgroundColor: 'antiquewhite' };
+    const { toJSON, getByRole } = render(
+      <IconButton iconStyle={customIconStyle} source={source} />
     );
-    expect(iconButton.toJSON()).toMatchSnapshot();
+
+    const icon = getByRole('image');
+    expect(icon.props.style).toContain(customIconStyle);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('applies theme and style props', () => {
+    const customStyle = { backgroundColor: 'blue' };
+
+    const { toJSON, getByRole } = render(
+      <IconButton source={source} style={customStyle} />
+    );
+
+    const { result } = renderHook(() => useTheme());
+    const themedStyle = getThemedStyles(result.current);
+
+    expect(getByRole('button').props.style).toStrictEqual([
+      themedStyle.container,
+      null,
+      null,
+      customStyle,
+    ]);
+    expect(toJSON()).toMatchSnapshot();
   });
 });