From 0556ba6957c9477d4cc87c333c3cb2c2c729cac6 Mon Sep 17 00:00:00 2001
From: Dimitar Nestorov <8790386+DimitarNestorov@users.noreply.github.com>
Date: Mon, 6 Feb 2023 10:19:50 +0200
Subject: [PATCH] fix: style types (#3623)

---
 package.json                                  |   8 +-
 src/components/Appbar/Appbar.tsx              |  23 +-
 src/components/Appbar/AppbarAction.tsx        |   4 +-
 src/components/Appbar/AppbarBackAction.tsx    |   3 +-
 src/components/Appbar/AppbarHeader.tsx        |  42 +--
 src/components/Appbar/utils.ts                |   4 +-
 src/components/Banner.tsx                     |   4 +-
 .../BottomNavigation/BottomNavigation.tsx     |  58 +++--
 src/components/Button/Button.tsx              |   3 +-
 src/components/Card/Card.tsx                  |   3 +-
 src/components/Chip/Chip.tsx                  |  37 ++-
 src/components/Dialog/Dialog.tsx              |  10 +-
 src/components/FAB/AnimatedFAB.tsx            |  36 ++-
 src/components/FAB/FAB.tsx                    |  36 ++-
 src/components/FAB/FABGroup.tsx               |  56 ++--
 src/components/IconButton/IconButton.tsx      |  30 ++-
 src/components/Menu/Menu.tsx                  |  27 +-
 src/components/Modal.tsx                      |  10 +-
 src/components/Searchbar.tsx                  |   3 +-
 src/components/Snackbar.tsx                   |  48 ++--
 src/components/ToggleButton/ToggleButton.tsx  |   7 +-
 ...imatedFAB.test.js => AnimatedFAB.test.tsx} |  37 ++-
 .../{Appbar.test.js => Appbar.test.tsx}       | 133 +++++++++-
 ...pbar.test.js.snap => Appbar.test.tsx.snap} |  10 +
 ...ct-native-safe-area-context-jest-mock.d.ts |   5 +
 .../{Banner.test.js => Banner.test.tsx}       |  44 +++-
 ...tion.test.js => BottomNavigation.test.tsx} |  68 +++--
 .../{Button.test.js => Button.test.tsx}       | 242 +++++++++++-------
 .../Card/{Card.test.js => Card.test.tsx}      |  52 +++-
 .../{Card.test.js.snap => Card.test.tsx.snap} |   1 +
 .../__tests__/{Chip.test.js => Chip.test.tsx} |  68 ++++-
 .../__tests__/{FAB.test.js => FAB.test.tsx}   |  32 ++-
 .../{FABGroup.test.js => FABGroup.test.tsx}   |  50 ++++
 ...IconButton.test.js => IconButton.test.tsx} |  32 ++-
 .../__tests__/{Menu.test.js => Menu.test.tsx} |  48 +++-
 .../{Modal.test.js => Modal.test.tsx}         | 165 ++++++++++--
 .../{Searchbar.test.js => Searchbar.test.tsx} |  39 ++-
 .../{Snackbar.test.js => Snackbar.test.tsx}   |  49 +++-
 ...leButton.test.js => ToggleButton.test.tsx} |  47 ++--
 ...test.js.snap => AnimatedFAB.test.tsx.snap} |   1 +
 ...nner.test.js.snap => Banner.test.tsx.snap} |  50 +++-
 ...js.snap => BottomNavigation.test.tsx.snap} |  56 +++-
 ...tton.test.js.snap => Button.test.tsx.snap} |  13 +
 .../{Chip.test.js.snap => Chip.test.tsx.snap} |  12 +
 .../__snapshots__/DataTable.test.js.snap      |  25 ++
 .../{FAB.test.js.snap => FAB.test.tsx.snap}   |   0
 ....test.js.snap => IconButton.test.tsx.snap} |  10 +
 .../__snapshots__/ListItem.test.js.snap       |   2 +
 .../{Menu.test.js.snap => Menu.test.tsx.snap} |   5 +
 ...r.test.js.snap => Searchbar.test.tsx.snap} |  15 ++
 ...ar.test.js.snap => Snackbar.test.tsx.snap} |   1 +
 .../__snapshots__/TextInput.test.js.snap      |   2 +
 ...est.js.snap => ToggleButton.test.tsx.snap} |   8 +-
 src/core/theming.tsx                          |  10 +-
 tsconfig.build.json                           |   2 +-
 yarn.lock                                     |   7 +
 56 files changed, 1369 insertions(+), 424 deletions(-)
 rename src/components/__tests__/{AnimatedFAB.test.js => AnimatedFAB.test.tsx} (61%)
 rename src/components/__tests__/Appbar/{Appbar.test.js => Appbar.test.tsx} (74%)
 rename src/components/__tests__/Appbar/__snapshots__/{Appbar.test.js.snap => Appbar.test.tsx.snap} (98%)
 create mode 100644 src/components/__tests__/Appbar/react-native-safe-area-context-jest-mock.d.ts
 rename src/components/__tests__/{Banner.test.js => Banner.test.tsx} (89%)
 rename src/components/__tests__/{BottomNavigation.test.js => BottomNavigation.test.tsx} (89%)
 rename src/components/__tests__/{Button.test.js => Button.test.tsx} (79%)
 rename src/components/__tests__/Card/{Card.test.js => Card.test.tsx} (83%)
 rename src/components/__tests__/Card/__snapshots__/{Card.test.js.snap => Card.test.tsx.snap} (98%)
 rename src/components/__tests__/{Chip.test.js => Chip.test.tsx} (91%)
 rename src/components/__tests__/{FAB.test.js => FAB.test.tsx} (92%)
 rename src/components/__tests__/{FABGroup.test.js => FABGroup.test.tsx} (78%)
 rename src/components/__tests__/{IconButton.test.js => IconButton.test.tsx} (91%)
 rename src/components/__tests__/{Menu.test.js => Menu.test.tsx} (78%)
 rename src/components/__tests__/{Modal.test.js => Modal.test.tsx} (77%)
 rename src/components/__tests__/{Searchbar.test.js => Searchbar.test.tsx} (61%)
 rename src/components/__tests__/{Snackbar.test.js => Snackbar.test.tsx} (67%)
 rename src/components/__tests__/{ToggleButton.test.js => ToggleButton.test.tsx} (69%)
 rename src/components/__tests__/__snapshots__/{AnimatedFAB.test.js.snap => AnimatedFAB.test.tsx.snap} (99%)
 rename src/components/__tests__/__snapshots__/{Banner.test.js.snap => Banner.test.tsx.snap} (96%)
 rename src/components/__tests__/__snapshots__/{BottomNavigation.test.js.snap => BottomNavigation.test.tsx.snap} (99%)
 rename src/components/__tests__/__snapshots__/{Button.test.js.snap => Button.test.tsx.snap} (99%)
 rename src/components/__tests__/__snapshots__/{Chip.test.js.snap => Chip.test.tsx.snap} (99%)
 rename src/components/__tests__/__snapshots__/{FAB.test.js.snap => FAB.test.tsx.snap} (100%)
 rename src/components/__tests__/__snapshots__/{IconButton.test.js.snap => IconButton.test.tsx.snap} (98%)
 rename src/components/__tests__/__snapshots__/{Menu.test.js.snap => Menu.test.tsx.snap} (99%)
 rename src/components/__tests__/__snapshots__/{Searchbar.test.js.snap => Searchbar.test.tsx.snap} (98%)
 rename src/components/__tests__/__snapshots__/{Snackbar.test.js.snap => Snackbar.test.tsx.snap} (99%)
 rename src/components/__tests__/__snapshots__/{ToggleButton.test.js.snap => ToggleButton.test.tsx.snap} (98%)

diff --git a/package.json b/package.json
index 240e73f8e8..8fc31ebda4 100644
--- a/package.json
+++ b/package.json
@@ -64,6 +64,7 @@
     "@types/react-dom": "^18.0.8",
     "@types/react-native": "^0.70.6",
     "@types/react-native-vector-icons": "^6.4.1",
+    "@types/react-test-renderer": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "^5.41.0",
     "@typescript-eslint/parser": "^5.41.0",
     "all-contributors-cli": "^6.24.0",
@@ -99,8 +100,8 @@
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
-    "react-native-vector-icons": "*",
-    "react-native-safe-area-context": "*"
+    "react-native-safe-area-context": "*",
+    "react-native-vector-icons": "*"
   },
   "husky": {
     "hooks": {
@@ -117,6 +118,9 @@
       "@testing-library/jest-native/extend-expect"
     ],
     "cacheDirectory": "./cache/jest",
+    "testPathIgnorePatterns": [
+      "\\.d\\.ts$"
+    ],
     "modulePathIgnorePatterns": [
       "<rootDir>/example/node_modules",
       "<rootDir>/lib/"
diff --git a/src/components/Appbar/Appbar.tsx b/src/components/Appbar/Appbar.tsx
index db6f7383ca..10ea23b898 100644
--- a/src/components/Appbar/Appbar.tsx
+++ b/src/components/Appbar/Appbar.tsx
@@ -1,5 +1,13 @@
 import * as React from 'react';
-import { Platform, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+import {
+  Animated,
+  Platform,
+  StyleProp,
+  StyleSheet,
+  View,
+  ViewStyle,
+  ColorValue,
+} from 'react-native';
 
 import color from 'color';
 
@@ -18,7 +26,10 @@ import {
   renderAppbarContent,
 } from './utils';
 
-export type Props = Partial<React.ComponentPropsWithRef<typeof View>> & {
+export type Props = Omit<
+  Partial<React.ComponentPropsWithRef<typeof View>>,
+  'style'
+> & {
   /**
    * Whether the background color is a dark color. A dark appbar will render light text and vice-versa.
    */
@@ -55,7 +66,7 @@ export type Props = Partial<React.ComponentPropsWithRef<typeof View>> & {
    * @optional
    */
   theme?: ThemeProp;
-  style?: StyleProp<ViewStyle>;
+  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
 };
 
 /**
@@ -160,11 +171,15 @@ const Appbar = ({
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
   const { isV3 } = theme;
+  const flattenedStyle = StyleSheet.flatten(style);
   const {
     backgroundColor: customBackground,
     elevation = isV3 ? (elevated ? 2 : 0) : 4,
     ...restStyle
-  }: ViewStyle = StyleSheet.flatten(style) || {};
+  } = (flattenedStyle || {}) as Exclude<typeof flattenedStyle, number> & {
+    elevation?: number;
+    backgroundColor?: ColorValue;
+  };
 
   let isDark: boolean;
 
diff --git a/src/components/Appbar/AppbarAction.tsx b/src/components/Appbar/AppbarAction.tsx
index f3e55f959d..9f8b718354 100644
--- a/src/components/Appbar/AppbarAction.tsx
+++ b/src/components/Appbar/AppbarAction.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { StyleProp, ViewStyle, View } from 'react-native';
+import type { StyleProp, ViewStyle, View, Animated } from 'react-native';
 
 import color from 'color';
 import type { ThemeProp } from 'src/types';
@@ -41,7 +41,7 @@ export type Props = React.ComponentPropsWithoutRef<typeof IconButton> & {
    * Whether it's the leading button.
    */
   isLeading?: boolean;
-  style?: StyleProp<ViewStyle>;
+  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
   ref?: React.RefObject<View>;
   /**
    * @optional
diff --git a/src/components/Appbar/AppbarBackAction.tsx b/src/components/Appbar/AppbarBackAction.tsx
index c8b8bd009c..e5c6427fb7 100644
--- a/src/components/Appbar/AppbarBackAction.tsx
+++ b/src/components/Appbar/AppbarBackAction.tsx
@@ -4,6 +4,7 @@ import type {
   StyleProp,
   ViewStyle,
   View,
+  Animated,
 } from 'react-native';
 
 import { forwardRef } from '../../utils/forwardRef';
@@ -35,7 +36,7 @@ export type Props = $Omit<
    * Function to execute on press.
    */
   onPress?: (e: GestureResponderEvent) => void;
-  style?: StyleProp<ViewStyle>;
+  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
   ref?: React.RefObject<View>;
 };
 
diff --git a/src/components/Appbar/AppbarHeader.tsx b/src/components/Appbar/AppbarHeader.tsx
index 3c4ceae5a5..9adf1ba23b 100644
--- a/src/components/Appbar/AppbarHeader.tsx
+++ b/src/components/Appbar/AppbarHeader.tsx
@@ -1,5 +1,13 @@
 import * as React from 'react';
-import { Platform, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+import {
+  Animated,
+  ColorValue,
+  Platform,
+  StyleProp,
+  StyleSheet,
+  View,
+  ViewStyle,
+} from 'react-native';
 
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
@@ -48,7 +56,7 @@ export type Props = React.ComponentProps<typeof Appbar> & {
    * @optional
    */
   theme?: ThemeProp;
-  style?: StyleProp<ViewStyle>;
+  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
 };
 
 /**
@@ -112,13 +120,19 @@ const AppbarHeader = ({
   const theme = useInternalTheme(themeOverrides);
   const { isV3 } = theme;
 
+  const flattenedStyle = StyleSheet.flatten(style);
   const {
     height = isV3 ? modeAppbarHeight[mode] : DEFAULT_APPBAR_HEIGHT,
     elevation = isV3 ? (elevated ? 2 : 0) : 4,
     backgroundColor: customBackground,
     zIndex = isV3 && elevated ? 1 : 0,
     ...restStyle
-  }: ViewStyle = StyleSheet.flatten(style) || {};
+  } = (flattenedStyle || {}) as Exclude<typeof flattenedStyle, number> & {
+    height?: number;
+    elevation?: number;
+    backgroundColor?: ColorValue;
+    zIndex?: number;
+  };
 
   const backgroundColor = getAppbarColor(
     theme,
@@ -131,18 +145,16 @@ const AppbarHeader = ({
 
   return (
     <View
-      style={
-        [
-          {
-            backgroundColor,
-            zIndex,
-            elevation,
-            paddingTop: statusBarHeight ?? top,
-            paddingHorizontal: Math.max(left, right),
-          },
-          shadow(elevation),
-        ] as StyleProp<ViewStyle>
-      }
+      style={[
+        {
+          backgroundColor,
+          zIndex,
+          elevation,
+          paddingTop: statusBarHeight ?? top,
+          paddingHorizontal: Math.max(left, right),
+        },
+        shadow(elevation) as ViewStyle,
+      ]}
     >
       <Appbar
         style={[{ height, backgroundColor }, styles.appbar, restStyle]}
diff --git a/src/components/Appbar/utils.ts b/src/components/Appbar/utils.ts
index b14651c0eb..a78cfceeed 100644
--- a/src/components/Appbar/utils.ts
+++ b/src/components/Appbar/utils.ts
@@ -44,7 +44,7 @@ type RenderAppbarContentProps = {
   isDark: boolean;
   shouldCenterContent?: boolean;
   isV3: boolean;
-  renderOnly?: React.ComponentType<any>[];
+  renderOnly?: (React.ComponentType<any> | false)[];
   renderExcept?: React.ComponentType<any>[];
   mode?: AppbarModes;
   theme?: ThemeProp;
@@ -65,7 +65,7 @@ export const modeTextVariant = {
   medium: 'headlineSmall',
   large: 'headlineMedium',
   'center-aligned': 'titleLarge',
-};
+} as const;
 
 export const renderAppbarContent = ({
   children,
diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx
index b23372c8b6..65291d89a4 100644
--- a/src/components/Banner.tsx
+++ b/src/components/Banner.tsx
@@ -37,7 +37,7 @@ export type Props = $RemoveChildren<typeof Surface> & {
   actions?: Array<
     {
       label: string;
-    } & Omit<React.ComponentProps<typeof Button>, 'children'>
+    } & $RemoveChildren<typeof Button>
   >;
   /**
    * Style of banner's inner content.
@@ -49,7 +49,7 @@ export type Props = $RemoveChildren<typeof Surface> & {
    * Changes Banner shadow and background on iOS and Android.
    */
   elevation?: 0 | 1 | 2 | 3 | 4 | 5 | Animated.Value;
-  style?: StyleProp<ViewStyle>;
+  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
   ref?: React.RefObject<View>;
   /**
    * @optional
diff --git a/src/components/BottomNavigation/BottomNavigation.tsx b/src/components/BottomNavigation/BottomNavigation.tsx
index aaa0602077..22641b2940 100644
--- a/src/components/BottomNavigation/BottomNavigation.tsx
+++ b/src/components/BottomNavigation/BottomNavigation.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {
   Animated,
+  ColorValue,
   EasingFunction,
   Platform,
   StyleProp,
@@ -255,7 +256,7 @@ export type Props = {
    * barStyle={{ backgroundColor: '#694fad' }}
    * ```
    */
-  barStyle?: StyleProp<ViewStyle>;
+  barStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
   /**
    * Specifies the largest possible scale a label font can reach.
    */
@@ -620,8 +621,11 @@ const BottomNavigation = ({
   const { routes } = navigationState;
   const { colors, dark: isDarkTheme, mode, isV3 } = theme;
 
-  const { backgroundColor: customBackground, elevation = 4 }: ViewStyle =
-    StyleSheet.flatten(barStyle) || {};
+  const { backgroundColor: customBackground, elevation = 4 } =
+    (StyleSheet.flatten(barStyle) || {}) as {
+      elevation?: number;
+      backgroundColor?: ColorValue;
+    };
 
   const approxBackgroundColor = customBackground
     ? customBackground
@@ -758,29 +762,28 @@ const BottomNavigation = ({
       </View>
       <Surface
         {...(theme.isV3 && { elevation: 0 })}
-        style={
-          [
-            !theme.isV3 && { elevation: 4 },
-            styles.bar,
-            keyboardHidesNavigationBar
-              ? {
-                  // When the keyboard is shown, slide down the navigation bar
-                  transform: [
-                    {
-                      translateY: visibleAnim.interpolate({
-                        inputRange: [0, 1],
-                        outputRange: [layout.height, 0],
-                      }),
-                    },
-                  ],
-                  // Absolutely position the navigation bar so that the content is below it
-                  // This is needed to avoid gap at bottom when the navigation bar is hidden
-                  position: keyboardVisible ? 'absolute' : null,
-                }
-              : null,
-            barStyle,
-          ] as StyleProp<ViewStyle>
-        }
+        testID={`${testID}-surface`}
+        style={[
+          !theme.isV3 && styles.elevation,
+          styles.bar,
+          keyboardHidesNavigationBar // eslint-disable-next-line react-native/no-inline-styles
+            ? {
+                // When the keyboard is shown, slide down the navigation bar
+                transform: [
+                  {
+                    translateY: visibleAnim.interpolate({
+                      inputRange: [0, 1],
+                      outputRange: [layout.height, 0],
+                    }),
+                  },
+                ],
+                // Absolutely position the navigation bar so that the content is below it
+                // This is needed to avoid gap at bottom when the navigation bar is hidden
+                position: keyboardVisible ? 'absolute' : undefined,
+              }
+            : null,
+          barStyle,
+        ]}
         pointerEvents={
           layout.measured
             ? keyboardHidesNavigationBar && keyboardVisible
@@ -1233,4 +1236,7 @@ const styles = StyleSheet.create({
     borderRadius: OUTLINE_WIDTH / 4,
     alignSelf: 'center',
   },
+  elevation: {
+    elevation: 4,
+  },
 });
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index eefbcab9b9..219b51f1d3 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -106,7 +106,7 @@ export type Props = React.ComponentProps<typeof Surface> & {
    * Use this prop to apply custom height and width and to set the icon on the right with `flexDirection: 'row-reverse'`.
    */
   contentStyle?: StyleProp<ViewStyle>;
-  style?: StyleProp<ViewStyle>;
+  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
   /**
    * Style for the button text.
    */
@@ -292,6 +292,7 @@ const Button = ({
   return (
     <Surface
       {...rest}
+      testID={`${testID}-container`}
       style={
         [
           styles.button,
diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
index 004218916c..c5e6728c06 100644
--- a/src/components/Card/Card.tsx
+++ b/src/components/Card/Card.tsx
@@ -67,7 +67,7 @@ export type Props = React.ComponentProps<typeof Surface> & {
    * Changes Card shadow and background on iOS and Android.
    */
   elevation?: 0 | 1 | 2 | 3 | 4 | 5 | Animated.Value;
-  style?: StyleProp<ViewStyle>;
+  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
   /**
    * @optional
    */
@@ -248,6 +248,7 @@ const Card = ({
       {...(isV3 && {
         elevation: isMode('elevated') ? computedElevation : 0,
       })}
+      testID={`${testID}-container`}
       {...rest}
     >
       {isMode('outlined') && (
diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx
index 1867db4713..fda237a968 100644
--- a/src/components/Chip/Chip.tsx
+++ b/src/components/Chip/Chip.tsx
@@ -103,7 +103,7 @@ export type Props = React.ComponentProps<typeof Surface> & {
    * Style of chip's text
    */
   textStyle?: StyleProp<TextStyle>;
-  style?: StyleProp<ViewStyle>;
+  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
 
   /**
    * @optional
@@ -162,7 +162,7 @@ const Chip = ({
   textStyle,
   style,
   theme: themeOverrides,
-  testID,
+  testID = 'chip',
   selectedColor,
   showSelectedOverlay = false,
   ellipsizeMode,
@@ -242,26 +242,23 @@ const Chip = ({
   };
   return (
     <Surface
-      style={
-        [
-          styles.container,
-          isV3 &&
-            (isOutlined ? styles.md3OutlineContainer : styles.md3FlatContainer),
-          !theme.isV3 && {
-            elevation: elevationStyle,
-          },
-          {
-            backgroundColor: selected
-              ? selectedBackgroundColor
-              : backgroundColor,
-            borderColor,
-            borderRadius,
-          },
-          style,
-        ] as StyleProp<ViewStyle>
-      }
+      style={[
+        styles.container,
+        isV3 &&
+          (isOutlined ? styles.md3OutlineContainer : styles.md3FlatContainer),
+        !theme.isV3 && {
+          elevation: elevationStyle,
+        },
+        {
+          backgroundColor: selected ? selectedBackgroundColor : backgroundColor,
+          borderColor,
+          borderRadius,
+        },
+        style,
+      ]}
       {...(theme.isV3 && { elevation: elevationStyle })}
       {...rest}
+      testID={`${testID}-container`}
       theme={theme}
     >
       <TouchableRipple
diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx
index 1c6622ea97..3332634ecc 100644
--- a/src/components/Dialog/Dialog.tsx
+++ b/src/components/Dialog/Dialog.tsx
@@ -1,5 +1,11 @@
 import * as React from 'react';
-import { Platform, StyleProp, StyleSheet, ViewStyle } from 'react-native';
+import {
+  Animated,
+  Platform,
+  StyleProp,
+  StyleSheet,
+  ViewStyle,
+} from 'react-native';
 
 import { useInternalTheme } from '../../core/theming';
 import overlay from '../../styles/overlay';
@@ -28,7 +34,7 @@ export type Props = {
    * Content of the `Dialog`.
    */
   children: React.ReactNode;
-  style?: StyleProp<ViewStyle>;
+  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
   /**
    * @optional
    */
diff --git a/src/components/FAB/AnimatedFAB.tsx b/src/components/FAB/AnimatedFAB.tsx
index ecaf547033..5d20d505dc 100644
--- a/src/components/FAB/AnimatedFAB.tsx
+++ b/src/components/FAB/AnimatedFAB.tsx
@@ -96,7 +96,7 @@ export type Props = $RemoveChildren<typeof Surface> & {
    * Color mappings variant for combinations of container and icon colors.
    */
   variant?: 'primary' | 'secondary' | 'tertiary' | 'surface';
-  style?: StyleProp<ViewStyle>;
+  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
   /**
    * @optional
    */
@@ -320,24 +320,22 @@ const AnimatedFAB = ({
     <Surface
       {...rest}
       testID={`${testID}-container`}
-      style={
-        [
-          {
-            opacity: visibility,
-            transform: [
-              {
-                scale: visibility,
-              },
-            ],
-            borderRadius,
-          },
-          !isV3 && {
-            elevation: md2Elevation,
-          },
-          styles.container,
-          restStyle,
-        ] as StyleProp<ViewStyle>
-      }
+      style={[
+        {
+          opacity: visibility,
+          transform: [
+            {
+              scale: visibility,
+            },
+          ],
+          borderRadius,
+        },
+        !isV3 && {
+          elevation: md2Elevation,
+        },
+        styles.container,
+        restStyle,
+      ]}
       {...(isV3 && { elevation: md3Elevation })}
       theme={theme}
     >
diff --git a/src/components/FAB/FAB.tsx b/src/components/FAB/FAB.tsx
index 30ee4cf7f5..66f3ed8f6b 100644
--- a/src/components/FAB/FAB.tsx
+++ b/src/components/FAB/FAB.tsx
@@ -123,7 +123,7 @@ export type Props = $RemoveChildren<typeof Surface> & {
    * Color mappings variant for combinations of container and icon colors.
    */
   variant?: 'primary' | 'secondary' | 'tertiary' | 'surface';
-  style?: StyleProp<ViewStyle>;
+  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
   /**
    * @optional
    */
@@ -255,24 +255,22 @@ const FAB = forwardRef<View, Props>(
       <Surface
         ref={ref}
         {...rest}
-        style={
-          [
-            {
-              borderRadius,
-              backgroundColor,
-              opacity: visibility,
-              transform: [
-                {
-                  scale: visibility,
-                },
-              ],
-            },
-            styles.container,
-            !isV3 && styles.elevated,
-            !isV3 && disabled && styles.disabled,
-            style,
-          ] as StyleProp<ViewStyle>
-        }
+        style={[
+          {
+            borderRadius,
+            backgroundColor,
+            opacity: visibility,
+            transform: [
+              {
+                scale: visibility,
+              },
+            ],
+          },
+          styles.container,
+          !isV3 && styles.elevated,
+          !isV3 && disabled && styles.disabled,
+          style,
+        ]}
         pointerEvents={visible ? 'auto' : 'none'}
         testID={`${testID}-container`}
         {...(isV3 && { elevation: md3Elevation })}
diff --git a/src/components/FAB/FABGroup.tsx b/src/components/FAB/FABGroup.tsx
index aa5fe6f5b3..6239802545 100644
--- a/src/components/FAB/FABGroup.tsx
+++ b/src/components/FAB/FABGroup.tsx
@@ -44,8 +44,8 @@ export type Props = {
     labelTextColor?: string;
     accessibilityLabel?: string;
     accessibilityHint?: string;
-    style?: StyleProp<ViewStyle>;
-    containerStyle?: StyleProp<ViewStyle>;
+    style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+    containerStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
     labelStyle?: StyleProp<TextStyle>;
     onPress: (e: GestureResponderEvent) => void;
     size?: 'small' | 'medium';
@@ -93,7 +93,7 @@ export type Props = {
   /**
    * Style for the FAB. It allows to pass the FAB button styles, such as backgroundColor.
    */
-  fabStyle?: StyleProp<ViewStyle>;
+  fabStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
   /**
    * @supported Available in v5.x with theme version 3
    *
@@ -205,7 +205,7 @@ const FABGroup = ({
         label?: string;
         color?: string;
         accessibilityLabel?: string;
-        style?: StyleProp<ViewStyle>;
+        style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
         onPress: (e: GestureResponderEvent) => void;
         testID?: string;
       }[]
@@ -364,21 +364,19 @@ const FABGroup = ({
                       accessibilityHint={it.accessibilityHint}
                       accessibilityLabel={accessibilityLabel}
                       accessibilityRole="button"
-                      style={
-                        [
-                          styles.containerStyle,
-                          {
-                            transform: [
-                              isV3
-                                ? { translateY: labelTranslations[i] }
-                                : { scale: scales[i] },
-                            ],
-                            opacity: opacities[i],
-                          },
-                          isV3 && styles.v3ContainerStyle,
-                          it.containerStyle,
-                        ] as StyleProp<ViewStyle>
-                      }
+                      style={[
+                        styles.containerStyle,
+                        {
+                          transform: [
+                            isV3
+                              ? { translateY: labelTranslations[i] }
+                              : { scale: scales[i] },
+                          ],
+                          opacity: opacities[i],
+                        },
+                        isV3 && styles.v3ContainerStyle,
+                        it.containerStyle,
+                      ]}
                     >
                       <Text
                         variant="titleMedium"
@@ -393,17 +391,15 @@ const FABGroup = ({
                   size={size}
                   icon={it.icon}
                   color={it.color}
-                  style={
-                    [
-                      {
-                        transform: [{ scale: scales[i] }],
-                        opacity: opacities[i],
-                        backgroundColor: stackedFABBackgroundColor,
-                      },
-                      isV3 && { transform: [{ translateY: translations[i] }] },
-                      it.style,
-                    ] as StyleProp<ViewStyle>
-                  }
+                  style={[
+                    {
+                      transform: [{ scale: scales[i] }],
+                      opacity: opacities[i],
+                      backgroundColor: stackedFABBackgroundColor,
+                    },
+                    isV3 && { transform: [{ translateY: translations[i] }] },
+                    it.style,
+                  ]}
                   onPress={(e) => {
                     it.onPress(e);
                     close();
diff --git a/src/components/IconButton/IconButton.tsx b/src/components/IconButton/IconButton.tsx
index 21f8acec4a..1768f873fe 100644
--- a/src/components/IconButton/IconButton.tsx
+++ b/src/components/IconButton/IconButton.tsx
@@ -5,6 +5,7 @@ import {
   StyleSheet,
   ViewStyle,
   View,
+  Animated,
 } from 'react-native';
 
 import { useInternalTheme } from '../../core/theming';
@@ -64,7 +65,7 @@ export type Props = $RemoveChildren<typeof TouchableRipple> & {
    * Function to execute on press.
    */
   onPress?: (e: GestureResponderEvent) => void;
-  style?: StyleProp<ViewStyle>;
+  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
   ref?: React.RefObject<View>;
   /**
    * @optional
@@ -128,6 +129,7 @@ const IconButton = forwardRef<View, Props>(
       mode,
       style,
       theme: themeOverrides,
+      testID = 'icon-button',
       ...rest
     }: Props,
     ref
@@ -163,19 +165,18 @@ const IconButton = forwardRef<View, Props>(
     return (
       <Surface
         ref={ref}
-        style={
-          [
-            {
-              backgroundColor,
-              width: buttonSize,
-              height: buttonSize,
-            },
-            styles.container,
-            borderStyles,
-            !isV3 && disabled && styles.disabled,
-            style,
-          ] as StyleProp<ViewStyle>
-        }
+        testID={`${testID}-container`}
+        style={[
+          {
+            backgroundColor,
+            width: buttonSize,
+            height: buttonSize,
+          },
+          styles.container,
+          borderStyles,
+          !isV3 && disabled && styles.disabled,
+          style,
+        ]}
         {...(isV3 && { elevation: 0 })}
       >
         <TouchableRipple
@@ -196,6 +197,7 @@ const IconButton = forwardRef<View, Props>(
               ? { top: 10, left: 10, bottom: 10, right: 10 }
               : { top: 6, left: 6, bottom: 6, right: 6 }
           }
+          testID={testID}
           {...rest}
         >
           <IconComponent color={iconColor} source={icon} size={size} />
diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx
index e006cbca8d..925ca50f86 100644
--- a/src/components/Menu/Menu.tsx
+++ b/src/components/Menu/Menu.tsx
@@ -65,7 +65,7 @@ export type Props = {
   /**
    * Style of menu's inner content.
    */
-  contentStyle?: StyleProp<ViewStyle>;
+  contentStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
   style?: StyleProp<ViewStyle>;
   /**
    * @optional
@@ -75,6 +75,10 @@ export type Props = {
    * Inner ScrollView prop
    */
   keyboardShouldPersistTaps?: ScrollViewProps['keyboardShouldPersistTaps'];
+  /**
+   * testID to be used on tests.
+   */
+  testID?: string;
 };
 
 type Layout = $Omit<$Omit<LayoutRectangle, 'x'>, 'y'>;
@@ -157,6 +161,7 @@ class Menu extends React.Component<Props, State> {
   static defaultProps = {
     statusBarHeight: APPROX_STATUSBAR_HEIGHT,
     overlayAccessibilityLabel: 'Close menu',
+    testID: 'menu',
   };
 
   static getDerivedStateFromProps(nextProps: Props, prevState: State) {
@@ -412,6 +417,7 @@ class Menu extends React.Component<Props, State> {
       onDismiss,
       overlayAccessibilityLabel,
       keyboardShouldPersistTaps,
+      testID,
     } = this.props;
 
     const {
@@ -626,17 +632,16 @@ class Menu extends React.Component<Props, State> {
             >
               <Animated.View style={{ transform: positionTransforms }}>
                 <Surface
-                  style={
-                    [
-                      styles.shadowMenuContainer,
-                      shadowMenuContainerStyle,
-                      theme.isV3 && {
-                        backgroundColor: theme.colors.elevation.level2,
-                      },
-                      contentStyle,
-                    ] as StyleProp<ViewStyle>
-                  }
+                  style={[
+                    styles.shadowMenuContainer,
+                    shadowMenuContainerStyle,
+                    theme.isV3 && {
+                      backgroundColor: theme.colors.elevation.level2,
+                    },
+                    contentStyle,
+                  ]}
                   {...(theme.isV3 && { elevation: 2 })}
+                  testID={`${testID}-surface`}
                   theme={theme}
                 >
                   {(scrollableMenuHeight && (
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index 7e2771c599..9c73e07ee2 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -43,7 +43,7 @@ export type Props = {
   /**
    * Style for the content of the modal
    */
-  contentContainerStyle?: StyleProp<ViewStyle>;
+  contentContainerStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
   /**
    * Style for the wrapper of the modal.
    * Use this prop to change the default wrapper style or to override safe area insets with marginTop and marginBottom.
@@ -239,13 +239,7 @@ function Modal({
         <Surface
           testID={`${testID}-surface`}
           theme={theme}
-          style={
-            [
-              { opacity },
-              styles.content,
-              contentContainerStyle,
-            ] as StyleProp<ViewStyle>
-          }
+          style={[{ opacity }, styles.content, contentContainerStyle]}
         >
           {children}
         </Surface>
diff --git a/src/components/Searchbar.tsx b/src/components/Searchbar.tsx
index b537e2ed2b..d4e2b7e6e7 100644
--- a/src/components/Searchbar.tsx
+++ b/src/components/Searchbar.tsx
@@ -62,7 +62,7 @@ export type Props = React.ComponentPropsWithRef<typeof TextInput> & {
    * Set style of the TextInput component inside the searchbar
    */
   inputStyle?: StyleProp<TextStyle>;
-  style?: StyleProp<ViewStyle>;
+  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
   /**
    * Custom color for icon, default will be derived from theme
    */
@@ -192,6 +192,7 @@ const Searchbar = forwardRef<TextInputHandles, Props>(
         ]}
         {...(theme.isV3 && { elevation })}
         theme={theme}
+        testID={`${testID}-container`}
       >
         <IconButton
           accessibilityRole="button"
diff --git a/src/components/Snackbar.tsx b/src/components/Snackbar.tsx
index 512d78251e..9795a6961a 100644
--- a/src/components/Snackbar.tsx
+++ b/src/components/Snackbar.tsx
@@ -13,7 +13,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import useEventCallback from 'use-event-callback';
 
 import { useInternalTheme } from '../core/theming';
-import type { ThemeProp } from '../types';
+import type { $RemoveChildren, ThemeProp } from '../types';
 import Button from './Button/Button';
 import type { IconSource } from './Icon';
 import IconButton from './IconButton/IconButton';
@@ -31,7 +31,7 @@ export type Props = React.ComponentProps<typeof Surface> & {
    * - `label` - Label of the action button
    * - `onPress` - Callback that is called when action button is pressed.
    */
-  action?: Omit<React.ComponentProps<typeof Button>, 'children'> & {
+  action?: $RemoveChildren<typeof Button> & {
     label: string;
   };
   /**
@@ -70,7 +70,7 @@ export type Props = React.ComponentProps<typeof Surface> & {
    */
   elevation?: 0 | 1 | 2 | 3 | 4 | 5 | Animated.Value;
   wrapperStyle?: StyleProp<ViewStyle>;
-  style?: StyleProp<ViewStyle>;
+  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
   ref?: React.RefObject<View>;
   /**
    * @optional
@@ -268,28 +268,26 @@ const Snackbar = ({
         pointerEvents="box-none"
         accessibilityLiveRegion="polite"
         theme={theme}
-        style={
-          [
-            !isV3 && styles.elevation,
-            styles.container,
-            {
-              backgroundColor,
-              borderRadius: roundness,
-              opacity: opacity,
-              transform: [
-                {
-                  scale: visible
-                    ? opacity.interpolate({
-                        inputRange: [0, 1],
-                        outputRange: [0.9, 1],
-                      })
-                    : 1,
-                },
-              ],
-            },
-            style,
-          ] as StyleProp<ViewStyle>
-        }
+        style={[
+          !isV3 && styles.elevation,
+          styles.container,
+          {
+            backgroundColor,
+            borderRadius: roundness,
+            opacity: opacity,
+            transform: [
+              {
+                scale: visible
+                  ? opacity.interpolate({
+                      inputRange: [0, 1],
+                      outputRange: [0.9, 1],
+                    })
+                  : 1,
+              },
+            ],
+          },
+          style,
+        ]}
         {...(isV3 && { elevation })}
         {...rest}
       >
diff --git a/src/components/ToggleButton/ToggleButton.tsx b/src/components/ToggleButton/ToggleButton.tsx
index 5d862846a6..ae936b9a35 100644
--- a/src/components/ToggleButton/ToggleButton.tsx
+++ b/src/components/ToggleButton/ToggleButton.tsx
@@ -5,6 +5,7 @@ import {
   StyleSheet,
   ViewStyle,
   View,
+  Animated,
 } from 'react-native';
 
 import color from 'color';
@@ -50,12 +51,16 @@ export type Props = {
    * Status of button.
    */
   status?: 'checked' | 'unchecked';
-  style?: StyleProp<ViewStyle>;
+  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
   /**
    * @optional
    */
   theme?: ThemeProp;
   ref?: React.RefObject<View>;
+  /**
+   * testID to be used on tests.
+   */
+  testID?: string;
 };
 
 /**
diff --git a/src/components/__tests__/AnimatedFAB.test.js b/src/components/__tests__/AnimatedFAB.test.tsx
similarity index 61%
rename from src/components/__tests__/AnimatedFAB.test.js
rename to src/components/__tests__/AnimatedFAB.test.tsx
index e5a9bb4ca0..1d725932ec 100644
--- a/src/components/__tests__/AnimatedFAB.test.js
+++ b/src/components/__tests__/AnimatedFAB.test.tsx
@@ -1,5 +1,7 @@
+/// <reference types="@testing-library/jest-native" />
+
 import * as React from 'react';
-import { StyleSheet } from 'react-native';
+import { Animated, StyleSheet } from 'react-native';
 
 import { render } from '@testing-library/react-native';
 import renderer from 'react-test-renderer';
@@ -15,7 +17,9 @@ const styles = StyleSheet.create({
 
 it('renders animated fab', () => {
   const tree = renderer
-    .create(<AnimatedFAB onPress={() => {}} icon="plus" />)
+    .create(
+      <AnimatedFAB onPress={() => {}} label="" extended={false} icon="plus" />
+    )
     .toJSON();
 
   expect(tree).toMatchSnapshot();
@@ -55,6 +59,7 @@ it('renders animated fab with only transparent container', () => {
       onPress={() => {}}
       icon="plus"
       testID="animated-fab"
+      extended={false}
       style={styles.background}
     />
   );
@@ -62,3 +67,31 @@ it('renders animated fab with only transparent container', () => {
     backgroundColor: 'transparent',
   });
 });
+
+it('animated value changes correctly', () => {
+  const value = new Animated.Value(1);
+  const { getByTestId } = render(
+    <AnimatedFAB
+      label="text"
+      icon="plus"
+      testID="animated-fab"
+      extended={false}
+      style={[{ transform: [{ scale: value }] }]}
+    />
+  );
+  expect(getByTestId('animated-fab-container')).toHaveStyle({
+    transform: [{ scale: 1 }],
+  });
+
+  Animated.timing(value, {
+    toValue: 1.5,
+    useNativeDriver: false,
+    duration: 200,
+  }).start();
+
+  jest.advanceTimersByTime(200);
+
+  expect(getByTestId('animated-fab-container')).toHaveStyle({
+    transform: [{ scale: 1.5 }],
+  });
+});
diff --git a/src/components/__tests__/Appbar/Appbar.test.js b/src/components/__tests__/Appbar/Appbar.test.tsx
similarity index 74%
rename from src/components/__tests__/Appbar/Appbar.test.js
rename to src/components/__tests__/Appbar/Appbar.test.tsx
index 84e1515507..9cca04a907 100644
--- a/src/components/__tests__/Appbar/Appbar.test.js
+++ b/src/components/__tests__/Appbar/Appbar.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Platform } from 'react-native';
+import { Animated, Platform } from 'react-native';
 
 import { render } from '@testing-library/react-native';
 import mockSafeAreaContext from 'react-native-safe-area-context/jest/mock';
@@ -17,7 +17,7 @@ import AppbarHeader from '../../Appbar/AppbarHeader';
 import {
   getAppbarColor,
   modeTextVariant,
-  renderAppbarContent,
+  renderAppbarContent as utilRenderAppbarContent,
 } from '../../Appbar/utils';
 import Menu from '../../Menu/Menu';
 import Searchbar from '../../Searchbar';
@@ -26,12 +26,16 @@ import Text from '../../Typography/Text';
 
 jest.mock('react-native-safe-area-context', () => mockSafeAreaContext);
 
+const renderAppbarContent = utilRenderAppbarContent as (
+  props: Parameters<typeof utilRenderAppbarContent>[0]
+) => { props: any }[];
+
 describe('Appbar', () => {
   it('does not pass any additional props to Searchbar', () => {
     const tree = renderer
       .create(
         <Appbar>
-          <Searchbar placeholder="Search" />
+          <Searchbar placeholder="Search" value="" />
         </Appbar>
       )
       .toJSON();
@@ -64,6 +68,7 @@ describe('renderAppbarContent', () => {
 
   it('should render all children types if renderOnly is not specified', () => {
     const result = renderAppbarContent({
+      isV3: false,
       children,
       isDark: false,
     });
@@ -73,12 +78,16 @@ describe('renderAppbarContent', () => {
 
   it('should render all children types except specified in renderExcept', () => {
     const result = renderAppbarContent({
+      isV3: false,
       children: [
         ...children,
         <Menu
           key={4}
           anchor={<Appbar.Action icon="menu" onPress={() => {}} />}
-        />,
+          visible={false}
+        >
+          {null}
+        </Menu>,
       ],
       isDark: false,
       renderExcept: [Appbar, AppbarHeader, AppbarBackAction, AppbarContent],
@@ -89,6 +98,7 @@ describe('renderAppbarContent', () => {
 
   it('should render only children types specifed in renderOnly', () => {
     const result = renderAppbarContent({
+      isV3: false,
       children,
       isDark: false,
       renderOnly: [AppbarAction],
@@ -99,6 +109,7 @@ describe('renderAppbarContent', () => {
 
   it('should render AppbarContent with correct mode', () => {
     const result = renderAppbarContent({
+      isV3: false,
       children,
       isDark: false,
       renderOnly: [AppbarContent],
@@ -237,7 +248,7 @@ describe('AppbarAction', () => {
   it('should render AppbarBackAction with custom color', () => {
     const { getByTestId } = render(
       <Appbar>
-        <Appbar.BackAction icon="menu" color="purple" testID="appbar-action" />
+        <Appbar.BackAction color="purple" testID="appbar-action" />
       </Appbar>
     );
     const appbarBackActionIcon = getByTestId('appbar-action').props.children[0];
@@ -278,7 +289,7 @@ describe('AppbarAction', () => {
 });
 
 describe('AppbarContent', () => {
-  ['small', 'medium', 'large', 'center-aligned'].forEach((mode) =>
+  (['small', 'medium', 'large', 'center-aligned'] as const).forEach((mode) =>
     it(`should render text component with appropriate variant for ${mode} mode`, () => {
       const { getByTestId } = render(
         <Appbar mode={mode}>
@@ -341,3 +352,113 @@ describe('getAppbarColors', () => {
     );
   });
 });
+
+describe('animated value changes correctly', () => {
+  it('appbar animated value changes correctly', () => {
+    const value = new Animated.Value(1);
+    const { getByTestId } = render(
+      <Appbar testID="appbar" style={[{ transform: [{ scale: value }] }]}>
+        <Appbar.Action icon="menu" />
+      </Appbar>
+    );
+    expect(getByTestId('appbar')).toHaveStyle({
+      transform: [{ scale: 1 }],
+    });
+
+    Animated.timing(value, {
+      toValue: 1.5,
+      useNativeDriver: false,
+      duration: 200,
+    }).start();
+
+    jest.advanceTimersByTime(200);
+
+    expect(getByTestId('appbar')).toHaveStyle({
+      transform: [{ scale: 1.5 }],
+    });
+  });
+
+  it('action animated value changes correctly', () => {
+    const value = new Animated.Value(1);
+    const { getByTestId } = render(
+      <Appbar>
+        <Appbar.Action
+          icon="menu"
+          style={[{ transform: [{ scale: value }] }]}
+          testID="appbar-action"
+        />
+      </Appbar>
+    );
+    expect(getByTestId('appbar-action-container')).toHaveStyle({
+      transform: [{ scale: 1 }],
+    });
+
+    Animated.timing(value, {
+      toValue: 1.5,
+      useNativeDriver: false,
+      duration: 200,
+    }).start();
+
+    jest.advanceTimersByTime(200);
+
+    expect(getByTestId('appbar-action-container')).toHaveStyle({
+      transform: [{ scale: 1.5 }],
+    });
+  });
+
+  it('back action animated value changes correctly', () => {
+    const value = new Animated.Value(1);
+    const { getByTestId } = render(
+      <Appbar>
+        <Appbar.BackAction
+          style={[{ transform: [{ scale: value }] }]}
+          testID="appbar-back-action"
+        />
+      </Appbar>
+    );
+    expect(getByTestId('appbar-back-action-container')).toHaveStyle({
+      transform: [{ scale: 1 }],
+    });
+
+    Animated.timing(value, {
+      toValue: 1.5,
+      useNativeDriver: false,
+      duration: 200,
+    }).start();
+
+    jest.advanceTimersByTime(200);
+
+    expect(getByTestId('appbar-back-action-container')).toHaveStyle({
+      transform: [{ scale: 1.5 }],
+    });
+  });
+
+  it('header animated value changes correctly', () => {
+    const value = new Animated.Value(1);
+    const { getByTestId } = render(
+      <mockSafeAreaContext.SafeAreaProvider>
+        <Appbar.Header
+          style={[{ transform: [{ scale: value }] }]}
+          testID="appbar-header"
+        >
+          {null}
+        </Appbar.Header>
+      </mockSafeAreaContext.SafeAreaProvider>
+    );
+    expect(getByTestId('appbar-header')).toHaveStyle({
+      transform: [{ scale: 1 }],
+    });
+
+    Animated.timing(value, {
+      toValue: 1.5,
+      useNativeDriver: false,
+      duration: 200,
+    }).start();
+
+    jest.advanceTimersByTime(200);
+
+    expect(getByTestId('appbar-header')).toHaveStyle({
+      transform: [{ scale: 1.5 }],
+    });
+  });
+});
diff --git a/src/components/__tests__/Appbar/__snapshots__/Appbar.test.js.snap b/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap
similarity index 98%
rename from src/components/__tests__/Appbar/__snapshots__/Appbar.test.js.snap
rename to src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap
index 5b184dd83c..ffa49e7945 100644
--- a/src/components/__tests__/Appbar/__snapshots__/Appbar.test.js.snap
+++ b/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap
@@ -99,6 +99,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
                 "flexDirection": "row",
               }
             }
+            testID="search-bar-container"
           >
             <View
               collapsable={false}
@@ -151,6 +152,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
                       "width": 40,
                     }
                   }
+                  testID="icon-button-container"
                 >
                   <View
                     accessibilityComponentType="button"
@@ -201,6 +203,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
                         ],
                       ]
                     }
+                    testID="icon-button"
                   >
                     <Text
                       accessibilityElementsHidden={true}
@@ -270,6 +273,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
               }
               testID="search-bar"
               underlineColorAndroid="transparent"
+              value=""
             />
             <View
               pointerEvents="none"
@@ -326,6 +330,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
                         "width": 40,
                       }
                     }
+                    testID="icon-button-container"
                   >
                     <View
                       accessibilityComponentType="button"
@@ -376,6 +381,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
                           ],
                         ]
                       }
+                      testID="icon-button"
                     >
                       <Text
                         accessibilityElementsHidden={true}
@@ -530,6 +536,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
                 "width": 40,
               }
             }
+            testID="icon-button-container"
           >
             <View
               accessibilityComponentType="button"
@@ -580,6 +587,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
                   ],
                 ]
               }
+              testID="icon-button"
             >
               <View
                 style={
@@ -784,6 +792,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
                 "width": 40,
               }
             }
+            testID="icon-button-container"
           >
             <View
               accessibilityComponentType="button"
@@ -833,6 +842,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
                   ],
                 ]
               }
+              testID="icon-button"
             >
               <View
                 style={
diff --git a/src/components/__tests__/Appbar/react-native-safe-area-context-jest-mock.d.ts b/src/components/__tests__/Appbar/react-native-safe-area-context-jest-mock.d.ts
new file mode 100644
index 0000000000..12480d5c2a
--- /dev/null
+++ b/src/components/__tests__/Appbar/react-native-safe-area-context-jest-mock.d.ts
@@ -0,0 +1,5 @@
+declare module 'react-native-safe-area-context/jest/mock' {
+  export default mockSafeAreaContext = {
+    SafeAreaProvider: React.Component,
+  };
+}
diff --git a/src/components/__tests__/Banner.test.js b/src/components/__tests__/Banner.test.tsx
similarity index 89%
rename from src/components/__tests__/Banner.test.js
rename to src/components/__tests__/Banner.test.tsx
index c90d8ebc69..e483eadd85 100644
--- a/src/components/__tests__/Banner.test.js
+++ b/src/components/__tests__/Banner.test.tsx
@@ -1,9 +1,10 @@
 import * as React from 'react';
-import { Image } from 'react-native';
+import { Animated, Image } from 'react-native';
 
+import { render } from '@testing-library/react-native';
 import renderer from 'react-test-renderer';
 
-import Banner from '../Banner.tsx';
+import Banner from '../Banner';
 
 it('renders hidden banner, without action buttons and without image', () => {
   const tree = renderer
@@ -55,7 +56,7 @@ it('renders visible banner, without action buttons and with image', () => {
     .create(
       <Banner
         visible
-        image={({ size }) => (
+        icon={({ size }) => (
           <Image
             source={{ uri: 'https://callstack.com/images/team/Satya.png' }}
             style={{ width: size, height: size }}
@@ -77,7 +78,7 @@ it('renders visible banner, with action buttons and with image', () => {
     .create(
       <Banner
         visible
-        image={({ size }) => (
+        icon={({ size }) => (
           <Image
             source={{ uri: 'https://callstack.com/images/team/Satya.png' }}
             style={{ width: size, height: size }}
@@ -118,7 +119,8 @@ it('render visible banner, with custom theme', () => {
 });
 
 describe('animations', () => {
-  let showCallback, hideCallback;
+  let showCallback: (() => void) | undefined,
+    hideCallback: (() => void) | undefined;
 
   beforeEach(() => {
     showCallback = jest.fn();
@@ -142,6 +144,7 @@ describe('animations', () => {
         <Banner
           onShowAnimationFinished={showCallback}
           onHideAnimationFinished={hideCallback}
+          visible={false}
         >
           Text
         </Banner>
@@ -160,6 +163,7 @@ describe('animations', () => {
         <Banner
           onShowAnimationFinished={showCallback}
           onHideAnimationFinished={hideCallback}
+          visible={false}
         >
           Text
         </Banner>
@@ -224,6 +228,7 @@ describe('animations', () => {
         <Banner
           onShowAnimationFinished={showCallback}
           onHideAnimationFinished={hideCallback}
+          visible={false}
         >
           Text
         </Banner>
@@ -308,6 +313,7 @@ describe('animations', () => {
         <Banner
           onShowAnimationFinished={nextShowCallback}
           onHideAnimationFinished={nextHideCallback}
+          visible={false}
         >
           Text
         </Banner>
@@ -320,4 +326,32 @@ describe('animations', () => {
       expect(nextHideCallback).toHaveBeenCalledTimes(1);
     });
   });
+
+  it('animated value changes correctly', () => {
+    const value = new Animated.Value(1);
+    const { getByTestId } = render(
+      <Banner
+        visible
+        testID="banner"
+        style={[{ transform: [{ scale: value }] }]}
+      >
+        Banner
+      </Banner>
+    );
+    expect(getByTestId('banner')).toHaveStyle({
+      transform: [{ scale: 1 }],
+    });
+
+    Animated.timing(value, {
+      toValue: 1.5,
+      useNativeDriver: false,
+      duration: 200,
+    }).start();
+
+    jest.runAllTimers();
+
+    expect(getByTestId('banner')).toHaveStyle({
+      transform: [{ scale: 1.5 }],
+    });
+  });
 });
diff --git a/src/components/__tests__/BottomNavigation.test.js b/src/components/__tests__/BottomNavigation.test.tsx
similarity index 89%
rename from src/components/__tests__/BottomNavigation.test.js
rename to src/components/__tests__/BottomNavigation.test.tsx
index f1234c28da..5966a069c7 100644
--- a/src/components/__tests__/BottomNavigation.test.js
+++ b/src/components/__tests__/BottomNavigation.test.tsx
@@ -8,8 +8,8 @@ import renderer from 'react-test-renderer';
 import { getTheme } from '../../core/theming';
 import { red300 } from '../../styles/themes/v2/colors';
 import { MD3Colors } from '../../styles/themes/v3/tokens';
-import BottomNavigation from '../BottomNavigation/BottomNavigation.tsx';
-import BottomNavigationRouteScreen from '../BottomNavigation/BottomNavigationRouteScreen.tsx';
+import BottomNavigation from '../BottomNavigation/BottomNavigation';
+import BottomNavigationRouteScreen from '../BottomNavigation/BottomNavigationRouteScreen';
 import {
   getActiveTintColor,
   getInactiveTintColor,
@@ -17,14 +17,19 @@ import {
 } from '../BottomNavigation/utils';
 
 const styles = StyleSheet.create({
-  labelColor: {
-    color: red300,
-  },
   backgroundColor: {
     backgroundColor: red300,
   },
 });
 
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      icon: { color: string; src: any };
+    }
+  }
+}
+
 // Make sure any animation finishes before checking the snapshot results
 jest.mock('react-native', () => {
   const RN = jest.requireActual('react-native');
@@ -38,14 +43,21 @@ jest.mock('react-native', () => {
     reset: () => jest.fn(),
   }));
 
-  RN.Animated.timing = (value, config) => ({
+  const timing: typeof Animated['timing'] = (value, config) => ({
     start: (callback) => {
-      value.setValue(config.toValue);
-      callback && callback({ finished: true });
+      value.setValue(config.toValue as any);
+      callback?.({ finished: true });
     },
     value,
     config,
+    stop: () => {
+      throw new Error('Not implemented');
+    },
+    reset: () => {
+      throw new Error('Not implemented');
+    },
   });
+  RN.Animated.timing = timing;
 
   RN.Animated.parallel = mock;
 
@@ -62,7 +74,7 @@ jest.mock('react-native-safe-area-context', () => ({
 
 const icons = ['magnify', 'camera', 'inbox', 'heart', 'shopping-music'];
 
-const createState = (index, length) => ({
+const createState = (index: number, length: number) => ({
   index,
   routes: Array.from({ length }, (_, i) => ({
     key: `key-${i}`,
@@ -215,10 +227,10 @@ it('renders custom icon and label in shifting bottom navigation', () => {
         onIndexChange={jest.fn()}
         renderScene={({ route }) => route.title}
         renderIcon={({ route, color }) => (
-          <icon color={color}>{route.icon}</icon>
+          <icon color={color} src={route.unfocusedIcon} />
         )}
         renderLabel={({ route, color }) => (
-          <text color={color}>{route.label}</text>
+          <text color={color}>{route.title}</text>
         )}
       />
     )
@@ -236,10 +248,10 @@ it('renders custom icon and label in non-shifting bottom navigation', () => {
         onIndexChange={jest.fn()}
         renderScene={({ route }) => route.title}
         renderIcon={({ route, color }) => (
-          <icon color={color}>{route.icon}</icon>
+          <icon color={color} src={route.unfocusedIcon} />
         )}
         renderLabel={({ route, color }) => (
-          <text color={color}>{route.label}</text>
+          <text color={color}>{route.title}</text>
         )}
       />
     )
@@ -258,7 +270,6 @@ it('renders custom icon and label with custom colors in shifting bottom navigati
         renderScene={({ route }) => route.title}
         activeColor="#FBF7DB"
         inactiveColor="#853D4B"
-        barStyle={styles.labelColor}
       />
     )
     .toJSON();
@@ -276,7 +287,6 @@ it('renders custom icon and label with custom colors in non-shifting bottom navi
         renderScene={({ route }) => route.title}
         activeColor="#FBF7DB"
         inactiveColor="#853D4B"
-        barStyle={styles.labelColor}
       />
     )
     .toJSON();
@@ -457,3 +467,31 @@ describe('getLabelColor', () => {
     }
   );
 });
+
+it('barStyle animated value changes correctly', () => {
+  const value = new Animated.Value(1);
+  const { getByTestId } = render(
+    <BottomNavigation
+      navigationState={createState(0, 1)}
+      onIndexChange={() => {}}
+      renderScene={({ route }) => route.title}
+      testID={'bottom-navigation'}
+      barStyle={[{ transform: [{ scale: value }] }]}
+    />
+  );
+  expect(getByTestId('bottom-navigation-surface')).toHaveStyle({
+    transform: [{ scale: 1 }],
+  });
+
+  Animated.timing(value, {
+    toValue: 1.5,
+    useNativeDriver: false,
+    duration: 200,
+  }).start();
+
+  jest.advanceTimersByTime(200);
+
+  expect(getByTestId('bottom-navigation-surface')).toHaveStyle({
+    transform: [{ scale: 1.5 }],
+  });
+});
diff --git a/src/components/__tests__/Button.test.js b/src/components/__tests__/Button.test.tsx
similarity index 79%
rename from src/components/__tests__/Button.test.js
rename to src/components/__tests__/Button.test.tsx
index ba7d687754..d8f5e61d3d 100644
--- a/src/components/__tests__/Button.test.js
+++ b/src/components/__tests__/Button.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StyleSheet } from 'react-native';
+import { Animated, StyleSheet } from 'react-native';
 
 import { fireEvent, render } from '@testing-library/react-native';
 import color from 'color';
@@ -7,7 +7,7 @@ import renderer from 'react-test-renderer';
 
 import { getTheme } from '../../core/theming';
 import { pink500, black, white } from '../../styles/themes/v2/colors';
-import Button from '../Button/Button.tsx';
+import Button from '../Button/Button';
 import { getButtonColors } from '../Button/utils';
 
 const styles = StyleSheet.create({
@@ -133,7 +133,9 @@ it('should execute onPressIn', () => {
   const onPress = jest.fn();
 
   const { getByTestId } = render(
-    <Button onPress={onPress} onPressIn={onPressInMock} testID="button" />
+    <Button onPress={onPress} onPressIn={onPressInMock} testID="button">
+      {null}
+    </Button>
   );
   fireEvent(getByTestId('button'), 'onPressIn');
   expect(onPressInMock).toHaveBeenCalledTimes(1);
@@ -144,7 +146,9 @@ it('should execute onPressOut', () => {
   const onPress = jest.fn();
 
   const { getByTestId } = render(
-    <Button onPress={onPress} onPressOut={onPressOutMock} testID="button" />
+    <Button onPress={onPress} onPressOut={onPressOutMock} testID="button">
+      {null}
+    </Button>
   );
   fireEvent(getByTestId('button'), 'onPressOut');
   expect(onPressOutMock).toHaveBeenCalledTimes(1);
@@ -163,18 +167,19 @@ describe('button icon styles', () => {
     });
   });
 
-  [('outlined', 'contained', 'contained-tonal', 'elevated')].forEach((mode) =>
-    it(`should return correct icon styles for compact ${mode} button`, () => {
-      const { getByTestId } = render(
-        <Button mode={mode} compact icon="camera" testID="compact-button">
-          Compact {mode} button
-        </Button>
-      );
-      expect(getByTestId('compact-button-icon-container')).toHaveStyle({
-        marginLeft: 8,
-        marginRight: 0,
-      });
-    })
+  (['outlined', 'contained', 'contained-tonal', 'elevated'] as const).forEach(
+    (mode) =>
+      it(`should return correct icon styles for compact ${mode} button`, () => {
+        const { getByTestId } = render(
+          <Button mode={mode} compact icon="camera" testID="compact-button">
+            Compact {mode} button
+          </Button>
+        );
+        expect(getByTestId('compact-button-icon-container')).toHaveStyle({
+          marginLeft: 8,
+          marginRight: 0,
+        });
+      })
   );
 
   it('should return correct icon styles for text button', () => {
@@ -189,18 +194,19 @@ describe('button icon styles', () => {
     });
   });
 
-  ['outlined', 'contained', 'contained-tonal', 'elevated'].forEach((mode) =>
-    it(`should return correct icon styles for compact ${mode} button`, () => {
-      const { getByTestId } = render(
-        <Button mode={mode} icon="camera" testID="compact-button">
-          {mode} button
-        </Button>
-      );
-      expect(getByTestId('compact-button-icon-container')).toHaveStyle({
-        marginLeft: 16,
-        marginRight: -16,
-      });
-    })
+  (['outlined', 'contained', 'contained-tonal', 'elevated'] as const).forEach(
+    (mode) =>
+      it(`should return correct icon styles for compact ${mode} button`, () => {
+        const { getByTestId } = render(
+          <Button mode={mode} icon="camera" testID="compact-button">
+            {mode} button
+          </Button>
+        );
+        expect(getByTestId('compact-button-icon-container')).toHaveStyle({
+          marginLeft: 16,
+          marginRight: -16,
+        });
+      })
   );
 });
 
@@ -213,11 +219,12 @@ describe('getButtonColors - background color', () => {
         customButtonColor,
         theme: getTheme(),
         disabled: false,
+        mode: 'text',
       })
     ).toMatchObject({ backgroundColor: customButtonColor });
   });
 
-  ['outlined', 'text'].forEach((mode) =>
+  (['outlined', 'text'] as const).forEach((mode) =>
     it(`should return correct disabled color, for theme version 3, ${mode} mode`, () => {
       expect(
         getButtonColors({
@@ -230,7 +237,7 @@ describe('getButtonColors - background color', () => {
     })
   );
 
-  ['outlined', 'text'].forEach((mode) =>
+  (['outlined', 'text'] as const).forEach((mode) =>
     it(`should return correct disabled color, for theme version 3, dark theme, ${mode} mode`, () => {
       expect(
         getButtonColors({
@@ -243,7 +250,7 @@ describe('getButtonColors - background color', () => {
     })
   );
 
-  ['contained', 'contained-tonal', 'elevated'].forEach((mode) =>
+  (['contained', 'contained-tonal', 'elevated'] as const).forEach((mode) =>
     it(`should return correct disabled color, for theme version 3, ${mode} mode`, () => {
       return expect(
         getButtonColors({
@@ -258,7 +265,7 @@ describe('getButtonColors - background color', () => {
     })
   );
 
-  ['contained', 'contained-tonal', 'elevated'].forEach((mode) =>
+  (['contained', 'contained-tonal', 'elevated'] as const).forEach((mode) =>
     it(`should return correct disabled color, for theme version 3, dark theme, ${mode} mode`, () => {
       return expect(
         getButtonColors({
@@ -339,7 +346,7 @@ describe('getButtonColors - background color', () => {
     });
   });
 
-  ['text', 'outlined'].forEach((mode) =>
+  (['text', 'outlined'] as const).forEach((mode) =>
     it(`should return transparent color, for theme version 3, ${mode} mode`, () => {
       return expect(
         getButtonColors({
@@ -352,7 +359,7 @@ describe('getButtonColors - background color', () => {
     })
   );
 
-  ['text', 'outlined'].forEach((mode) =>
+  (['text', 'outlined'] as const).forEach((mode) =>
     it(`should return transparent color, for theme version 3, dark theme, ${mode} mode`, () => {
       return expect(
         getButtonColors({
@@ -400,7 +407,7 @@ describe('getButtonColors - background color', () => {
     });
   });
 
-  ['text', 'outlined'].forEach((mode) =>
+  (['text', 'outlined'] as const).forEach((mode) =>
     it(`should return correct theme color, for theme version 2, ${mode} mode`, () => {
       expect(
         getButtonColors({
@@ -413,7 +420,7 @@ describe('getButtonColors - background color', () => {
     })
   );
 
-  ['text', 'outlined'].forEach((mode) =>
+  (['text', 'outlined'] as const).forEach((mode) =>
     it(`should return correct theme color, for theme version 2, dark theme, ${mode} mode`, () => {
       expect(
         getButtonColors({
@@ -426,7 +433,7 @@ describe('getButtonColors - background color', () => {
     })
   );
 
-  ['text', 'outlined'].forEach((mode) =>
+  (['text', 'outlined'] as const).forEach((mode) =>
     it(`should return correct theme color, for theme version 2, when disabled, ${mode} mode`, () => {
       expect(
         getButtonColors({
@@ -440,7 +447,7 @@ describe('getButtonColors - background color', () => {
     })
   );
 
-  ['text', 'outlined'].forEach((mode) =>
+  (['text', 'outlined'] as const).forEach((mode) =>
     it(`should return correct theme color, for theme version 2, when disabled, dark theme, ${mode} mode`, () => {
       expect(
         getButtonColors({
@@ -464,6 +471,7 @@ describe('getButtonColors - text color', () => {
         customTextColor,
         theme: getTheme(),
         disabled: false,
+        mode: 'text',
       })
     ).toMatchObject({ textColor: customTextColor });
   });
@@ -474,6 +482,7 @@ describe('getButtonColors - text color', () => {
         customTextColor,
         theme: getTheme(),
         disabled: true,
+        mode: 'text',
       })
     ).toMatchObject({
       textColor: getTheme().colors.onSurfaceDisabled,
@@ -486,13 +495,14 @@ describe('getButtonColors - text color', () => {
         customTextColor,
         theme: getTheme(true),
         disabled: true,
+        mode: 'text',
       })
     ).toMatchObject({
       textColor: getTheme(true).colors.onSurfaceDisabled,
     });
   });
 
-  ['contained', 'contained-tonal', 'elevated'].forEach((mode) =>
+  (['contained', 'contained-tonal', 'elevated'] as const).forEach((mode) =>
     it(`should return correct text color for dark prop, for theme version 3, ${mode} mode`, () => {
       expect(
         getButtonColors({
@@ -506,7 +516,7 @@ describe('getButtonColors - text color', () => {
     })
   );
 
-  ['outlined', 'text', 'elevated'].forEach((mode) =>
+  (['outlined', 'text', 'elevated'] as const).forEach((mode) =>
     it(`should return correct theme text color, for theme version 3, ${mode} mode`, () => {
       expect(
         getButtonColors({
@@ -519,7 +529,7 @@ describe('getButtonColors - text color', () => {
     })
   );
 
-  ['outlined', 'text', 'elevated'].forEach((mode) =>
+  (['outlined', 'text', 'elevated'] as const).forEach((mode) =>
     it(`should return correct theme text color, for theme version 3, dark theme, ${mode} mode`, () => {
       expect(
         getButtonColors({
@@ -581,6 +591,7 @@ describe('getButtonColors - text color', () => {
       getButtonColors({
         theme: getTheme(false, false),
         disabled: true,
+        mode: 'text',
       })
     ).toMatchObject({
       textColor: color(black).alpha(0.32).rgb().string(),
@@ -592,6 +603,7 @@ describe('getButtonColors - text color', () => {
       getButtonColors({
         theme: getTheme(true, false),
         disabled: true,
+        mode: 'text',
       })
     ).toMatchObject({
       textColor: color(white).alpha(0.32).rgb().string(),
@@ -610,7 +622,7 @@ describe('getButtonColors - text color', () => {
     });
   });
 
-  ['text', 'outlined'].forEach((mode) =>
+  (['text', 'outlined'] as const).forEach((mode) =>
     it(`should return correct theme text color, for theme version 2, ${mode} mode`, () => {
       expect(
         getButtonColors({
@@ -623,7 +635,7 @@ describe('getButtonColors - text color', () => {
     })
   );
 
-  ['text', 'outlined'].forEach((mode) =>
+  (['text', 'outlined'] as const).forEach((mode) =>
     it(`should return correct theme text color, for theme version 2, dark theme, ${mode} mode`, () => {
       expect(
         getButtonColors({
@@ -684,30 +696,32 @@ describe('getButtonColors - border color', () => {
     });
   });
 
-  ['text', 'contained', 'contained-tonal', 'elevated'].forEach((mode) =>
-    it(`should return transparent border, for theme version 3, ${mode} mode`, () => {
-      expect(
-        getButtonColors({
-          theme: getTheme(),
-          mode,
-        })
-      ).toMatchObject({
-        borderColor: 'transparent',
-      });
-    })
+  (['text', 'contained', 'contained-tonal', 'elevated'] as const).forEach(
+    (mode) =>
+      it(`should return transparent border, for theme version 3, ${mode} mode`, () => {
+        expect(
+          getButtonColors({
+            theme: getTheme(),
+            mode,
+          })
+        ).toMatchObject({
+          borderColor: 'transparent',
+        });
+      })
   );
 
-  ['text', 'contained', 'contained-tonal', 'elevated'].forEach((mode) =>
-    it(`should return transparent border, for theme version 3, dark theme, ${mode} mode`, () => {
-      expect(
-        getButtonColors({
-          theme: getTheme(true),
-          mode,
-        })
-      ).toMatchObject({
-        borderColor: 'transparent',
-      });
-    })
+  (['text', 'contained', 'contained-tonal', 'elevated'] as const).forEach(
+    (mode) =>
+      it(`should return transparent border, for theme version 3, dark theme, ${mode} mode`, () => {
+        expect(
+          getButtonColors({
+            theme: getTheme(true),
+            mode,
+          })
+        ).toMatchObject({
+          borderColor: 'transparent',
+        });
+      })
   );
 
   it('should return correct border color, for theme version 2, outlined mode', () => {
@@ -732,30 +746,32 @@ describe('getButtonColors - border color', () => {
     });
   });
 
-  ['text', 'contained', 'contained-tonal', 'elevated'].forEach((mode) =>
-    it(`should return transparent border, for theme version 2, ${mode} mode`, () => {
-      expect(
-        getButtonColors({
-          theme: getTheme(false, false),
-          mode,
-        })
-      ).toMatchObject({
-        borderColor: 'transparent',
-      });
-    })
+  (['text', 'contained', 'contained-tonal', 'elevated'] as const).forEach(
+    (mode) =>
+      it(`should return transparent border, for theme version 2, ${mode} mode`, () => {
+        expect(
+          getButtonColors({
+            theme: getTheme(false, false),
+            mode,
+          })
+        ).toMatchObject({
+          borderColor: 'transparent',
+        });
+      })
   );
 
-  ['text', 'contained', 'contained-tonal', 'elevated'].forEach((mode) =>
-    it(`should return transparent border, for theme version 2, dark theme, ${mode} mode`, () => {
-      expect(
-        getButtonColors({
-          theme: getTheme(false, false),
-          mode,
-        })
-      ).toMatchObject({
-        borderColor: 'transparent',
-      });
-    })
+  (['text', 'contained', 'contained-tonal', 'elevated'] as const).forEach(
+    (mode) =>
+      it(`should return transparent border, for theme version 2, dark theme, ${mode} mode`, () => {
+        expect(
+          getButtonColors({
+            theme: getTheme(false, false),
+            mode,
+          })
+        ).toMatchObject({
+          borderColor: 'transparent',
+        });
+      })
   );
 });
 
@@ -782,16 +798,46 @@ describe('getButtonColors - border width', () => {
     });
   });
 
-  ['text', 'contained', 'contained-tonal', 'elevated'].forEach((mode) =>
-    it(`should return correct border width, for ${mode} mode`, () => {
-      expect(
-        getButtonColors({
-          theme: getTheme(),
-          mode,
-        })
-      ).toMatchObject({
-        borderWidth: 0,
-      });
-    })
+  (['text', 'contained', 'contained-tonal', 'elevated'] as const).forEach(
+    (mode) =>
+      it(`should return correct border width, for ${mode} mode`, () => {
+        expect(
+          getButtonColors({
+            theme: getTheme(),
+            mode,
+          })
+        ).toMatchObject({
+          borderWidth: 0,
+        });
+      })
   );
 });
+
+it('animated value changes correctly', () => {
+  const value = new Animated.Value(1);
+  const { getByTestId } = render(
+    <Button
+      mode="elevated"
+      compact
+      icon="camera"
+      style={[{ transform: [{ scale: value }] }]}
+    >
+      Compact button
+    </Button>
+  );
+  expect(getByTestId('button-container')).toHaveStyle({
+    transform: [{ scale: 1 }],
+  });
+
+  Animated.timing(value, {
+    toValue: 1.5,
+    useNativeDriver: false,
+    duration: 200,
+  }).start();
+
+  jest.advanceTimersByTime(200);
+
+  expect(getByTestId('button-container')).toHaveStyle({
+    transform: [{ scale: 1.5 }],
+  });
+});
diff --git a/src/components/__tests__/Card/Card.test.js b/src/components/__tests__/Card/Card.test.tsx
similarity index 83%
rename from src/components/__tests__/Card/Card.test.js
rename to src/components/__tests__/Card/Card.test.tsx
index 155f3c9016..8fec512703 100644
--- a/src/components/__tests__/Card/Card.test.js
+++ b/src/components/__tests__/Card/Card.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet } from 'react-native';
+import { Animated, StyleSheet } from 'react-native';
 
 import { render } from '@testing-library/react-native';
 import color from 'color';
@@ -20,7 +20,7 @@ const styles = StyleSheet.create({
 
 describe('Card', () => {
   it('renders an outlined card', () => {
-    const tree = renderer.create(<Card mode="outlined" />).toJSON();
+    const tree = renderer.create(<Card mode="outlined">{null}</Card>).toJSON();
 
     expect(tree).toMatchSnapshot();
   });
@@ -31,7 +31,9 @@ describe('Card', () => {
         mode="outlined"
         theme={{ colors: { outline: 'purple' } }}
         style={styles.customBorderRadius}
-      />
+      >
+        {null}
+      </Card>
     );
 
     expect(getByTestId('card-outline')).toHaveStyle({
@@ -46,7 +48,9 @@ describe('Card', () => {
         mode="outlined"
         accessibilityLabel="card"
         style={{ borderColor: MD3Colors.error50 }}
-      />
+      >
+        {null}
+      </Card>
     );
 
     expect(getByLabelText('card')).toHaveStyle({
@@ -60,7 +64,9 @@ describe('Card', () => {
         mode="outlined"
         accessibilityLabel="card"
         theme={{ colors: { surface: '#0000FF' } }}
-      />
+      >
+        {null}
+      </Card>
     );
 
     expect(getByLabelText('card')).toHaveStyle({
@@ -92,7 +98,9 @@ describe('getCardColors - background color', () => {
         theme: getTheme(),
         mode: 'contained',
       })
-    ).toMatchObject({ backgroundColor: getTheme().colors.surfaceVariant });
+    ).toMatchObject({
+      backgroundColor: getTheme().colors.surfaceVariant,
+    });
   });
 
   it('should return correct theme color, for theme version 3, outlined mode', () => {
@@ -117,6 +125,7 @@ describe('getCardColors - background color', () => {
     expect(
       getCardColors({
         theme: getTheme(false, false),
+        mode: undefined as any,
       })
     ).toMatchObject({ backgroundColor: undefined });
   });
@@ -127,6 +136,7 @@ describe('getCardColors - border color', () => {
     expect(
       getCardColors({
         theme: getTheme(),
+        mode: undefined as any,
       })
     ).toMatchObject({ borderColor: getTheme().colors.outline });
   });
@@ -135,6 +145,7 @@ describe('getCardColors - border color', () => {
     expect(
       getCardColors({
         theme: getTheme(true, false),
+        mode: undefined as any,
       })
     ).toMatchObject({
       borderColor: color(white).alpha(0.12).rgb().string(),
@@ -145,6 +156,7 @@ describe('getCardColors - border color', () => {
     expect(
       getCardColors({
         theme: getTheme(false, false),
+        mode: undefined as any,
       })
     ).toMatchObject({
       borderColor: color(black).alpha(0.12).rgb().string(),
@@ -196,3 +208,31 @@ describe('getCardCoverStyle - border radius', () => {
     });
   });
 });
+
+it('animated value changes correctly', () => {
+  const value = new Animated.Value(1);
+  const { getByTestId } = render(
+    <Card
+      mode="outlined"
+      accessibilityLabel="card"
+      style={[{ transform: [{ scale: value }] }]}
+    >
+      {null}
+    </Card>
+  );
+  expect(getByTestId('card-container')).toHaveStyle({
+    transform: [{ scale: 1 }],
+  });
+
+  Animated.timing(value, {
+    toValue: 1.5,
+    useNativeDriver: false,
+    duration: 200,
+  }).start();
+
+  jest.advanceTimersByTime(200);
+
+  expect(getByTestId('card-container')).toHaveStyle({
+    transform: [{ scale: 1.5 }],
+  });
+});
diff --git a/src/components/__tests__/Card/__snapshots__/Card.test.js.snap b/src/components/__tests__/Card/__snapshots__/Card.test.tsx.snap
similarity index 98%
rename from src/components/__tests__/Card/__snapshots__/Card.test.js.snap
rename to src/components/__tests__/Card/__snapshots__/Card.test.tsx.snap
index ac0a5297df..a2012b860b 100644
--- a/src/components/__tests__/Card/__snapshots__/Card.test.js.snap
+++ b/src/components/__tests__/Card/__snapshots__/Card.test.tsx.snap
@@ -46,6 +46,7 @@ exports[`Card renders an outlined card 1`] = `
           "elevation": 1,
         }
       }
+      testID="card-container"
     >
       <View
         pointerEvents="none"
diff --git a/src/components/__tests__/Chip.test.js b/src/components/__tests__/Chip.test.tsx
similarity index 91%
rename from src/components/__tests__/Chip.test.js
rename to src/components/__tests__/Chip.test.tsx
index a60262db87..1b5400a36c 100644
--- a/src/components/__tests__/Chip.test.js
+++ b/src/components/__tests__/Chip.test.tsx
@@ -1,11 +1,13 @@
 import * as React from 'react';
+import { Animated } from 'react-native';
 
+import { render } from '@testing-library/react-native';
 import color from 'color';
 import renderer from 'react-test-renderer';
 
 import { getTheme } from '../../core/theming';
 import { black, white } from '../../styles/themes/v2/colors';
-import Chip from '../Chip/Chip.tsx';
+import Chip from '../Chip/Chip';
 import { getChipColors } from '../Chip/helpers';
 
 it('renders chip with onPress', () => {
@@ -72,6 +74,7 @@ describe('getChipColors - text color', () => {
       getChipColors({
         disabled: true,
         theme: getTheme(),
+        isOutlined: false,
       })
     ).toMatchObject({
       textColor: getTheme().colors.onSurfaceDisabled,
@@ -83,6 +86,7 @@ describe('getChipColors - text color', () => {
       getChipColors({
         disabled: true,
         theme: getTheme(false, false),
+        isOutlined: false,
       })
     ).toMatchObject({
       textColor: getTheme(false, false).colors.disabled,
@@ -93,6 +97,7 @@ describe('getChipColors - text color', () => {
     expect(
       getChipColors({
         theme: getTheme(),
+        isOutlined: false,
       })
     ).toMatchObject({
       textColor: getTheme().colors.onSecondaryContainer,
@@ -114,6 +119,7 @@ describe('getChipColors - text color', () => {
     expect(
       getChipColors({
         theme: getTheme(false, false),
+        isOutlined: false,
       })
     ).toMatchObject({
       textColor: color(getTheme(false, false).colors.text)
@@ -128,6 +134,7 @@ describe('getChipColors - text color', () => {
       getChipColors({
         theme: getTheme(),
         selectedColor: 'purple',
+        isOutlined: false,
       })
     ).toMatchObject({
       textColor: 'purple',
@@ -139,6 +146,7 @@ describe('getChipColors - text color', () => {
       getChipColors({
         theme: getTheme(false, false),
         selectedColor: 'purple',
+        isOutlined: false,
       })
     ).toMatchObject({
       textColor: color('purple').alpha(0.87).rgb().string(),
@@ -152,6 +160,7 @@ describe('getChipColors - icon color', () => {
       getChipColors({
         disabled: true,
         theme: getTheme(),
+        isOutlined: false,
       })
     ).toMatchObject({
       iconColor: getTheme().colors.onSurfaceDisabled,
@@ -163,6 +172,7 @@ describe('getChipColors - icon color', () => {
       getChipColors({
         disabled: true,
         theme: getTheme(false, false),
+        isOutlined: false,
       })
     ).toMatchObject({
       iconColor: getTheme(false, false).colors.disabled,
@@ -173,6 +183,7 @@ describe('getChipColors - icon color', () => {
     expect(
       getChipColors({
         theme: getTheme(),
+        isOutlined: false,
       })
     ).toMatchObject({
       iconColor: getTheme().colors.onSecondaryContainer,
@@ -194,6 +205,7 @@ describe('getChipColors - icon color', () => {
     expect(
       getChipColors({
         theme: getTheme(false, false),
+        isOutlined: false,
       })
     ).toMatchObject({
       iconColor: color(getTheme(false, false).colors.text)
@@ -208,6 +220,7 @@ describe('getChipColors - icon color', () => {
       getChipColors({
         theme: getTheme(),
         selectedColor: 'purple',
+        isOutlined: false,
       })
     ).toMatchObject({
       iconColor: 'purple',
@@ -219,6 +232,7 @@ describe('getChipColors - icon color', () => {
       getChipColors({
         theme: getTheme(false, false),
         selectedColor: 'purple',
+        isOutlined: false,
       })
     ).toMatchObject({
       iconColor: color('purple').alpha(0.54).rgb().string(),
@@ -231,6 +245,7 @@ describe('getChipColors - underlay color', () => {
     expect(
       getChipColors({
         theme: getTheme(),
+        isOutlined: false,
       })
     ).toMatchObject({
       underlayColor: color(getTheme().colors.onSecondaryContainer)
@@ -259,6 +274,7 @@ describe('getChipColors - underlay color', () => {
       getChipColors({
         theme: getTheme(),
         selectedColor: 'purple',
+        isOutlined: false,
       })
     ).toMatchObject({
       underlayColor: color('purple').alpha(0.12).rgb().string(),
@@ -270,6 +286,7 @@ describe('getChipColors - underlay color', () => {
       getChipColors({
         theme: getTheme(false, false),
         selectedColor: 'purple',
+        isOutlined: false,
       })
     ).toMatchObject({
       underlayColor: color('purple').fade(0.5).rgb().string(),
@@ -293,6 +310,7 @@ describe('getChipColors - underlay color', () => {
       getChipColors({
         theme: getTheme(true, false),
         customBackgroundColor: 'purple',
+        isOutlined: false,
       })
     ).toMatchObject({
       underlayColor: color('purple').lighten(0.4).rgb().string(),
@@ -316,6 +334,7 @@ describe('getChipColors - underlay color', () => {
       getChipColors({
         theme: getTheme(false, false),
         customBackgroundColor: 'purple',
+        isOutlined: false,
       })
     ).toMatchObject({
       underlayColor: color('purple').darken(0.2).rgb().string(),
@@ -340,6 +359,7 @@ describe('getChipColors - underlay color', () => {
     expect(
       getChipColors({
         theme: getTheme(false, false),
+        isOutlined: false,
       })
     ).toMatchObject({
       underlayColor: color('#ebebeb').darken(0.2).rgb().string(),
@@ -364,6 +384,7 @@ describe('getChipColors - underlay color', () => {
     expect(
       getChipColors({
         theme: getTheme(true, false),
+        isOutlined: false,
       })
     ).toMatchObject({
       underlayColor: color('#383838').lighten(0.4).rgb().string(),
@@ -392,6 +413,7 @@ describe('getChipColor - selected background color', () => {
       getChipColors({
         theme: getTheme(),
         customBackgroundColor: 'purple',
+        isOutlined: false,
       })
     ).toMatchObject({
       selectedBackgroundColor: color('purple')
@@ -423,6 +445,7 @@ describe('getChipColor - selected background color', () => {
         theme: getTheme(),
         customBackgroundColor: 'purple',
         showSelectedOverlay: true,
+        isOutlined: false,
       })
     ).toMatchObject({
       selectedBackgroundColor: color('purple')
@@ -450,6 +473,7 @@ describe('getChipColor - selected background color', () => {
     expect(
       getChipColors({
         theme: getTheme(),
+        isOutlined: false,
       })
     ).toMatchObject({
       selectedBackgroundColor: color(getTheme().colors.secondaryContainer)
@@ -476,6 +500,7 @@ describe('getChipColor - selected background color', () => {
       getChipColors({
         theme: getTheme(false, false),
         customBackgroundColor: 'purple',
+        isOutlined: false,
       })
     ).toMatchObject({
       selectedBackgroundColor: color('purple').darken(0.2).rgb().string(),
@@ -499,6 +524,7 @@ describe('getChipColor - selected background color', () => {
       getChipColors({
         theme: getTheme(true, false),
         customBackgroundColor: 'purple',
+        isOutlined: false,
       })
     ).toMatchObject({
       selectedBackgroundColor: color('purple').lighten(0.4).rgb().string(),
@@ -523,6 +549,7 @@ describe('getChipColor - selected background color', () => {
     expect(
       getChipColors({
         theme: getTheme(false, false),
+        isOutlined: false,
       })
     ).toMatchObject({
       selectedBackgroundColor: color('#ebebeb').darken(0.2).rgb().string(),
@@ -533,6 +560,7 @@ describe('getChipColor - selected background color', () => {
     expect(
       getChipColors({
         theme: getTheme(true, false),
+        isOutlined: false,
       })
     ).toMatchObject({
       selectedBackgroundColor: color('#383838').lighten(0.4).rgb().string(),
@@ -546,6 +574,7 @@ describe('getChipColor - background color', () => {
       getChipColors({
         theme: getTheme(),
         customBackgroundColor: 'purple',
+        isOutlined: false,
       })
     ).toMatchObject({
       backgroundColor: 'purple',
@@ -567,6 +596,7 @@ describe('getChipColor - background color', () => {
     expect(
       getChipColors({
         theme: getTheme(),
+        isOutlined: false,
       })
     ).toMatchObject({
       backgroundColor: getTheme().colors.secondaryContainer,
@@ -588,6 +618,7 @@ describe('getChipColor - background color', () => {
     expect(
       getChipColors({
         theme: getTheme(false, false),
+        isOutlined: false,
       })
     ).toMatchObject({
       backgroundColor: '#ebebeb',
@@ -598,6 +629,7 @@ describe('getChipColor - background color', () => {
     expect(
       getChipColors({
         theme: getTheme(true, false),
+        isOutlined: false,
       })
     ).toMatchObject({
       backgroundColor: '#383838',
@@ -611,6 +643,7 @@ describe('getChipColor - border color', () => {
       getChipColors({
         theme: getTheme(),
         disabled: true,
+        isOutlined: false,
       })
     ).toMatchObject({
       borderColor: color(getTheme().colors.onSurfaceVariant)
@@ -625,6 +658,7 @@ describe('getChipColor - border color', () => {
       getChipColors({
         theme: getTheme(),
         selectedColor: 'purple',
+        isOutlined: false,
       })
     ).toMatchObject({
       borderColor: color('purple').alpha(0.29).rgb().string(),
@@ -635,6 +669,7 @@ describe('getChipColor - border color', () => {
     expect(
       getChipColors({
         theme: getTheme(),
+        isOutlined: false,
       })
     ).toMatchObject({
       borderColor: getTheme().colors.outline,
@@ -658,6 +693,7 @@ describe('getChipColor - border color', () => {
       getChipColors({
         theme: getTheme(true, false),
         customBackgroundColor: 'purple',
+        isOutlined: false,
       })
     ).toMatchObject({
       borderColor: 'purple',
@@ -690,6 +726,7 @@ describe('getChipColor - border color', () => {
     expect(
       getChipColors({
         theme: getTheme(false, false),
+        isOutlined: false,
       })
     ).toMatchObject({
       borderColor: '#ebebeb',
@@ -700,9 +737,38 @@ describe('getChipColor - border color', () => {
     expect(
       getChipColors({
         theme: getTheme(true, false),
+        isOutlined: false,
       })
     ).toMatchObject({
       borderColor: '#383838',
     });
   });
 });
+
+it('animated value changes correctly', () => {
+  const value = new Animated.Value(1);
+  const { getByTestId } = render(
+    <Chip
+      onPress={() => {}}
+      testID="chip"
+      style={[{ transform: [{ scale: value }] }]}
+    >
+      Example Chip
+    </Chip>
+  );
+  expect(getByTestId('chip-container')).toHaveStyle({
+    transform: [{ scale: 1 }],
+  });
+
+  Animated.timing(value, {
+    toValue: 1.5,
+    useNativeDriver: false,
+    duration: 200,
+  }).start();
+
+  jest.advanceTimersByTime(200);
+
+  expect(getByTestId('chip-container')).toHaveStyle({
+    transform: [{ scale: 1.5 }],
+  });
+});
diff --git a/src/components/__tests__/FAB.test.js b/src/components/__tests__/FAB.test.tsx
similarity index 92%
rename from src/components/__tests__/FAB.test.js
rename to src/components/__tests__/FAB.test.tsx
index 982404a68c..b52ad90e73 100644
--- a/src/components/__tests__/FAB.test.js
+++ b/src/components/__tests__/FAB.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StyleSheet } from 'react-native';
+import { Animated, StyleSheet } from 'react-native';
 
 import { render } from '@testing-library/react-native';
 import color from 'color';
@@ -146,7 +146,7 @@ it('renders FAB with custom border radius', () => {
   expect(getByTestId('fab-container')).toHaveStyle({ borderRadius: 0 });
 });
 
-['small', 'medium', 'large'].forEach((size) => {
+(['small', 'medium', 'large'] as const).forEach((size) => {
   it(`renders ${size} FAB with correct size and border radius`, () => {
     const { getByTestId } = render(
       <FAB onPress={() => {}} size={size} icon="plus" testID={`${size}-fab`} />
@@ -369,3 +369,31 @@ describe('getFABColors - foreground color', () => {
     });
   });
 });
+
+it('animated value changes correctly', () => {
+  const value = new Animated.Value(1);
+  const { getByTestId } = render(
+    <FAB
+      size="small"
+      onPress={() => {}}
+      icon="plus"
+      testID="fab"
+      style={[{ transform: [{ scale: value }] }]}
+    />
+  );
+  expect(getByTestId('fab-container')).toHaveStyle({
+    transform: [{ scale: 1 }],
+  });
+
+  Animated.timing(value, {
+    toValue: 1.5,
+    useNativeDriver: false,
+    duration: 200,
+  }).start();
+
+  jest.advanceTimersByTime(200);
+
+  expect(getByTestId('fab-container')).toHaveStyle({
+    transform: [{ scale: 1.5 }],
+  });
+});
diff --git a/src/components/__tests__/FABGroup.test.js b/src/components/__tests__/FABGroup.test.tsx
similarity index 78%
rename from src/components/__tests__/FABGroup.test.js
rename to src/components/__tests__/FABGroup.test.tsx
index c254849450..a17fef5ca3 100644
--- a/src/components/__tests__/FABGroup.test.js
+++ b/src/components/__tests__/FABGroup.test.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Animated } from 'react-native';
 
 import { render } from '@testing-library/react-native';
 import color from 'color';
@@ -110,6 +111,8 @@ describe('FABActions - labelStyle - containerStyle', () => {
       <FAB.Group
         visible
         open
+        icon=""
+        onStateChange={() => {}}
         actions={[
           {
             label: 'complete',
@@ -117,6 +120,8 @@ describe('FABActions - labelStyle - containerStyle', () => {
               fontSize: 24,
               fontWeight: '500',
             },
+            onPress() {},
+            icon: '',
           },
         ]}
       />
@@ -133,6 +138,8 @@ describe('FABActions - labelStyle - containerStyle', () => {
       <FAB.Group
         visible
         open
+        icon=""
+        onStateChange={() => {}}
         actions={[
           {
             label: 'remove',
@@ -142,6 +149,8 @@ describe('FABActions - labelStyle - containerStyle', () => {
               backgroundColor: '#687456',
               marginLeft: 16,
             },
+            onPress() {},
+            icon: '',
           },
         ]}
       />
@@ -161,9 +170,13 @@ it('correctly adds label prop', () => {
       visible
       open
       label="Label test"
+      icon=""
+      onStateChange={() => {}}
       actions={[
         {
           label: 'testing',
+          onPress() {},
+          icon: '',
         },
       ]}
     />
@@ -171,3 +184,40 @@ it('correctly adds label prop', () => {
 
   expect(getByText('Label test')).toBeTruthy();
 });
+
+it('animated value changes correctly', () => {
+  const value = new Animated.Value(1);
+  const { getByTestId } = render(
+    <FAB.Group
+      visible
+      open
+      label="Label test"
+      icon=""
+      onStateChange={() => {}}
+      testID="my-fab"
+      fabStyle={[{ transform: [{ scale: value }] }]}
+      actions={[
+        {
+          label: 'testing',
+          onPress() {},
+          icon: '',
+        },
+      ]}
+    />
+  );
+  expect(getByTestId('my-fab-container')).toHaveStyle({
+    transform: [{ scale: 1 }],
+  });
+
+  Animated.timing(value, {
+    toValue: 1.5,
+    useNativeDriver: false,
+    duration: 200,
+  }).start();
+
+  jest.advanceTimersByTime(200);
+
+  expect(getByTestId('my-fab-container')).toHaveStyle({
+    transform: [{ scale: 1.5 }],
+  });
+});
diff --git a/src/components/__tests__/IconButton.test.js b/src/components/__tests__/IconButton.test.tsx
similarity index 91%
rename from src/components/__tests__/IconButton.test.js
rename to src/components/__tests__/IconButton.test.tsx
index 531c84e762..8aa92fa6bf 100644
--- a/src/components/__tests__/IconButton.test.js
+++ b/src/components/__tests__/IconButton.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StyleSheet } from 'react-native';
+import { Animated, StyleSheet } from 'react-native';
 
 import { render } from '@testing-library/react-native';
 import color from 'color';
@@ -7,7 +7,7 @@ import renderer from 'react-test-renderer';
 
 import { getTheme } from '../../core/theming';
 import { pink500 } from '../../styles/themes/v2/colors';
-import IconButton from '../IconButton/IconButton.tsx';
+import IconButton from '../IconButton/IconButton';
 import { getIconButtonColor } from '../IconButton/utils';
 
 const styles = StyleSheet.create({
@@ -198,7 +198,7 @@ describe('getIconButtonColor - background color', () => {
     });
   });
 
-  ['contained', 'contained-tonal'].forEach((mode) =>
+  (['contained', 'contained-tonal'] as const).forEach((mode) =>
     it(`should return correct disabled color, for theme version 3, ${mode} mode`, () => {
       expect(
         getIconButtonColor({
@@ -339,3 +339,29 @@ describe('getIconButtonColor - ripple color', () => {
     });
   });
 });
+
+it('action animated value changes correctly', () => {
+  const value = new Animated.Value(1);
+  const { getByTestId } = render(
+    <IconButton
+      icon="menu"
+      style={[{ transform: [{ scale: value }] }]}
+      testID="icon-button"
+    />
+  );
+  expect(getByTestId('icon-button-container')).toHaveStyle({
+    transform: [{ scale: 1 }],
+  });
+
+  Animated.timing(value, {
+    toValue: 1.5,
+    useNativeDriver: false,
+    duration: 200,
+  }).start();
+
+  jest.advanceTimersByTime(200);
+
+  expect(getByTestId('icon-button-container')).toHaveStyle({
+    transform: [{ scale: 1.5 }],
+  });
+});
diff --git a/src/components/__tests__/Menu.test.js b/src/components/__tests__/Menu.test.tsx
similarity index 78%
rename from src/components/__tests__/Menu.test.js
rename to src/components/__tests__/Menu.test.tsx
index be3ab48289..ab8f31a13f 100644
--- a/src/components/__tests__/Menu.test.js
+++ b/src/components/__tests__/Menu.test.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { Animated, StyleSheet, View } from 'react-native';
 
-import { waitFor } from '@testing-library/react-native';
+import { render, waitFor } from '@testing-library/react-native';
 import renderer from 'react-test-renderer';
 
-import Button from '../Button/Button.tsx';
-import Menu from '../Menu/Menu.tsx';
-import Portal from '../Portal/Portal.tsx';
+import Button from '../Button/Button';
+import Menu from '../Menu/Menu';
+import Portal from '../Portal/Portal';
 
 const styles = StyleSheet.create({
   contentStyle: {
@@ -74,7 +74,7 @@ it('renders menu with content styles', () => {
 });
 
 it('uses the default anchorPosition of top', async () => {
-  function makeMenu(visible) {
+  function makeMenu(visible: boolean) {
     return (
       <Portal.Host>
         <Menu
@@ -86,7 +86,6 @@ it('uses the default anchorPosition of top', async () => {
             </Button>
           }
           contentStyle={styles.contentStyle}
-          testID="menu"
         >
           <Menu.Item onPress={jest.fn()} title="Undo" />
           <Menu.Item onPress={jest.fn()} title="Redo" />
@@ -125,7 +124,7 @@ it('uses the default anchorPosition of top', async () => {
 });
 
 it('respects anchorPosition bottom', async () => {
-  function makeMenu(visible) {
+  function makeMenu(visible: boolean) {
     return (
       <Portal.Host>
         <Menu
@@ -138,7 +137,6 @@ it('respects anchorPosition bottom', async () => {
           }
           anchorPosition="bottom"
           contentStyle={styles.contentStyle}
-          testID="menu"
         >
           <Menu.Item onPress={jest.fn()} title="Undo" />
           <Menu.Item onPress={jest.fn()} title="Redo" />
@@ -170,3 +168,35 @@ it('respects anchorPosition bottom', async () => {
     ]);
   });
 });
+
+it('animated value changes correctly', () => {
+  const value = new Animated.Value(1);
+  const { getByTestId } = render(
+    <Portal.Host>
+      <Menu
+        visible
+        onDismiss={jest.fn()}
+        anchor={<Button mode="outlined">Open menu</Button>}
+        testID="menu"
+        contentStyle={[{ transform: [{ scale: value }] }]}
+      >
+        <Menu.Item onPress={jest.fn()} title="Test" />
+      </Menu>
+    </Portal.Host>
+  );
+  expect(getByTestId('menu-surface')).toHaveStyle({
+    transform: [{ scale: 1 }],
+  });
+
+  Animated.timing(value, {
+    toValue: 1.5,
+    useNativeDriver: false,
+    duration: 200,
+  }).start();
+
+  jest.advanceTimersByTime(200);
+
+  expect(getByTestId('menu-surface')).toHaveStyle({
+    transform: [{ scale: 1.5 }],
+  });
+});
diff --git a/src/components/__tests__/Modal.test.js b/src/components/__tests__/Modal.test.tsx
similarity index 77%
rename from src/components/__tests__/Modal.test.js
rename to src/components/__tests__/Modal.test.tsx
index 387728aee1..43d1dab430 100644
--- a/src/components/__tests__/Modal.test.js
+++ b/src/components/__tests__/Modal.test.tsx
@@ -1,5 +1,10 @@
 import * as React from 'react';
-import { Text, BackHandler } from 'react-native';
+import {
+  Animated,
+  Text,
+  BackHandler as RNBackHandler,
+  BackHandlerStatic as RNBackHandlerStatic,
+} from 'react-native';
 
 import { act, fireEvent, render } from '@testing-library/react-native';
 
@@ -10,6 +15,12 @@ jest.mock('react-native-safe-area-context', () => ({
   useSafeAreaInsets: () => ({ bottom: 44, left: 0, right: 0, top: 37 }),
 }));
 
+interface BackHandlerStatic extends RNBackHandlerStatic {
+  mockPressBack(): void;
+}
+
+const BackHandler = RNBackHandler as BackHandlerStatic;
+
 jest.mock('react-native/Libraries/Utilities/BackHandler', () =>
   // eslint-disable-next-line jest/no-mocks-import
   require('react-native/Libraries/Utilities/__mocks__/BackHandler')
@@ -25,7 +36,9 @@ describe('Modal', () => {
 
   afterAll(() => {
     jest.useRealTimers();
-    window.requestAnimationFrame.mockRestore();
+    (
+      window.requestAnimationFrame as unknown as { mockRestore(): void }
+    ).mockRestore();
   });
 
   describe('by default', () => {
@@ -40,7 +53,11 @@ describe('Modal', () => {
     });
 
     it("should render a backdrop in default theme's color", () => {
-      const { getByTestId } = render(<Modal visible={true} testID="modal" />);
+      const { getByTestId } = render(
+        <Modal visible={true} testID="modal">
+          {null}
+        </Modal>
+      );
 
       expect(getByTestId('modal-backdrop')).toHaveStyle({
         backgroundColor: MD3LightTheme.colors.backdrop,
@@ -57,7 +74,9 @@ describe('Modal', () => {
               backdrop: 'transparent',
             },
           }}
-        />
+        >
+          {null}
+        </Modal>
       );
 
       expect(getByTestId('modal-backdrop')).toHaveStyle({
@@ -66,7 +85,11 @@ describe('Modal', () => {
     });
 
     it('should receive appropriate top and bottom insets', () => {
-      const { getByTestId } = render(<Modal visible={true} testID="modal" />);
+      const { getByTestId } = render(
+        <Modal visible={true} testID="modal">
+          {null}
+        </Modal>
+      );
 
       expect(getByTestId('modal-wrapper')).toHaveStyle({
         marginTop: 37,
@@ -78,7 +101,9 @@ describe('Modal', () => {
     describe('if closed via touching backdrop', () => {
       it('will run the animation but not fade out', async () => {
         const { getByTestId } = render(
-          <Modal testID="modal" visible onDismiss={() => {}} />
+          <Modal testID="modal" visible onDismiss={() => {}}>
+            {null}
+          </Modal>
         );
 
         expect(getByTestId('modal-surface')).toHaveStyle({
@@ -109,7 +134,9 @@ describe('Modal', () => {
       it('should invoke the onDismiss function after the animation', () => {
         const onDismiss = jest.fn();
         const { getByTestId } = render(
-          <Modal testID="modal" visible onDismiss={onDismiss} />
+          <Modal testID="modal" visible onDismiss={onDismiss}>
+            {null}
+          </Modal>
         );
 
         expect(onDismiss).not.toHaveBeenCalled();
@@ -131,7 +158,9 @@ describe('Modal', () => {
     describe('if closed via Android back button', () => {
       it('will run the animation but not fade out', async () => {
         const { getByTestId } = render(
-          <Modal testID="modal" visible onDismiss={() => {}} />
+          <Modal testID="modal" visible onDismiss={() => {}}>
+            {null}
+          </Modal>
         );
 
         expect(getByTestId('modal-surface')).toHaveStyle({
@@ -162,7 +191,11 @@ describe('Modal', () => {
       it('should invoke the onDismiss function after the animation', () => {
         const onDismiss = jest.fn();
 
-        render(<Modal testID="modal" visible onDismiss={onDismiss} />);
+        render(
+          <Modal testID="modal" visible onDismiss={onDismiss}>
+            {null}
+          </Modal>
+        );
 
         expect(onDismiss).not.toHaveBeenCalled();
 
@@ -190,7 +223,9 @@ describe('Modal', () => {
             visible
             onDismiss={() => {}}
             dismissable={false}
-          />
+          >
+            {null}
+          </Modal>
         );
 
         expect(getByTestId('modal-surface')).toHaveStyle({
@@ -226,7 +261,9 @@ describe('Modal', () => {
             visible
             onDismiss={onDismiss}
             dismissable={false}
-          />
+          >
+            {null}
+          </Modal>
         );
 
         expect(onDismiss).not.toHaveBeenCalled();
@@ -253,7 +290,9 @@ describe('Modal', () => {
             visible
             onDismiss={() => {}}
             dismissable={false}
-          />
+          >
+            {null}
+          </Modal>
         );
 
         expect(getByTestId('modal-surface')).toHaveStyle({
@@ -290,7 +329,9 @@ describe('Modal', () => {
             visible
             onDismiss={onDismiss}
             dismissable={false}
-          />
+          >
+            {null}
+          </Modal>
         );
 
         expect(onDismiss).not.toHaveBeenCalled();
@@ -314,12 +355,18 @@ describe('Modal', () => {
     describe('from false to true (closed to open)', () => {
       it('should run fade-in animation on opening', () => {
         const { queryByTestId, getByTestId, rerender } = render(
-          <Modal testID="modal" />
+          <Modal testID="modal" visible={false}>
+            {null}
+          </Modal>
         );
 
         expect(queryByTestId('modal')).toBe(null);
 
-        rerender(<Modal testID="modal" visible />);
+        rerender(
+          <Modal testID="modal" visible>
+            {null}
+          </Modal>
+        );
 
         expect(getByTestId('modal-backdrop')).toHaveStyle({
           opacity: 0,
@@ -344,7 +391,9 @@ describe('Modal', () => {
     describe('from true to false (open to closed)', () => {
       it('should run fade-out animation on closing', async () => {
         const { queryByTestId, getByTestId, rerender } = render(
-          <Modal testID="modal" visible />
+          <Modal testID="modal" visible>
+            {null}
+          </Modal>
         );
 
         expect(getByTestId('modal-backdrop')).toHaveStyle({
@@ -354,7 +403,11 @@ describe('Modal', () => {
           opacity: 1,
         });
 
-        rerender(<Modal testID="modal" visible={false} />);
+        rerender(
+          <Modal testID="modal" visible={false}>
+            {null}
+          </Modal>
+        );
 
         expect(getByTestId('modal-backdrop')).toHaveStyle({
           opacity: 1,
@@ -374,13 +427,17 @@ describe('Modal', () => {
         const onDismiss = jest.fn();
 
         const { rerender } = render(
-          <Modal testID="modal" visible onDismiss={onDismiss} />
+          <Modal testID="modal" visible onDismiss={onDismiss}>
+            {null}
+          </Modal>
         );
 
         expect(onDismiss).not.toHaveBeenCalled();
 
         rerender(
-          <Modal testID="modal" visible={false} onDismiss={onDismiss} />
+          <Modal testID="modal" visible={false} onDismiss={onDismiss}>
+            {null}
+          </Modal>
         );
 
         expect(onDismiss).not.toHaveBeenCalled();
@@ -394,7 +451,9 @@ describe('Modal', () => {
 
       it('should close even if the dialog is not dismissible', async () => {
         const { queryByTestId, getByTestId, rerender } = render(
-          <Modal testID="modal" visible dismissable={false} />
+          <Modal testID="modal" visible dismissable={false}>
+            {null}
+          </Modal>
         );
 
         expect(getByTestId('modal-backdrop')).toHaveStyle({
@@ -404,7 +463,11 @@ describe('Modal', () => {
           opacity: 1,
         });
 
-        rerender(<Modal testID="modal" visible={false} dismissable={false} />);
+        rerender(
+          <Modal testID="modal" visible={false} dismissable={false}>
+            {null}
+          </Modal>
+        );
 
         expect(getByTestId('modal-backdrop')).toHaveStyle({
           opacity: 1,
@@ -426,7 +489,9 @@ describe('Modal', () => {
     describe('while closing, back to true (visible)', () => {
       it('should keep the modal open', () => {
         const { getByTestId, rerender } = render(
-          <Modal testID="modal" visible />
+          <Modal testID="modal" visible>
+            {null}
+          </Modal>
         );
 
         expect(getByTestId('modal-backdrop')).toHaveStyle({
@@ -436,7 +501,11 @@ describe('Modal', () => {
           opacity: 1,
         });
 
-        rerender(<Modal testID="modal" visible={false} />);
+        rerender(
+          <Modal testID="modal" visible={false}>
+            {null}
+          </Modal>
+        );
 
         expect(getByTestId('modal-backdrop')).toHaveStyle({
           opacity: 1,
@@ -451,7 +520,11 @@ describe('Modal', () => {
           jest.advanceTimersToNextTimer(1000);
         });
 
-        rerender(<Modal testID="modal" visible />);
+        rerender(
+          <Modal testID="modal" visible>
+            {null}
+          </Modal>
+        );
 
         act(() => {
           jest.runAllTimers();
@@ -469,12 +542,18 @@ describe('Modal', () => {
     describe('while opening, back to false (hidden)', () => {
       it('should keep the modal closed', () => {
         const { queryByTestId, getByTestId, rerender } = render(
-          <Modal testID="modal" visible={false} />
+          <Modal testID="modal" visible={false}>
+            {null}
+          </Modal>
         );
 
         expect(queryByTestId('modal-backdrop')).toBe(null);
 
-        rerender(<Modal testID="modal" visible />);
+        rerender(
+          <Modal testID="modal" visible>
+            {null}
+          </Modal>
+        );
 
         expect(getByTestId('modal-backdrop')).toHaveStyle({
           opacity: 0,
@@ -491,7 +570,11 @@ describe('Modal', () => {
 
         expect(queryByTestId('modal-backdrop')).not.toBe(null);
 
-        rerender(<Modal testID="modal" visible={false} />);
+        rerender(
+          <Modal testID="modal" visible={false}>
+            {null}
+          </Modal>
+        );
 
         act(() => {
           jest.runAllTimers();
@@ -501,4 +584,32 @@ describe('Modal', () => {
       });
     });
   });
+
+  it('animated value changes correctly', () => {
+    const value = new Animated.Value(1);
+    const { getByTestId } = render(
+      <Modal
+        visible={true}
+        testID="modal"
+        contentContainerStyle={[{ transform: [{ scale: value }] }]}
+      >
+        {null}
+      </Modal>
+    );
+    expect(getByTestId('modal-surface')).toHaveStyle({
+      transform: [{ scale: 1 }],
+    });
+
+    Animated.timing(value, {
+      toValue: 1.5,
+      useNativeDriver: false,
+      duration: 200,
+    }).start();
+
+    jest.runAllTimers();
+
+    expect(getByTestId('modal-surface')).toHaveStyle({
+      transform: [{ scale: 1.5 }],
+    });
+  });
 });
diff --git a/src/components/__tests__/Searchbar.test.js b/src/components/__tests__/Searchbar.test.tsx
similarity index 61%
rename from src/components/__tests__/Searchbar.test.js
rename to src/components/__tests__/Searchbar.test.tsx
index e19b17e762..772fdb1772 100644
--- a/src/components/__tests__/Searchbar.test.js
+++ b/src/components/__tests__/Searchbar.test.tsx
@@ -1,12 +1,15 @@
 import * as React from 'react';
+import { Animated } from 'react-native';
 
 import { render } from '@testing-library/react-native';
 import renderer from 'react-test-renderer';
 
-import Searchbar from '../Searchbar.tsx';
+import Searchbar from '../Searchbar';
 
 it('renders with placeholder', () => {
-  const tree = renderer.create(<Searchbar placeholder="Search" />).toJSON();
+  const tree = renderer
+    .create(<Searchbar placeholder="Search" value="" />)
+    .toJSON();
 
   expect(tree).toMatchSnapshot();
 });
@@ -20,19 +23,19 @@ it('renders with text', () => {
 });
 
 it('activity indicator snapshot test', () => {
-  const tree = renderer.create(<Searchbar loading={true} />).toJSON();
+  const tree = renderer.create(<Searchbar loading={true} value="" />).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders with ActivityIndicator', () => {
-  const tree = render(<Searchbar loading={true} />);
+  const tree = render(<Searchbar loading={true} value="" />);
 
   expect(tree.getByTestId('activity-indicator')).toBeTruthy();
 });
 
 it('renders without ActivityIndicator', () => {
-  const { getByTestId } = render(<Searchbar loading={false} />);
+  const { getByTestId } = render(<Searchbar loading={false} value="" />);
 
   expect(() => getByTestId('activity-indicator')).toThrow();
 });
@@ -64,3 +67,29 @@ it('renders clear icon wrapper, which is never target of touch events, if search
     'none'
   );
 });
+
+it('animated value changes correctly', () => {
+  const value = new Animated.Value(1);
+  const { getByTestId } = render(
+    <Searchbar
+      testID="search-bar"
+      value=""
+      style={[{ transform: [{ scale: value }] }]}
+    />
+  );
+  expect(getByTestId('search-bar-container')).toHaveStyle({
+    transform: [{ scale: 1 }],
+  });
+
+  Animated.timing(value, {
+    toValue: 1.5,
+    useNativeDriver: false,
+    duration: 200,
+  }).start();
+
+  jest.advanceTimersByTime(200);
+
+  expect(getByTestId('search-bar-container')).toHaveStyle({
+    transform: [{ scale: 1.5 }],
+  });
+});
diff --git a/src/components/__tests__/Snackbar.test.js b/src/components/__tests__/Snackbar.test.tsx
similarity index 67%
rename from src/components/__tests__/Snackbar.test.js
rename to src/components/__tests__/Snackbar.test.tsx
index 65dead5ae4..074609af04 100644
--- a/src/components/__tests__/Snackbar.test.js
+++ b/src/components/__tests__/Snackbar.test.tsx
@@ -1,10 +1,11 @@
 import * as React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import { Animated, StyleSheet, Text, View } from 'react-native';
 
+import { render } from '@testing-library/react-native';
 import renderer from 'react-test-renderer';
 
 import { red200, white } from '../../styles/themes/v2/colors';
-import Snackbar from '../Snackbar.tsx';
+import Snackbar from '../Snackbar';
 
 const styles = StyleSheet.create({
   snackContent: {
@@ -22,12 +23,21 @@ const styles = StyleSheet.create({
 jest.mock('react-native', () => {
   const RN = jest.requireActual('react-native');
 
-  RN.Animated.timing = (value, config) => ({
+  const timing: typeof Animated['timing'] = (value, config) => ({
     start: (callback) => {
-      value.setValue(config.toValue);
-      callback && callback({ finished: true });
+      value.setValue(config.toValue as any);
+      callback?.({ finished: true });
+    },
+    value,
+    config,
+    stop: () => {
+      throw new Error('Not implemented');
+    },
+    reset: () => {
+      throw new Error('Not implemented');
     },
   });
+  RN.Animated.timing = timing;
 
   return RN;
 });
@@ -105,3 +115,32 @@ it('renders snackbar with View & Text as a child', () => {
 
   expect(tree).toMatchSnapshot();
 });
+
+it('animated value changes correctly', () => {
+  const value = new Animated.Value(1);
+  const { getByTestId } = render(
+    <Snackbar
+      visible
+      onDismiss={jest.fn()}
+      testID="snack-bar"
+      style={[{ transform: [{ scale: value }] }]}
+    >
+      Snackbar content
+    </Snackbar>
+  );
+  expect(getByTestId('snack-bar')).toHaveStyle({
+    transform: [{ scale: 1 }],
+  });
+
+  Animated.timing(value, {
+    toValue: 1.5,
+    useNativeDriver: false,
+    duration: 200,
+  }).start();
+
+  jest.advanceTimersByTime(200);
+
+  expect(getByTestId('snack-bar')).toHaveStyle({
+    transform: [{ scale: 1.5 }],
+  });
+});
diff --git a/src/components/__tests__/ToggleButton.test.js b/src/components/__tests__/ToggleButton.test.tsx
similarity index 69%
rename from src/components/__tests__/ToggleButton.test.js
rename to src/components/__tests__/ToggleButton.test.tsx
index 732be08f62..a8f8e5b924 100644
--- a/src/components/__tests__/ToggleButton.test.js
+++ b/src/components/__tests__/ToggleButton.test.tsx
@@ -1,5 +1,7 @@
 import * as React from 'react';
+import { Animated } from 'react-native';
 
+import { render } from '@testing-library/react-native';
 import color from 'color';
 import renderer from 'react-test-renderer';
 
@@ -19,13 +21,7 @@ it('renders toggle button', () => {
 it('renders disabled toggle button', () => {
   const tree = renderer
     .create(
-      <ToggleButton
-        disabled
-        value="toggle"
-        status="checked"
-        onValueChange={() => {}}
-        icon="heart"
-      />
+      <ToggleButton disabled value="toggle" status="checked" icon="heart" />
     )
     .toJSON();
 
@@ -34,14 +30,7 @@ it('renders disabled toggle button', () => {
 
 it('renders unchecked toggle button', () => {
   const tree = renderer
-    .create(
-      <ToggleButton
-        disabled
-        status="unchecked"
-        onValueChange={() => {}}
-        icon="heart"
-      />
-    )
+    .create(<ToggleButton disabled status="unchecked" icon="heart" />)
     .toJSON();
 
   expect(tree).toMatchSnapshot();
@@ -84,3 +73,31 @@ describe('getToggleButtonColor', () => {
     );
   });
 });
+
+it('animated value changes correctly', () => {
+  const value = new Animated.Value(1);
+  const { getByTestId } = render(
+    <ToggleButton
+      disabled
+      status="unchecked"
+      icon="heart"
+      testID="toggle-button"
+      style={[{ transform: [{ scale: value }] }]}
+    />
+  );
+  expect(getByTestId('toggle-button-container')).toHaveStyle({
+    transform: [{ scale: 1 }],
+  });
+
+  Animated.timing(value, {
+    toValue: 1.5,
+    useNativeDriver: false,
+    duration: 200,
+  }).start();
+
+  jest.advanceTimersByTime(200);
+
+  expect(getByTestId('toggle-button-container')).toHaveStyle({
+    transform: [{ scale: 1.5 }],
+  });
+});
diff --git a/src/components/__tests__/__snapshots__/AnimatedFAB.test.js.snap b/src/components/__tests__/__snapshots__/AnimatedFAB.test.tsx.snap
similarity index 99%
rename from src/components/__tests__/__snapshots__/AnimatedFAB.test.js.snap
rename to src/components/__tests__/__snapshots__/AnimatedFAB.test.tsx.snap
index d28fe081f0..4f5d6f3cb3 100644
--- a/src/components/__tests__/__snapshots__/AnimatedFAB.test.js.snap
+++ b/src/components/__tests__/__snapshots__/AnimatedFAB.test.tsx.snap
@@ -148,6 +148,7 @@ exports[`renders animated fab 1`] = `
             }
           >
             <View
+              accessibilityLabel=""
               accessibilityRole="button"
               accessibilityState={
                 Object {
diff --git a/src/components/__tests__/__snapshots__/Banner.test.js.snap b/src/components/__tests__/__snapshots__/Banner.test.tsx.snap
similarity index 96%
rename from src/components/__tests__/__snapshots__/Banner.test.js.snap
rename to src/components/__tests__/__snapshots__/Banner.test.tsx.snap
index 91bf6c46da..c434345296 100644
--- a/src/components/__tests__/__snapshots__/Banner.test.js.snap
+++ b/src/components/__tests__/__snapshots__/Banner.test.tsx.snap
@@ -172,6 +172,7 @@ exports[`render visible banner, with custom theme 1`] = `
                       "minWidth": "auto",
                     }
                   }
+                  testID="button-container"
                 >
                   <View
                     accessibilityRole="button"
@@ -459,7 +460,6 @@ exports[`renders visible banner, with action buttons and with image 1`] = `
   >
     <View
       collapsable={false}
-      image={[Function]}
       style={
         Object {
           "backgroundColor": "rgb(247, 243, 249)",
@@ -503,6 +503,28 @@ exports[`renders visible banner, with action buttons and with image 1`] = `
               }
             }
           >
+            <View
+              style={
+                Object {
+                  "margin": 8,
+                }
+              }
+            >
+              <Image
+                accessibilityIgnoresInvertColors={true}
+                source={
+                  Object {
+                    "uri": "https://callstack.com/images/team/Satya.png",
+                  }
+                }
+                style={
+                  Object {
+                    "height": 40,
+                    "width": 40,
+                  }
+                }
+              />
+            </View>
             <Text
               accessibilityLiveRegion="polite"
               accessibilityRole="alert"
@@ -593,6 +615,7 @@ exports[`renders visible banner, with action buttons and with image 1`] = `
                       "minWidth": "auto",
                     }
                   }
+                  testID="button-container"
                 >
                   <View
                     accessibilityRole="button"
@@ -871,6 +894,7 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
                       "minWidth": "auto",
                     }
                   }
+                  testID="button-container"
                 >
                   <View
                     accessibilityRole="button"
@@ -1018,6 +1042,7 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
                       "minWidth": "auto",
                     }
                   }
+                  testID="button-container"
                 >
                   <View
                     accessibilityRole="button"
@@ -1163,7 +1188,6 @@ exports[`renders visible banner, without action buttons and with image 1`] = `
   >
     <View
       collapsable={false}
-      image={[Function]}
       style={
         Object {
           "backgroundColor": "rgb(247, 243, 249)",
@@ -1207,6 +1231,28 @@ exports[`renders visible banner, without action buttons and with image 1`] = `
               }
             }
           >
+            <View
+              style={
+                Object {
+                  "margin": 8,
+                }
+              }
+            >
+              <Image
+                accessibilityIgnoresInvertColors={true}
+                source={
+                  Object {
+                    "uri": "https://callstack.com/images/team/Satya.png",
+                  }
+                }
+                style={
+                  Object {
+                    "height": 40,
+                    "width": 40,
+                  }
+                }
+              />
+            </View>
             <Text
               accessibilityLiveRegion="polite"
               accessibilityRole="alert"
diff --git a/src/components/__tests__/__snapshots__/BottomNavigation.test.js.snap b/src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap
similarity index 99%
rename from src/components/__tests__/__snapshots__/BottomNavigation.test.js.snap
rename to src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap
index 7a9bc44c6b..b0048ddf73 100644
--- a/src/components/__tests__/__snapshots__/BottomNavigation.test.js.snap
+++ b/src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap
@@ -115,6 +115,7 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
             "backgroundColor": "transparent",
           }
         }
+        testID="bottom-navigation-surface"
       >
         <View
           collapsable={false}
@@ -861,6 +862,7 @@ exports[`hides labels in shifting bottom navigation 1`] = `
             "backgroundColor": "transparent",
           }
         }
+        testID="bottom-navigation-surface"
       >
         <View
           collapsable={false}
@@ -1760,6 +1762,7 @@ exports[`renders bottom navigation with getLazy 1`] = `
             "backgroundColor": "transparent",
           }
         }
+        testID="bottom-navigation-surface"
       >
         <View
           collapsable={false}
@@ -3467,6 +3470,7 @@ exports[`renders bottom navigation with scene animation 1`] = `
             "backgroundColor": "transparent",
           }
         }
+        testID="bottom-navigation-surface"
       >
         <View
           collapsable={false}
@@ -4955,6 +4959,7 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
             "backgroundColor": "transparent",
           }
         }
+        testID="bottom-navigation-surface"
       >
         <View
           collapsable={false}
@@ -5146,7 +5151,9 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
                   >
                     <text
                       color="rgba(28, 27, 31, 1)"
-                    />
+                    >
+                      Route: 0
+                    </text>
                   </View>
                   <View
                     collapsable={false}
@@ -5163,7 +5170,9 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
                   >
                     <text
                       color="rgba(28, 27, 31, 1)"
-                    />
+                    >
+                      Route: 0
+                    </text>
                   </View>
                 </View>
               </View>
@@ -5315,7 +5324,9 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
                   >
                     <text
                       color="rgba(73, 69, 79, 1)"
-                    />
+                    >
+                      Route: 1
+                    </text>
                   </View>
                   <View
                     collapsable={false}
@@ -5332,7 +5343,9 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
                   >
                     <text
                       color="rgba(73, 69, 79, 1)"
-                    />
+                    >
+                      Route: 1
+                    </text>
                   </View>
                 </View>
               </View>
@@ -5484,7 +5497,9 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
                   >
                     <text
                       color="rgba(73, 69, 79, 1)"
-                    />
+                    >
+                      Route: 2
+                    </text>
                   </View>
                   <View
                     collapsable={false}
@@ -5501,7 +5516,9 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
                   >
                     <text
                       color="rgba(73, 69, 79, 1)"
-                    />
+                    >
+                      Route: 2
+                    </text>
                   </View>
                 </View>
               </View>
@@ -5629,6 +5646,7 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
             "backgroundColor": "transparent",
           }
         }
+        testID="bottom-navigation-surface"
       >
         <View
           collapsable={false}
@@ -5847,7 +5865,9 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
                   >
                     <text
                       color="rgba(28, 27, 31, 1)"
-                    />
+                    >
+                      Route: 0
+                    </text>
                   </View>
                 </View>
               </View>
@@ -6005,7 +6025,9 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
                   >
                     <text
                       color="rgba(73, 69, 79, 1)"
-                    />
+                    >
+                      Route: 1
+                    </text>
                   </View>
                 </View>
               </View>
@@ -6163,7 +6185,9 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
                   >
                     <text
                       color="rgba(73, 69, 79, 1)"
-                    />
+                    >
+                      Route: 2
+                    </text>
                   </View>
                 </View>
               </View>
@@ -6321,7 +6345,9 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
                   >
                     <text
                       color="rgba(73, 69, 79, 1)"
-                    />
+                    >
+                      Route: 3
+                    </text>
                   </View>
                 </View>
               </View>
@@ -6479,7 +6505,9 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
                   >
                     <text
                       color="rgba(73, 69, 79, 1)"
-                    />
+                    >
+                      Route: 4
+                    </text>
                   </View>
                 </View>
               </View>
@@ -6605,9 +6633,9 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
         style={
           Object {
             "backgroundColor": "transparent",
-            "color": "#e57373",
           }
         }
+        testID="bottom-navigation-surface"
       >
         <View
           collapsable={false}
@@ -7697,9 +7725,9 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
         style={
           Object {
             "backgroundColor": "transparent",
-            "color": "#e57373",
           }
         }
+        testID="bottom-navigation-surface"
       >
         <View
           collapsable={false}
@@ -8668,6 +8696,7 @@ exports[`renders non-shifting bottom navigation 1`] = `
             "backgroundColor": "transparent",
           }
         }
+        testID="bottom-navigation-surface"
       >
         <View
           collapsable={false}
@@ -9759,6 +9788,7 @@ exports[`renders shifting bottom navigation 1`] = `
             "backgroundColor": "transparent",
           }
         }
+        testID="bottom-navigation-surface"
       >
         <View
           collapsable={false}
diff --git a/src/components/__tests__/__snapshots__/Button.test.js.snap b/src/components/__tests__/__snapshots__/Button.test.tsx.snap
similarity index 99%
rename from src/components/__tests__/__snapshots__/Button.test.js.snap
rename to src/components/__tests__/__snapshots__/Button.test.tsx.snap
index 514695f6b2..b5c19fe3df 100644
--- a/src/components/__tests__/__snapshots__/Button.test.js.snap
+++ b/src/components/__tests__/__snapshots__/Button.test.tsx.snap
@@ -49,6 +49,7 @@ exports[`renders button with an accessibility hint 1`] = `
           "minWidth": 64,
         }
       }
+      testID="button-container"
     >
       <View
         accessibilityHint="hint"
@@ -197,6 +198,7 @@ exports[`renders button with an accessibility label 1`] = `
           "minWidth": 64,
         }
       }
+      testID="button-container"
     >
       <View
         accessibilityLabel="label"
@@ -345,6 +347,7 @@ exports[`renders button with button color 1`] = `
           "minWidth": 64,
         }
       }
+      testID="button-container"
     >
       <View
         accessibilityRole="button"
@@ -492,6 +495,7 @@ exports[`renders button with color 1`] = `
           "minWidth": 64,
         }
       }
+      testID="button-container"
     >
       <View
         accessibilityRole="button"
@@ -639,6 +643,7 @@ exports[`renders button with custom testID 1`] = `
           "minWidth": 64,
         }
       }
+      testID="custom:testID-container"
     >
       <View
         accessibilityRole="button"
@@ -786,6 +791,7 @@ exports[`renders button with icon 1`] = `
           "minWidth": 64,
         }
       }
+      testID="button-container"
     >
       <View
         accessibilityRole="button"
@@ -989,6 +995,7 @@ exports[`renders button with icon in reverse order 1`] = `
           "minWidth": 64,
         }
       }
+      testID="button-container"
     >
       <View
         accessibilityRole="button"
@@ -1194,6 +1201,7 @@ exports[`renders contained contained with mode 1`] = `
           "minWidth": 64,
         }
       }
+      testID="button-container"
     >
       <View
         accessibilityRole="button"
@@ -1342,6 +1350,7 @@ exports[`renders disabled button 1`] = `
           "minWidth": 64,
         }
       }
+      testID="button-container"
     >
       <View
         accessibilityRole="button"
@@ -1489,6 +1498,7 @@ exports[`renders loading button 1`] = `
           "minWidth": 64,
         }
       }
+      testID="button-container"
     >
       <View
         accessibilityRole="button"
@@ -1844,6 +1854,7 @@ exports[`renders outlined button with mode 1`] = `
           "minWidth": 64,
         }
       }
+      testID="button-container"
     >
       <View
         accessibilityRole="button"
@@ -1992,6 +2003,7 @@ exports[`renders text button by default 1`] = `
           "minWidth": 64,
         }
       }
+      testID="button-container"
     >
       <View
         accessibilityRole="button"
@@ -2139,6 +2151,7 @@ exports[`renders text button with mode 1`] = `
           "minWidth": 64,
         }
       }
+      testID="button-container"
     >
       <View
         accessibilityRole="button"
diff --git a/src/components/__tests__/__snapshots__/Chip.test.js.snap b/src/components/__tests__/__snapshots__/Chip.test.tsx.snap
similarity index 99%
rename from src/components/__tests__/__snapshots__/Chip.test.js.snap
rename to src/components/__tests__/__snapshots__/Chip.test.tsx.snap
index c3a7bb7e8f..de15a0c908 100644
--- a/src/components/__tests__/__snapshots__/Chip.test.js.snap
+++ b/src/components/__tests__/__snapshots__/Chip.test.tsx.snap
@@ -49,6 +49,7 @@ exports[`renders chip with close button 1`] = `
           "flexDirection": "column",
         }
       }
+      testID="chip-container"
     >
       <View
         accessibilityRole="button"
@@ -86,6 +87,7 @@ exports[`renders chip with close button 1`] = `
             ],
           ]
         }
+        testID="chip"
       >
         <View
           style={
@@ -334,6 +336,7 @@ exports[`renders chip with custom close button 1`] = `
           "flexDirection": "column",
         }
       }
+      testID="chip-container"
     >
       <View
         accessibilityRole="button"
@@ -371,6 +374,7 @@ exports[`renders chip with custom close button 1`] = `
             ],
           ]
         }
+        testID="chip"
       >
         <View
           style={
@@ -619,6 +623,7 @@ exports[`renders chip with icon 1`] = `
           "flexDirection": "column",
         }
       }
+      testID="chip-container"
     >
       <View
         accessibilityRole="button"
@@ -656,6 +661,7 @@ exports[`renders chip with icon 1`] = `
             ],
           ]
         }
+        testID="chip"
       >
         <View
           style={
@@ -827,6 +833,7 @@ exports[`renders chip with onPress 1`] = `
           "flexDirection": "column",
         }
       }
+      testID="chip-container"
     >
       <View
         accessibilityRole="button"
@@ -864,6 +871,7 @@ exports[`renders chip with onPress 1`] = `
             ],
           ]
         }
+        testID="chip"
       >
         <View
           style={
@@ -983,6 +991,7 @@ exports[`renders outlined disabled chip 1`] = `
           "flexDirection": "column",
         }
       }
+      testID="chip-container"
     >
       <View
         accessibilityRole="button"
@@ -1020,6 +1029,7 @@ exports[`renders outlined disabled chip 1`] = `
             ],
           ]
         }
+        testID="chip"
       >
         <View
           style={
@@ -1139,6 +1149,7 @@ exports[`renders selected chip 1`] = `
           "flexDirection": "column",
         }
       }
+      testID="chip-container"
     >
       <View
         accessibilityRole="button"
@@ -1176,6 +1187,7 @@ exports[`renders selected chip 1`] = `
             ],
           ]
         }
+        testID="chip"
       >
         <View
           style={
diff --git a/src/components/__tests__/__snapshots__/DataTable.test.js.snap b/src/components/__tests__/__snapshots__/DataTable.test.js.snap
index d6daa2ef1b..898077920c 100644
--- a/src/components/__tests__/__snapshots__/DataTable.test.js.snap
+++ b/src/components/__tests__/__snapshots__/DataTable.test.js.snap
@@ -315,6 +315,7 @@ exports[`renders data table pagination 1`] = `
               "width": 40,
             }
           }
+          testID="icon-button-container"
         >
           <View
             accessibilityComponentType="button"
@@ -365,6 +366,7 @@ exports[`renders data table pagination 1`] = `
                 ],
               ]
             }
+            testID="icon-button"
           >
             <Text
               accessibilityElementsHidden={true}
@@ -457,6 +459,7 @@ exports[`renders data table pagination 1`] = `
               "width": 40,
             }
           }
+          testID="icon-button-container"
         >
           <View
             accessibilityComponentType="button"
@@ -507,6 +510,7 @@ exports[`renders data table pagination 1`] = `
                 ],
               ]
             }
+            testID="icon-button"
           >
             <Text
               accessibilityElementsHidden={true}
@@ -657,6 +661,7 @@ exports[`renders data table pagination with fast-forward buttons 1`] = `
               "width": 40,
             }
           }
+          testID="icon-button-container"
         >
           <View
             accessibilityComponentType="button"
@@ -707,6 +712,7 @@ exports[`renders data table pagination with fast-forward buttons 1`] = `
                 ],
               ]
             }
+            testID="icon-button"
           >
             <Text
               accessibilityElementsHidden={true}
@@ -799,6 +805,7 @@ exports[`renders data table pagination with fast-forward buttons 1`] = `
               "width": 40,
             }
           }
+          testID="icon-button-container"
         >
           <View
             accessibilityComponentType="button"
@@ -849,6 +856,7 @@ exports[`renders data table pagination with fast-forward buttons 1`] = `
                 ],
               ]
             }
+            testID="icon-button"
           >
             <Text
               accessibilityElementsHidden={true}
@@ -941,6 +949,7 @@ exports[`renders data table pagination with fast-forward buttons 1`] = `
               "width": 40,
             }
           }
+          testID="icon-button-container"
         >
           <View
             accessibilityComponentType="button"
@@ -991,6 +1000,7 @@ exports[`renders data table pagination with fast-forward buttons 1`] = `
                 ],
               ]
             }
+            testID="icon-button"
           >
             <Text
               accessibilityElementsHidden={true}
@@ -1083,6 +1093,7 @@ exports[`renders data table pagination with fast-forward buttons 1`] = `
               "width": 40,
             }
           }
+          testID="icon-button-container"
         >
           <View
             accessibilityComponentType="button"
@@ -1133,6 +1144,7 @@ exports[`renders data table pagination with fast-forward buttons 1`] = `
                 ],
               ]
             }
+            testID="icon-button"
           >
             <Text
               accessibilityElementsHidden={true}
@@ -1283,6 +1295,7 @@ exports[`renders data table pagination with label 1`] = `
               "width": 40,
             }
           }
+          testID="icon-button-container"
         >
           <View
             accessibilityComponentType="button"
@@ -1333,6 +1346,7 @@ exports[`renders data table pagination with label 1`] = `
                 ],
               ]
             }
+            testID="icon-button"
           >
             <Text
               accessibilityElementsHidden={true}
@@ -1425,6 +1439,7 @@ exports[`renders data table pagination with label 1`] = `
               "width": 40,
             }
           }
+          testID="icon-button-container"
         >
           <View
             accessibilityComponentType="button"
@@ -1475,6 +1490,7 @@ exports[`renders data table pagination with label 1`] = `
                 ],
               ]
             }
+            testID="icon-button"
           >
             <Text
               accessibilityElementsHidden={true}
@@ -1630,6 +1646,7 @@ exports[`renders data table pagination with options select 1`] = `
                 "textAlign": "center",
               }
             }
+            testID="button-container"
           >
             <View
               accessibilityRole="button"
@@ -1873,6 +1890,7 @@ exports[`renders data table pagination with options select 1`] = `
               "width": 40,
             }
           }
+          testID="icon-button-container"
         >
           <View
             accessibilityComponentType="button"
@@ -1923,6 +1941,7 @@ exports[`renders data table pagination with options select 1`] = `
                 ],
               ]
             }
+            testID="icon-button"
           >
             <Text
               accessibilityElementsHidden={true}
@@ -2015,6 +2034,7 @@ exports[`renders data table pagination with options select 1`] = `
               "width": 40,
             }
           }
+          testID="icon-button-container"
         >
           <View
             accessibilityComponentType="button"
@@ -2065,6 +2085,7 @@ exports[`renders data table pagination with options select 1`] = `
                 ],
               ]
             }
+            testID="icon-button"
           >
             <Text
               accessibilityElementsHidden={true}
@@ -2157,6 +2178,7 @@ exports[`renders data table pagination with options select 1`] = `
               "width": 40,
             }
           }
+          testID="icon-button-container"
         >
           <View
             accessibilityComponentType="button"
@@ -2207,6 +2229,7 @@ exports[`renders data table pagination with options select 1`] = `
                 ],
               ]
             }
+            testID="icon-button"
           >
             <Text
               accessibilityElementsHidden={true}
@@ -2299,6 +2322,7 @@ exports[`renders data table pagination with options select 1`] = `
               "width": 40,
             }
           }
+          testID="icon-button-container"
         >
           <View
             accessibilityComponentType="button"
@@ -2349,6 +2373,7 @@ exports[`renders data table pagination with options select 1`] = `
                 ],
               ]
             }
+            testID="icon-button"
           >
             <Text
               accessibilityElementsHidden={true}
diff --git a/src/components/__tests__/__snapshots__/FAB.test.js.snap b/src/components/__tests__/__snapshots__/FAB.test.tsx.snap
similarity index 100%
rename from src/components/__tests__/__snapshots__/FAB.test.js.snap
rename to src/components/__tests__/__snapshots__/FAB.test.tsx.snap
diff --git a/src/components/__tests__/__snapshots__/IconButton.test.js.snap b/src/components/__tests__/__snapshots__/IconButton.test.tsx.snap
similarity index 98%
rename from src/components/__tests__/__snapshots__/IconButton.test.js.snap
rename to src/components/__tests__/__snapshots__/IconButton.test.tsx.snap
index 7ccb4cfbf7..80650db47d 100644
--- a/src/components/__tests__/__snapshots__/IconButton.test.js.snap
+++ b/src/components/__tests__/__snapshots__/IconButton.test.tsx.snap
@@ -52,6 +52,7 @@ exports[`renders disabled icon button 1`] = `
           "width": 40,
         }
       }
+      testID="icon-button-container"
     >
       <View
         accessibilityComponentType="button"
@@ -106,6 +107,7 @@ exports[`renders disabled icon button 1`] = `
             ],
           ]
         }
+        testID="icon-button"
       >
         <Text
           accessibilityElementsHidden={true}
@@ -201,6 +203,7 @@ exports[`renders icon button by default 1`] = `
           "width": 40,
         }
       }
+      testID="icon-button-container"
     >
       <View
         accessibilityComponentType="button"
@@ -250,6 +253,7 @@ exports[`renders icon button by default 1`] = `
             ],
           ]
         }
+        testID="icon-button"
       >
         <Text
           accessibilityElementsHidden={true}
@@ -345,6 +349,7 @@ exports[`renders icon button with color 1`] = `
           "width": 40,
         }
       }
+      testID="icon-button-container"
     >
       <View
         accessibilityComponentType="button"
@@ -394,6 +399,7 @@ exports[`renders icon button with color 1`] = `
             ],
           ]
         }
+        testID="icon-button"
       >
         <Text
           accessibilityElementsHidden={true}
@@ -489,6 +495,7 @@ exports[`renders icon button with size 1`] = `
           "width": 46,
         }
       }
+      testID="icon-button-container"
     >
       <View
         accessibilityComponentType="button"
@@ -538,6 +545,7 @@ exports[`renders icon button with size 1`] = `
             ],
           ]
         }
+        testID="icon-button"
       >
         <Text
           accessibilityElementsHidden={true}
@@ -633,6 +641,7 @@ exports[`renders icon change animated 1`] = `
           "width": 40,
         }
       }
+      testID="icon-button-container"
     >
       <View
         accessibilityComponentType="button"
@@ -682,6 +691,7 @@ exports[`renders icon change animated 1`] = `
             ],
           ]
         }
+        testID="icon-button"
       >
         <View
           style={
diff --git a/src/components/__tests__/__snapshots__/ListItem.test.js.snap b/src/components/__tests__/__snapshots__/ListItem.test.js.snap
index 9804804d32..e056f95cf9 100644
--- a/src/components/__tests__/__snapshots__/ListItem.test.js.snap
+++ b/src/components/__tests__/__snapshots__/ListItem.test.js.snap
@@ -146,6 +146,7 @@ exports[`renders list item with custom description 1`] = `
                     "flexDirection": "column",
                   }
                 }
+                testID="chip-container"
               >
                 <View
                   accessibilityRole="button"
@@ -183,6 +184,7 @@ exports[`renders list item with custom description 1`] = `
                       ],
                     ]
                   }
+                  testID="chip"
                 >
                   <View
                     style={
diff --git a/src/components/__tests__/__snapshots__/Menu.test.js.snap b/src/components/__tests__/__snapshots__/Menu.test.tsx.snap
similarity index 99%
rename from src/components/__tests__/__snapshots__/Menu.test.js.snap
rename to src/components/__tests__/__snapshots__/Menu.test.tsx.snap
index fa15b0e812..93dc3d3acb 100644
--- a/src/components/__tests__/__snapshots__/Menu.test.js.snap
+++ b/src/components/__tests__/__snapshots__/Menu.test.tsx.snap
@@ -62,6 +62,7 @@ Array [
                 "minWidth": 64,
               }
             }
+            testID="button-container"
           >
             <View
               accessibilityRole="button"
@@ -285,6 +286,7 @@ Array [
                   ],
                 }
               }
+              testID="menu-surface"
             >
               <View
                 accessibilityRole="menuitem"
@@ -564,6 +566,7 @@ exports[`renders not visible menu 1`] = `
               "minWidth": 64,
             }
           }
+          testID="button-container"
         >
           <View
             accessibilityRole="button"
@@ -727,6 +730,7 @@ Array [
                 "minWidth": 64,
               }
             }
+            testID="button-container"
           >
             <View
               accessibilityRole="button"
@@ -948,6 +952,7 @@ Array [
                   ],
                 }
               }
+              testID="menu-surface"
             >
               <View
                 accessibilityRole="menuitem"
diff --git a/src/components/__tests__/__snapshots__/Searchbar.test.js.snap b/src/components/__tests__/__snapshots__/Searchbar.test.tsx.snap
similarity index 98%
rename from src/components/__tests__/__snapshots__/Searchbar.test.js.snap
rename to src/components/__tests__/__snapshots__/Searchbar.test.tsx.snap
index fc1b92fd73..b2110f8711 100644
--- a/src/components/__tests__/__snapshots__/Searchbar.test.js.snap
+++ b/src/components/__tests__/__snapshots__/Searchbar.test.tsx.snap
@@ -47,6 +47,7 @@ exports[`activity indicator snapshot test 1`] = `
           "flexDirection": "row",
         }
       }
+      testID="search-bar-container"
     >
       <View
         collapsable={false}
@@ -99,6 +100,7 @@ exports[`activity indicator snapshot test 1`] = `
                 "width": 40,
               }
             }
+            testID="icon-button-container"
           >
             <View
               accessibilityComponentType="button"
@@ -149,6 +151,7 @@ exports[`activity indicator snapshot test 1`] = `
                   ],
                 ]
               }
+              testID="icon-button"
             >
               <Text
                 accessibilityElementsHidden={true}
@@ -218,6 +221,7 @@ exports[`activity indicator snapshot test 1`] = `
         }
         testID="search-bar"
         underlineColorAndroid="transparent"
+        value=""
       />
       <View
         accessibilityRole="progressbar"
@@ -469,6 +473,7 @@ exports[`renders with placeholder 1`] = `
           "flexDirection": "row",
         }
       }
+      testID="search-bar-container"
     >
       <View
         collapsable={false}
@@ -521,6 +526,7 @@ exports[`renders with placeholder 1`] = `
                 "width": 40,
               }
             }
+            testID="icon-button-container"
           >
             <View
               accessibilityComponentType="button"
@@ -571,6 +577,7 @@ exports[`renders with placeholder 1`] = `
                   ],
                 ]
               }
+              testID="icon-button"
             >
               <Text
                 accessibilityElementsHidden={true}
@@ -640,6 +647,7 @@ exports[`renders with placeholder 1`] = `
         }
         testID="search-bar"
         underlineColorAndroid="transparent"
+        value=""
       />
       <View
         pointerEvents="none"
@@ -696,6 +704,7 @@ exports[`renders with placeholder 1`] = `
                   "width": 40,
                 }
               }
+              testID="icon-button-container"
             >
               <View
                 accessibilityComponentType="button"
@@ -746,6 +755,7 @@ exports[`renders with placeholder 1`] = `
                     ],
                   ]
                 }
+                testID="icon-button"
               >
                 <Text
                   accessibilityElementsHidden={true}
@@ -840,6 +850,7 @@ exports[`renders with text 1`] = `
           "flexDirection": "row",
         }
       }
+      testID="search-bar-container"
     >
       <View
         collapsable={false}
@@ -892,6 +903,7 @@ exports[`renders with text 1`] = `
                 "width": 40,
               }
             }
+            testID="icon-button-container"
           >
             <View
               accessibilityComponentType="button"
@@ -942,6 +954,7 @@ exports[`renders with text 1`] = `
                   ],
                 ]
               }
+              testID="icon-button"
             >
               <Text
                 accessibilityElementsHidden={true}
@@ -1068,6 +1081,7 @@ exports[`renders with text 1`] = `
                   "width": 40,
                 }
               }
+              testID="icon-button-container"
             >
               <View
                 accessibilityComponentType="button"
@@ -1118,6 +1132,7 @@ exports[`renders with text 1`] = `
                     ],
                   ]
                 }
+                testID="icon-button"
               >
                 <Text
                   accessibilityElementsHidden={true}
diff --git a/src/components/__tests__/__snapshots__/Snackbar.test.js.snap b/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap
similarity index 99%
rename from src/components/__tests__/__snapshots__/Snackbar.test.js.snap
rename to src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap
index 3478cdc637..d1d8adb167 100644
--- a/src/components/__tests__/__snapshots__/Snackbar.test.js.snap
+++ b/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap
@@ -392,6 +392,7 @@ exports[`renders snackbar with action button 1`] = `
                     "minWidth": 64,
                   }
                 }
+                testID="button-container"
               >
                 <View
                   accessibilityRole="button"
diff --git a/src/components/__tests__/__snapshots__/TextInput.test.js.snap b/src/components/__tests__/__snapshots__/TextInput.test.js.snap
index 97eadaf769..5a66da087c 100644
--- a/src/components/__tests__/__snapshots__/TextInput.test.js.snap
+++ b/src/components/__tests__/__snapshots__/TextInput.test.js.snap
@@ -1336,6 +1336,7 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm
               "width": 40,
             }
           }
+          testID="right-icon-adornment-container"
         >
           <View
             accessibilityComponentType="button"
@@ -1692,6 +1693,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm
               "width": 40,
             }
           }
+          testID="left-icon-adornment-container"
         >
           <View
             accessibilityComponentType="button"
diff --git a/src/components/__tests__/__snapshots__/ToggleButton.test.js.snap b/src/components/__tests__/__snapshots__/ToggleButton.test.tsx.snap
similarity index 98%
rename from src/components/__tests__/__snapshots__/ToggleButton.test.js.snap
rename to src/components/__tests__/__snapshots__/ToggleButton.test.tsx.snap
index 68a0b64817..2b716e33a1 100644
--- a/src/components/__tests__/__snapshots__/ToggleButton.test.js.snap
+++ b/src/components/__tests__/__snapshots__/ToggleButton.test.tsx.snap
@@ -52,6 +52,7 @@ exports[`renders disabled toggle button 1`] = `
           "width": 42,
         }
       }
+      testID="icon-button-container"
     >
       <View
         accessibilityComponentType="button"
@@ -89,7 +90,6 @@ exports[`renders disabled toggle button 1`] = `
         onResponderTerminate={[Function]}
         onResponderTerminationRequest={[Function]}
         onStartShouldSetResponder={[Function]}
-        onValueChange={[Function]}
         style={
           Array [
             false,
@@ -106,6 +106,7 @@ exports[`renders disabled toggle button 1`] = `
             ],
           ]
         }
+        testID="icon-button"
       >
         <Text
           accessibilityElementsHidden={true}
@@ -201,6 +202,7 @@ exports[`renders toggle button 1`] = `
           "width": 42,
         }
       }
+      testID="icon-button-container"
     >
       <View
         accessibilityComponentType="button"
@@ -249,6 +251,7 @@ exports[`renders toggle button 1`] = `
             ],
           ]
         }
+        testID="icon-button"
       >
         <Text
           accessibilityElementsHidden={true}
@@ -344,6 +347,7 @@ exports[`renders unchecked toggle button 1`] = `
           "width": 42,
         }
       }
+      testID="icon-button-container"
     >
       <View
         accessibilityComponentType="button"
@@ -381,7 +385,6 @@ exports[`renders unchecked toggle button 1`] = `
         onResponderTerminate={[Function]}
         onResponderTerminationRequest={[Function]}
         onStartShouldSetResponder={[Function]}
-        onValueChange={[Function]}
         style={
           Array [
             false,
@@ -398,6 +401,7 @@ exports[`renders unchecked toggle button 1`] = `
             ],
           ]
         }
+        testID="icon-button"
       >
         <Text
           accessibilityElementsHidden={true}
diff --git a/src/core/theming.tsx b/src/core/theming.tsx
index b99af1db60..22d69e3aff 100644
--- a/src/core/theming.tsx
+++ b/src/core/theming.tsx
@@ -47,7 +47,15 @@ export const defaultThemesByVersion = {
   },
 };
 
-export const getTheme = (isDark = false, isV3 = true) => {
+export const getTheme = <
+  Scheme extends boolean = false,
+  IsVersion3 extends boolean = true
+>(
+  isDark: Scheme = false as Scheme,
+  isV3: IsVersion3 = true as IsVersion3
+): typeof defaultThemesByVersion[IsVersion3 extends true
+  ? 3
+  : 2][Scheme extends true ? 'dark' : 'light'] => {
   const themeVersion = isV3 ? 3 : 2;
   const scheme = isDark ? 'dark' : 'light';
 
diff --git a/tsconfig.build.json b/tsconfig.build.json
index 2a21c289eb..4fc3b95757 100644
--- a/tsconfig.build.json
+++ b/tsconfig.build.json
@@ -1,4 +1,4 @@
 {
   "extends": "./tsconfig",
-  "exclude": ["example"]
+  "exclude": ["example", "**/__tests__/*"]
 }
diff --git a/yarn.lock b/yarn.lock
index fd14dd5928..2942a2818e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2896,6 +2896,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-test-renderer@^18.0.0":
+  version "18.0.0"
+  resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-18.0.0.tgz#7b7f69ca98821ea5501b21ba24ea7b6139da2243"
+  integrity sha512-C7/5FBJ3g3sqUahguGi03O79b8afNeSD6T8/GU50oQrJCU0bVCCGQHaGKUbg2Ce8VQEEqTw8/HiS6lXHHdgkdQ==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*":
   version "18.0.24"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.24.tgz#2f79ed5b27f08d05107aab45c17919754cc44c20"