diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx
index 925ca50f86..a019c0fb04 100644
--- a/src/components/Menu/Menu.tsx
+++ b/src/components/Menu/Menu.tsx
@@ -629,6 +629,7 @@ class Menu extends React.Component<Props, State> {
               style={[styles.wrapper, positionStyle, style]}
               pointerEvents={visible ? 'box-none' : 'none'}
               onAccessibilityEscape={onDismiss}
+              testID={`${testID}-view`}
             >
               <Animated.View style={{ transform: positionTransforms }}>
                 <Surface
diff --git a/src/components/__tests__/ActivityIndicator.test.tsx b/src/components/__tests__/ActivityIndicator.test.tsx
index 1f106bf562..f787fe9967 100644
--- a/src/components/__tests__/ActivityIndicator.test.tsx
+++ b/src/components/__tests__/ActivityIndicator.test.tsx
@@ -1,31 +1,31 @@
 import * as React from 'react';
 
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react-native';
 
 import ActivityIndicator from '../ActivityIndicator';
 
 it('renders indicator', () => {
-  const tree = renderer.create(<ActivityIndicator animating />).toJSON();
+  const tree = render(<ActivityIndicator animating />).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders hidden indicator', () => {
-  const tree = renderer
-    .create(<ActivityIndicator animating={false} hidesWhenStopped />)
-    .toJSON();
+  const tree = render(
+    <ActivityIndicator animating={false} hidesWhenStopped />
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders large indicator', () => {
-  const tree = renderer.create(<ActivityIndicator size="large" />).toJSON();
+  const tree = render(<ActivityIndicator size="large" />).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders colored indicator', () => {
-  const tree = renderer.create(<ActivityIndicator color="#FF0000" />).toJSON();
+  const tree = render(<ActivityIndicator color="#FF0000" />).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
diff --git a/src/components/__tests__/AnimatedFAB.test.tsx b/src/components/__tests__/AnimatedFAB.test.tsx
index 6d1e4cbc1f..e6e3711663 100644
--- a/src/components/__tests__/AnimatedFAB.test.tsx
+++ b/src/components/__tests__/AnimatedFAB.test.tsx
@@ -4,7 +4,6 @@ import * as React from 'react';
 import { Animated, StyleSheet } from 'react-native';
 
 import { render } from '@testing-library/react-native';
-import renderer from 'react-test-renderer';
 
 import { MD3Colors } from '../../styles/themes/v3/tokens';
 import AnimatedFAB from '../FAB/AnimatedFAB';
@@ -16,37 +15,31 @@ const styles = StyleSheet.create({
 });
 
 it('renders animated fab', () => {
-  const tree = renderer
-    .create(
-      <AnimatedFAB onPress={() => {}} label="" extended={false} icon="plus" />
-    )
-    .toJSON();
+  const tree = render(
+    <AnimatedFAB onPress={() => {}} label="" extended={false} icon="plus" />
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders animated fab with label on the right by default', () => {
-  const tree = renderer
-    .create(
-      <AnimatedFAB label="text" extended onPress={() => {}} icon="plus" />
-    )
-    .toJSON();
+  const tree = render(
+    <AnimatedFAB label="text" extended onPress={() => {}} icon="plus" />
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders animated fab with label on the left', () => {
-  const tree = renderer
-    .create(
-      <AnimatedFAB
-        label="text"
-        extended
-        animateFrom="left"
-        onPress={() => {}}
-        icon="plus"
-      />
-    )
-    .toJSON();
+  const tree = render(
+    <AnimatedFAB
+      label="text"
+      extended
+      animateFrom="left"
+      onPress={() => {}}
+      icon="plus"
+    />
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
diff --git a/src/components/__tests__/Appbar/Appbar.test.tsx b/src/components/__tests__/Appbar/Appbar.test.tsx
index 1b8e2d7cfa..bf368ec11a 100644
--- a/src/components/__tests__/Appbar/Appbar.test.tsx
+++ b/src/components/__tests__/Appbar/Appbar.test.tsx
@@ -3,7 +3,6 @@ import { Animated, Platform } from 'react-native';
 
 import { render } from '@testing-library/react-native';
 import mockSafeAreaContext from 'react-native-safe-area-context/jest/mock';
-import renderer from 'react-test-renderer';
 
 import Provider from '../../../core/Provider';
 import { getTheme } from '../../../core/theming';
@@ -33,27 +32,23 @@ const renderAppbarContent = utilRenderAppbarContent as (
 
 describe('Appbar', () => {
   it('does not pass any additional props to Searchbar', () => {
-    const tree = renderer
-      .create(
-        <Appbar>
-          <Searchbar placeholder="Search" value="" />
-        </Appbar>
-      )
-      .toJSON();
+    const tree = render(
+      <Appbar>
+        <Searchbar placeholder="Search" value="" />
+      </Appbar>
+    ).toJSON();
 
     expect(tree).toMatchSnapshot();
   });
 
   it('passes additional props to AppbarBackAction, AppbarContent and AppbarAction', () => {
-    const tree = renderer
-      .create(
-        <Appbar>
-          <Appbar.BackAction onPress={() => {}} />
-          <Appbar.Content title="Examples" />
-          <Appbar.Action icon="menu" onPress={() => {}} />
-        </Appbar>
-      )
-      .toJSON();
+    const tree = render(
+      <Appbar>
+        <Appbar.BackAction onPress={() => {}} />
+        <Appbar.Content title="Examples" />
+        <Appbar.Action icon="menu" onPress={() => {}} />
+      </Appbar>
+    ).toJSON();
 
     expect(tree).toMatchSnapshot();
   });
diff --git a/src/components/__tests__/Avatar.test.tsx b/src/components/__tests__/Avatar.test.tsx
index d24fed5701..96d69582b6 100644
--- a/src/components/__tests__/Avatar.test.tsx
+++ b/src/components/__tests__/Avatar.test.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
 import { StyleSheet } from 'react-native';
 
 import { fireEvent, render } from '@testing-library/react-native';
-import renderer from 'react-test-renderer';
 
 import { red500 } from '../../styles/themes/v2/colors';
 import * as Avatar from '../Avatar/Avatar';
@@ -14,51 +13,47 @@ const styles = StyleSheet.create({
 });
 
 it('renders avatar with text', () => {
-  const tree = renderer.create(<Avatar.Text label="XD" />).toJSON();
+  const tree = render(<Avatar.Text label="XD" />).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders avatar with text and custom size', () => {
-  const tree = renderer.create(<Avatar.Text size={96} label="XD" />).toJSON();
+  const tree = render(<Avatar.Text size={96} label="XD" />).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders avatar with text and custom background color', () => {
-  const tree = renderer
-    .create(<Avatar.Text style={styles.bgColor} label="XD" />)
-    .toJSON();
+  const tree = render(
+    <Avatar.Text style={styles.bgColor} label="XD" />
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders avatar with text and custom colors', () => {
-  const tree = renderer
-    .create(<Avatar.Text color="#FFFFFF" label="XD" />)
-    .toJSON();
+  const tree = render(<Avatar.Text color="#FFFFFF" label="XD" />).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders avatar with icon', () => {
-  const tree = renderer.create(<Avatar.Icon icon="information" />).toJSON();
+  const tree = render(<Avatar.Icon icon="information" />).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders avatar with icon and custom background color', () => {
-  const tree = renderer
-    .create(<Avatar.Icon style={styles.bgColor} icon="information" />)
-    .toJSON();
+  const tree = render(
+    <Avatar.Icon style={styles.bgColor} icon="information" />
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders avatar with image', () => {
-  const tree = renderer
-    .create(<Avatar.Image source={{ uri: 'avatar.png' }} />)
-    .toJSON();
+  const tree = render(<Avatar.Image source={{ uri: 'avatar.png' }} />).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
diff --git a/src/components/__tests__/Badge.test.tsx b/src/components/__tests__/Badge.test.tsx
index c318ce1788..aaf42b138b 100644
--- a/src/components/__tests__/Badge.test.tsx
+++ b/src/components/__tests__/Badge.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react-native';
 
 import { red500 } from '../../styles/themes/v2/colors';
 import Badge from '../Badge';
@@ -16,39 +16,37 @@ jest.mock('react-native', () => {
 });
 
 it('renders badge', () => {
-  const tree = renderer.create(<Badge />).toJSON();
+  const tree = render(<Badge />).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders badge with content', () => {
-  const tree = renderer.create(<Badge>3</Badge>).toJSON();
+  const tree = render(<Badge>3</Badge>).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders badge in different size', () => {
-  const tree = renderer.create(<Badge size={12}>3</Badge>).toJSON();
+  const tree = render(<Badge size={12}>3</Badge>).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders badge as hidden', () => {
-  const tree = renderer
-    .create(
-      <Badge visible={false} size={12}>
-        3
-      </Badge>
-    )
-    .toJSON();
+  const tree = render(
+    <Badge visible={false} size={12}>
+      3
+    </Badge>
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders badge in different color', () => {
-  const tree = renderer
-    .create(<Badge style={{ backgroundColor: red500 }}>3</Badge>)
-    .toJSON();
+  const tree = render(
+    <Badge style={{ backgroundColor: red500 }}>3</Badge>
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
diff --git a/src/components/__tests__/Banner.test.tsx b/src/components/__tests__/Banner.test.tsx
index 2c71988b87..4024b53b52 100644
--- a/src/components/__tests__/Banner.test.tsx
+++ b/src/components/__tests__/Banner.test.tsx
@@ -2,118 +2,105 @@ import * as React from 'react';
 import { Animated, Image } from 'react-native';
 
 import { render } from '@testing-library/react-native';
-import renderer from 'react-test-renderer';
 
 import Banner from '../Banner';
 
 it('renders hidden banner, without action buttons and without image', () => {
-  const tree = renderer
-    .create(
-      <Banner visible={false}>
-        Two line text string with two actions. One to two lines is preferable on
-        mobile.
-      </Banner>
-    )
-    .toJSON();
+  const tree = render(
+    <Banner visible={false}>
+      Two line text string with two actions. One to two lines is preferable on
+      mobile.
+    </Banner>
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders visible banner, without action buttons and without image', () => {
-  const tree = renderer
-    .create(
-      <Banner visible>
-        Two line text string with two actions. One to two lines is preferable on
-        mobile.
-      </Banner>
-    )
-    .toJSON();
+  const tree = render(
+    <Banner visible>
+      Two line text string with two actions. One to two lines is preferable on
+      mobile.
+    </Banner>
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders visible banner, with action buttons and without image', () => {
-  const tree = renderer
-    .create(
-      <Banner
-        visible
-        actions={[
-          { label: 'first', onPress: () => {} },
-          { label: 'second', onPress: () => {} },
-        ]}
-      >
-        Two line text string with two actions. One to two lines is preferable on
-        mobile.
-      </Banner>
-    )
-    .toJSON();
+  const tree = render(
+    <Banner
+      visible
+      actions={[
+        { label: 'first', onPress: () => {} },
+        { label: 'second', onPress: () => {} },
+      ]}
+    >
+      Two line text string with two actions. One to two lines is preferable on
+      mobile.
+    </Banner>
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders visible banner, without action buttons and with image', () => {
-  const tree = renderer
-    .create(
-      <Banner
-        visible
-        icon={({ size }) => (
-          <Image
-            source={{ uri: 'https://callstack.com/images/team/Satya.png' }}
-            style={{ width: size, height: size }}
-            accessibilityIgnoresInvertColors
-          />
-        )}
-      >
-        Two line text string with two actions. One to two lines is preferable on
-        mobile.
-      </Banner>
-    )
-    .toJSON();
+  const tree = render(
+    <Banner
+      visible
+      icon={({ size }) => (
+        <Image
+          source={{ uri: 'https://callstack.com/images/team/Satya.png' }}
+          style={{ width: size, height: size }}
+          accessibilityIgnoresInvertColors
+        />
+      )}
+    >
+      Two line text string with two actions. One to two lines is preferable on
+      mobile.
+    </Banner>
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders visible banner, with action buttons and with image', () => {
-  const tree = renderer
-    .create(
-      <Banner
-        visible
-        icon={({ size }) => (
-          <Image
-            source={{ uri: 'https://callstack.com/images/team/Satya.png' }}
-            style={{ width: size, height: size }}
-            accessibilityIgnoresInvertColors
-          />
-        )}
-        actions={[{ label: 'first', onPress: () => {} }]}
-      >
-        Two line text string with two actions. One to two lines is preferable on
-        mobile.
-      </Banner>
-    )
-    .toJSON();
+  const tree = render(
+    <Banner
+      visible
+      icon={({ size }) => (
+        <Image
+          source={{ uri: 'https://callstack.com/images/team/Satya.png' }}
+          style={{ width: size, height: size }}
+          accessibilityIgnoresInvertColors
+        />
+      )}
+      actions={[{ label: 'first', onPress: () => {} }]}
+    >
+      Two line text string with two actions. One to two lines is preferable on
+      mobile.
+    </Banner>
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('render visible banner, with custom theme', () => {
-  const tree = renderer
-    .create(
-      <Banner
-        visible
-        theme={{
-          colors: {
-            text: '#00f',
-            surface: '#ccc',
-            primary: '#043',
-          },
-        }}
-        actions={[{ label: 'first', onPress: () => {} }]}
-      >
-        Custom theme
-      </Banner>
-    )
-    .toJSON();
+  const tree = render(
+    <Banner
+      visible
+      theme={{
+        colors: {
+          text: '#00f',
+          surface: '#ccc',
+          primary: '#043',
+        },
+      }}
+      actions={[{ label: 'first', onPress: () => {} }]}
+    >
+      Custom theme
+    </Banner>
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
@@ -140,7 +127,7 @@ describe('animations', () => {
   describe('when component is rendered hidden', () => {
     // This behaviour is probably a bug. Needs triage before next version.
     it('will fire onHideAnimationFinished on mount', () => {
-      renderer.create(
+      render(
         <Banner
           onShowAnimationFinished={showCallback}
           onHideAnimationFinished={hideCallback}
@@ -159,7 +146,7 @@ describe('animations', () => {
     });
 
     it('should fire onShowAnimationFinished upon opening', () => {
-      const tree = renderer.create(
+      const tree = render(
         <Banner
           onShowAnimationFinished={showCallback}
           onHideAnimationFinished={hideCallback}
@@ -191,7 +178,7 @@ describe('animations', () => {
   describe('when component is rendered visible', () => {
     // This behaviour is probably a bug. Needs triage before next version.
     it('will fire onShowAnimationFinished on mount', () => {
-      renderer.create(
+      render(
         <Banner
           onShowAnimationFinished={showCallback}
           onHideAnimationFinished={hideCallback}
@@ -210,7 +197,7 @@ describe('animations', () => {
     });
 
     it('should fire onHideAnimationFinished upon closing', () => {
-      const tree = renderer.create(
+      const tree = render(
         <Banner
           onShowAnimationFinished={showCallback}
           onHideAnimationFinished={hideCallback}
@@ -241,7 +228,7 @@ describe('animations', () => {
 
   describe('when the callbacks change while the component is mounted', () => {
     it('should not cause another open/close animation', () => {
-      const tree = renderer.create(
+      const tree = render(
         <Banner
           onShowAnimationFinished={showCallback}
           onHideAnimationFinished={hideCallback}
@@ -276,7 +263,7 @@ describe('animations', () => {
     });
 
     it('should use the new callbacks upon opening/closing', () => {
-      const tree = renderer.create(
+      const tree = render(
         <Banner
           onShowAnimationFinished={showCallback}
           onHideAnimationFinished={hideCallback}
diff --git a/src/components/__tests__/BottomNavigation.test.tsx b/src/components/__tests__/BottomNavigation.test.tsx
index fc9ba3b127..12804ddef6 100644
--- a/src/components/__tests__/BottomNavigation.test.tsx
+++ b/src/components/__tests__/BottomNavigation.test.tsx
@@ -3,7 +3,6 @@ import { StyleSheet, Easing, Animated, Platform } from 'react-native';
 
 import { fireEvent, render } from '@testing-library/react-native';
 import color from 'color';
-import renderer from 'react-test-renderer';
 
 import { getTheme } from '../../core/theming';
 import { red300 } from '../../styles/themes/v2/colors';
@@ -85,34 +84,30 @@ const createState = (index: number, length: number) => ({
 });
 
 it('renders shifting bottom navigation', () => {
-  const tree = renderer
-    .create(
-      <BottomNavigation
-        shifting
-        navigationState={createState(0, 5)}
-        onIndexChange={jest.fn()}
-        renderScene={({ route }) => route.title}
-      />
-    )
-    .toJSON();
+  const tree = render(
+    <BottomNavigation
+      shifting
+      navigationState={createState(0, 5)}
+      onIndexChange={jest.fn()}
+      renderScene={({ route }) => route.title}
+    />
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders bottom navigation with scene animation', () => {
-  const tree = renderer
-    .create(
-      <BottomNavigation
-        shifting
-        sceneAnimationEnabled
-        sceneAnimationType="shifting"
-        sceneAnimationEasing={Easing.ease}
-        navigationState={createState(0, 5)}
-        onIndexChange={jest.fn()}
-        renderScene={({ route }) => route.title}
-      />
-    )
-    .toJSON();
+  const tree = render(
+    <BottomNavigation
+      shifting
+      sceneAnimationEnabled
+      sceneAnimationType="shifting"
+      sceneAnimationEasing={Easing.ease}
+      navigationState={createState(0, 5)}
+      onIndexChange={jest.fn()}
+      renderScene={({ route }) => route.title}
+    />
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
@@ -246,16 +241,14 @@ it('calls onTabLongPress', () => {
 });
 
 it('renders non-shifting bottom navigation', () => {
-  const tree = renderer
-    .create(
-      <BottomNavigation
-        shifting={false}
-        navigationState={createState(0, 3)}
-        onIndexChange={jest.fn()}
-        renderScene={({ route }) => route.title}
-      />
-    )
-    .toJSON();
+  const tree = render(
+    <BottomNavigation
+      shifting={false}
+      navigationState={createState(0, 3)}
+      onIndexChange={jest.fn()}
+      renderScene={({ route }) => route.title}
+    />
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
@@ -280,109 +273,97 @@ it('does not crash when shifting is true and the number of tabs in the navigatio
 });
 
 it('renders custom icon and label in shifting bottom navigation', () => {
-  const tree = renderer
-    .create(
-      <BottomNavigation
-        shifting
-        navigationState={createState(0, 5)}
-        onIndexChange={jest.fn()}
-        renderScene={({ route }) => route.title}
-        renderIcon={({ route, color }) => (
-          <icon color={color} src={route.unfocusedIcon} />
-        )}
-        renderLabel={({ route, color }) => (
-          <text color={color}>{route.title}</text>
-        )}
-      />
-    )
-    .toJSON();
+  const tree = render(
+    <BottomNavigation
+      shifting
+      navigationState={createState(0, 5)}
+      onIndexChange={jest.fn()}
+      renderScene={({ route }) => route.title}
+      renderIcon={({ route, color }) => (
+        <icon color={color} src={route.unfocusedIcon} />
+      )}
+      renderLabel={({ route, color }) => (
+        <text color={color}>{route.title}</text>
+      )}
+    />
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders custom icon and label in non-shifting bottom navigation', () => {
-  const tree = renderer
-    .create(
-      <BottomNavigation
-        shifting={false}
-        navigationState={createState(0, 3)}
-        onIndexChange={jest.fn()}
-        renderScene={({ route }) => route.title}
-        renderIcon={({ route, color }) => (
-          <icon color={color} src={route.unfocusedIcon} />
-        )}
-        renderLabel={({ route, color }) => (
-          <text color={color}>{route.title}</text>
-        )}
-      />
-    )
-    .toJSON();
+  const tree = render(
+    <BottomNavigation
+      shifting={false}
+      navigationState={createState(0, 3)}
+      onIndexChange={jest.fn()}
+      renderScene={({ route }) => route.title}
+      renderIcon={({ route, color }) => (
+        <icon color={color} src={route.unfocusedIcon} />
+      )}
+      renderLabel={({ route, color }) => (
+        <text color={color}>{route.title}</text>
+      )}
+    />
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders custom icon and label with custom colors in shifting bottom navigation', () => {
-  const tree = renderer
-    .create(
-      <BottomNavigation
-        shifting
-        navigationState={createState(0, 3)}
-        onIndexChange={jest.fn()}
-        renderScene={({ route }) => route.title}
-        activeColor="#FBF7DB"
-        inactiveColor="#853D4B"
-      />
-    )
-    .toJSON();
+  const tree = render(
+    <BottomNavigation
+      shifting
+      navigationState={createState(0, 3)}
+      onIndexChange={jest.fn()}
+      renderScene={({ route }) => route.title}
+      activeColor="#FBF7DB"
+      inactiveColor="#853D4B"
+    />
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders custom icon and label with custom colors in non-shifting bottom navigation', () => {
-  const tree = renderer
-    .create(
-      <BottomNavigation
-        shifting={false}
-        navigationState={createState(0, 3)}
-        onIndexChange={jest.fn()}
-        renderScene={({ route }) => route.title}
-        activeColor="#FBF7DB"
-        inactiveColor="#853D4B"
-      />
-    )
-    .toJSON();
+  const tree = render(
+    <BottomNavigation
+      shifting={false}
+      navigationState={createState(0, 3)}
+      onIndexChange={jest.fn()}
+      renderScene={({ route }) => route.title}
+      activeColor="#FBF7DB"
+      inactiveColor="#853D4B"
+    />
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('hides labels in shifting bottom navigation', () => {
-  const tree = renderer
-    .create(
-      <BottomNavigation
-        shifting
-        labeled={false}
-        navigationState={createState(0, 3)}
-        onIndexChange={jest.fn()}
-        renderScene={({ route }) => route.title}
-      />
-    )
-    .toJSON();
+  const tree = render(
+    <BottomNavigation
+      shifting
+      labeled={false}
+      navigationState={createState(0, 3)}
+      onIndexChange={jest.fn()}
+      renderScene={({ route }) => route.title}
+    />
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('hides labels in non-shifting bottom navigation', () => {
-  const tree = renderer
-    .create(
-      <BottomNavigation
-        shifting={false}
-        labeled={false}
-        navigationState={createState(0, 3)}
-        onIndexChange={jest.fn()}
-        renderScene={({ route }) => route.title}
-      />
-    )
-    .toJSON();
+  const tree = render(
+    <BottomNavigation
+      shifting={false}
+      labeled={false}
+      navigationState={createState(0, 3)}
+      onIndexChange={jest.fn()}
+      renderScene={({ route }) => route.title}
+    />
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
@@ -644,16 +625,14 @@ it("allows customizing Route's type via generics", () => {
     ],
   };
 
-  const tree = renderer
-    .create(
-      <BottomNavigation
-        navigationState={state}
-        onIndexChange={jest.fn()}
-        getLabelText={({ route }) => route.customPropertyName}
-        renderScene={({ route }) => route.customPropertyName}
-      />
-    )
-    .toJSON();
+  const tree = render(
+    <BottomNavigation
+      navigationState={state}
+      onIndexChange={jest.fn()}
+      getLabelText={({ route }) => route.customPropertyName}
+      renderScene={({ route }) => route.customPropertyName}
+    />
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
diff --git a/src/components/__tests__/Button.test.tsx b/src/components/__tests__/Button.test.tsx
index 0ea394e055..6055addbe2 100644
--- a/src/components/__tests__/Button.test.tsx
+++ b/src/components/__tests__/Button.test.tsx
@@ -3,7 +3,6 @@ import { Animated, StyleSheet } from 'react-native';
 
 import { fireEvent, render } from '@testing-library/react-native';
 import color from 'color';
-import renderer from 'react-test-renderer';
 
 import { getTheme } from '../../core/theming';
 import { pink500, black, white } from '../../styles/themes/v2/colors';
@@ -17,113 +16,99 @@ const styles = StyleSheet.create({
 });
 
 it('renders text button by default', () => {
-  const tree = renderer.create(<Button>Text Button</Button>).toJSON();
+  const tree = render(<Button>Text Button</Button>).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders text button with mode', () => {
-  const tree = renderer
-    .create(<Button mode="text">Text Button</Button>)
-    .toJSON();
+  const tree = render(<Button mode="text">Text Button</Button>).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders outlined button with mode', () => {
-  const tree = renderer
-    .create(<Button mode="outlined">Outlined Button</Button>)
-    .toJSON();
+  const tree = render(
+    <Button mode="outlined">Outlined Button</Button>
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders contained contained with mode', () => {
-  const tree = renderer
-    .create(<Button mode="contained">Contained Button</Button>)
-    .toJSON();
+  const tree = render(
+    <Button mode="contained">Contained Button</Button>
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders button with icon', () => {
-  const tree = renderer
-    .create(<Button icon="camera">Icon Button</Button>)
-    .toJSON();
+  const tree = render(<Button icon="camera">Icon Button</Button>).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders button with icon in reverse order', () => {
-  const tree = renderer
-    .create(
-      <Button icon="chevron-right" contentStyle={styles.flexing}>
-        Right Icon
-      </Button>
-    )
-    .toJSON();
+  const tree = render(
+    <Button icon="chevron-right" contentStyle={styles.flexing}>
+      Right Icon
+    </Button>
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders loading button', () => {
-  const tree = renderer
-    .create(<Button loading>Loading Button</Button>)
-    .toJSON();
+  const tree = render(<Button loading>Loading Button</Button>).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders disabled button', () => {
-  const tree = renderer
-    .create(<Button disabled>Disabled Button</Button>)
-    .toJSON();
+  const tree = render(<Button disabled>Disabled Button</Button>).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders button with color', () => {
-  const tree = renderer
-    .create(<Button textColor={pink500}>Custom Button</Button>)
-    .toJSON();
+  const tree = render(
+    <Button textColor={pink500}>Custom Button</Button>
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders button with button color', () => {
-  const tree = renderer
-    .create(<Button buttonColor={pink500}>Custom Button</Button>)
-    .toJSON();
+  const tree = render(
+    <Button buttonColor={pink500}>Custom Button</Button>
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders button with custom testID', () => {
-  const tree = renderer
-    .create(<Button testID={'custom:testID'}>Button with custom testID</Button>)
-    .toJSON();
+  const tree = render(
+    <Button testID={'custom:testID'}>Button with custom testID</Button>
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders button with an accessibility label', () => {
-  const tree = renderer
-    .create(
-      <Button accessibilityLabel={'label'}>
-        Button with accessibility label
-      </Button>
-    )
-    .toJSON();
+  const tree = render(
+    <Button accessibilityLabel={'label'}>
+      Button with accessibility label
+    </Button>
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders button with an accessibility hint', () => {
-  const tree = renderer
-    .create(
-      <Button accessibilityHint={'hint'}>Button with accessibility hint</Button>
-    )
-    .toJSON();
+  const tree = render(
+    <Button accessibilityHint={'hint'}>Button with accessibility hint</Button>
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
diff --git a/src/components/__tests__/Card/Card.test.tsx b/src/components/__tests__/Card/Card.test.tsx
index cf4701ab12..48b298ada0 100644
--- a/src/components/__tests__/Card/Card.test.tsx
+++ b/src/components/__tests__/Card/Card.test.tsx
@@ -3,7 +3,6 @@ import { Animated, StyleSheet, Text } 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';
@@ -23,7 +22,7 @@ const styles = StyleSheet.create({
 
 describe('Card', () => {
   it('renders an outlined card', () => {
-    const tree = renderer.create(<Card mode="outlined">{null}</Card>).toJSON();
+    const tree = render(<Card mode="outlined">{null}</Card>).toJSON();
 
     expect(tree).toMatchSnapshot();
   });
diff --git a/src/components/__tests__/Checkbox/Checkbox.test.tsx b/src/components/__tests__/Checkbox/Checkbox.test.tsx
index 164175299e..efa819007e 100644
--- a/src/components/__tests__/Checkbox/Checkbox.test.tsx
+++ b/src/components/__tests__/Checkbox/Checkbox.test.tsx
@@ -1,61 +1,55 @@
 import * as React from 'react';
 
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react-native';
 
 import Checkbox from '../../Checkbox';
 
 it('renders checked Checkbox with onPress', () => {
-  const tree = renderer
-    .create(<Checkbox status="checked" onPress={() => {}} />)
-    .toJSON();
+  const tree = render(
+    <Checkbox status="checked" onPress={() => {}} />
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders unchecked Checkbox with onPress', () => {
-  const tree = renderer
-    .create(<Checkbox status="unchecked" onPress={() => {}} />)
-    .toJSON();
+  const tree = render(
+    <Checkbox status="unchecked" onPress={() => {}} />
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders indeterminate Checkbox', () => {
-  const tree = renderer
-    .create(<Checkbox status="indeterminate" onPress={() => {}} />)
-    .toJSON();
+  const tree = render(
+    <Checkbox status="indeterminate" onPress={() => {}} />
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders checked Checkbox with color', () => {
-  const tree = renderer
-    .create(<Checkbox status="checked" color="red" />)
-    .toJSON();
+  const tree = render(<Checkbox status="checked" color="red" />).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders unchecked Checkbox with color', () => {
-  const tree = renderer
-    .create(<Checkbox status="checked" color="red" />)
-    .toJSON();
+  const tree = render(<Checkbox status="checked" color="red" />).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders indeterminate Checkbox with color', () => {
-  const tree = renderer
-    .create(<Checkbox status="indeterminate" color="red" />)
-    .toJSON();
+  const tree = render(<Checkbox status="indeterminate" color="red" />).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders Checkbox with custom testID', () => {
-  const tree = renderer
-    .create(<Checkbox status="checked" testID={'custom:testID'} />)
-    .toJSON();
+  const tree = render(
+    <Checkbox status="checked" testID={'custom:testID'} />
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
diff --git a/src/components/__tests__/Checkbox/CheckboxItem.test.tsx b/src/components/__tests__/Checkbox/CheckboxItem.test.tsx
index 83d9cef391..23e247d9cc 100644
--- a/src/components/__tests__/Checkbox/CheckboxItem.test.tsx
+++ b/src/components/__tests__/Checkbox/CheckboxItem.test.tsx
@@ -2,52 +2,45 @@ import * as React from 'react';
 import { Platform } from 'react-native';
 
 import { render } from '@testing-library/react-native';
-import renderer from 'react-test-renderer';
 
 import Checkbox from '../../Checkbox';
 
 it('renders unchecked', () => {
-  const tree = renderer
-    .create(<Checkbox.Item status="unchecked" label="Unchecked Button" />)
-    .toJSON();
+  const tree = render(
+    <Checkbox.Item status="unchecked" label="Unchecked Button" />
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('can render the iOS checkbox on different platforms', () => {
   Platform.OS = 'android';
-  const tree = renderer
-    .create(
-      <Checkbox.Item status="unchecked" label="iOS Checkbox" mode="ios" />
-    )
-    .toJSON();
+  const tree = render(
+    <Checkbox.Item status="unchecked" label="iOS Checkbox" mode="ios" />
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('can render the Android checkbox on different platforms', () => {
   Platform.OS = 'ios';
-  const tree = renderer
-    .create(
-      <Checkbox.Item status="unchecked" label="iOS Checkbox" mode="android" />
-    )
-    .toJSON();
+  const tree = render(
+    <Checkbox.Item status="unchecked" label="iOS Checkbox" mode="android" />
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('can render leading checkbox control', () => {
   Platform.OS = 'ios';
-  const tree = renderer
-    .create(
-      <Checkbox.Item
-        label="Default with leading control"
-        status={'unchecked'}
-        mode="ios"
-        position="leading"
-      />
-    )
-    .toJSON();
+  const tree = render(
+    <Checkbox.Item
+      label="Default with leading control"
+      status={'unchecked'}
+      mode="ios"
+      position="leading"
+    />
+  ).toJSON();
   expect(tree).toMatchSnapshot();
 });
 
diff --git a/src/components/__tests__/Chip.test.tsx b/src/components/__tests__/Chip.test.tsx
index 73eb76d72d..e05096ce58 100644
--- a/src/components/__tests__/Chip.test.tsx
+++ b/src/components/__tests__/Chip.test.tsx
@@ -3,7 +3,6 @@ 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';
@@ -11,59 +10,49 @@ import Chip from '../Chip/Chip';
 import { getChipColors } from '../Chip/helpers';
 
 it('renders chip with onPress', () => {
-  const tree = renderer
-    .create(<Chip onPress={() => {}}>Example Chip</Chip>)
-    .toJSON();
+  const tree = render(<Chip onPress={() => {}}>Example Chip</Chip>).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders chip with icon', () => {
-  const tree = renderer
-    .create(<Chip icon="information">Example Chip</Chip>)
-    .toJSON();
+  const tree = render(<Chip icon="information">Example Chip</Chip>).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders chip with close button', () => {
-  const tree = renderer
-    .create(
-      <Chip icon="information" onClose={() => {}}>
-        Example Chip
-      </Chip>
-    )
-    .toJSON();
+  const tree = render(
+    <Chip icon="information" onClose={() => {}}>
+      Example Chip
+    </Chip>
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders chip with custom close button', () => {
-  const tree = renderer
-    .create(
-      <Chip icon="information" onClose={() => {}} closeIcon="arrow-down">
-        Example Chip
-      </Chip>
-    )
-    .toJSON();
+  const tree = render(
+    <Chip icon="information" onClose={() => {}} closeIcon="arrow-down">
+      Example Chip
+    </Chip>
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders outlined disabled chip', () => {
-  const tree = renderer
-    .create(
-      <Chip mode="outlined" disabled>
-        Example Chip
-      </Chip>
-    )
-    .toJSON();
+  const tree = render(
+    <Chip mode="outlined" disabled>
+      Example Chip
+    </Chip>
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders selected chip', () => {
-  const tree = renderer.create(<Chip selected>Example Chip</Chip>).toJSON();
+  const tree = render(<Chip selected>Example Chip</Chip>).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
diff --git a/src/components/__tests__/DataTable.test.tsx b/src/components/__tests__/DataTable.test.tsx
index 41a60b9693..a2c7866c6b 100644
--- a/src/components/__tests__/DataTable.test.tsx
+++ b/src/components/__tests__/DataTable.test.tsx
@@ -1,94 +1,75 @@
 import * as React from 'react';
 
 import { render } from '@testing-library/react-native';
-import renderer from 'react-test-renderer';
 
 import DataTable from '../DataTable/DataTable';
 
 it('renders data table header', () => {
-  const tree = renderer
-    .create(
-      <DataTable.Header>
-        <DataTable.Title>Dessert</DataTable.Title>
-        <DataTable.Title>Calories</DataTable.Title>
-      </DataTable.Header>
-    )
-    .toJSON();
+  const tree = render(
+    <DataTable.Header>
+      <DataTable.Title>Dessert</DataTable.Title>
+      <DataTable.Title>Calories</DataTable.Title>
+    </DataTable.Header>
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders data table title with sort icon', () => {
-  const tree = renderer
-    .create(
-      <DataTable.Title sortDirection="descending">Dessert</DataTable.Title>
-    )
-    .toJSON();
+  const tree = render(
+    <DataTable.Title sortDirection="descending">Dessert</DataTable.Title>
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders right aligned data table title', () => {
-  const tree = renderer
-    .create(<DataTable.Title numeric>Calories</DataTable.Title>)
-    .toJSON();
+  const tree = render(
+    <DataTable.Title numeric>Calories</DataTable.Title>
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders data table title with press handler', () => {
-  const tree = renderer
-    .create(
-      <DataTable.Title sortDirection="descending" onPress={() => {}}>
-        Dessert
-      </DataTable.Title>
-    )
-    .toJSON();
+  const tree = render(
+    <DataTable.Title sortDirection="descending" onPress={() => {}}>
+      Dessert
+    </DataTable.Title>
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders data table cell', () => {
-  const tree = renderer
-    .create(<DataTable.Cell>Cupcake</DataTable.Cell>)
-    .toJSON();
+  const tree = render(<DataTable.Cell>Cupcake</DataTable.Cell>).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders right aligned data table cell', () => {
-  const tree = renderer
-    .create(<DataTable.Cell numeric>356</DataTable.Cell>)
-    .toJSON();
+  const tree = render(<DataTable.Cell numeric>356</DataTable.Cell>).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders data table pagination', () => {
-  const tree = renderer
-    .create(
-      <DataTable.Pagination
-        page={3}
-        numberOfPages={15}
-        onPageChange={() => {}}
-      />
-    )
-    .toJSON();
+  const tree = render(
+    <DataTable.Pagination page={3} numberOfPages={15} onPageChange={() => {}} />
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders data table pagination with label', () => {
-  const tree = renderer
-    .create(
-      <DataTable.Pagination
-        page={3}
-        numberOfPages={15}
-        onPageChange={() => {}}
-        label="11-20 of 150"
-      />
-    )
-    .toJSON();
+  const tree = render(
+    <DataTable.Pagination
+      page={3}
+      numberOfPages={15}
+      onPageChange={() => {}}
+      label="11-20 of 150"
+    />
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
diff --git a/src/components/__tests__/Drawer/DrawerSection.test.tsx b/src/components/__tests__/Drawer/DrawerSection.test.tsx
index 333cb30b88..e74cf362c6 100644
--- a/src/components/__tests__/Drawer/DrawerSection.test.tsx
+++ b/src/components/__tests__/Drawer/DrawerSection.test.tsx
@@ -1,19 +1,17 @@
 import React from 'react';
 import { View } from 'react-native';
 
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react-native';
 
 import DrawerSection from '../../Drawer/DrawerSection';
 
 describe('DrawerSection', () => {
   it('renders properly', () => {
-    const tree = renderer
-      .create(
-        <DrawerSection>
-          <View />
-        </DrawerSection>
-      )
-      .toJSON();
+    const tree = render(
+      <DrawerSection>
+        <View />
+      </DrawerSection>
+    ).toJSON();
 
     expect(tree).toMatchSnapshot();
   });
diff --git a/src/components/__tests__/DrawerItem.test.tsx b/src/components/__tests__/DrawerItem.test.tsx
index d558aac5b4..ec4a36efcb 100644
--- a/src/components/__tests__/DrawerItem.test.tsx
+++ b/src/components/__tests__/DrawerItem.test.tsx
@@ -1,29 +1,29 @@
 import * as React from 'react';
 
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react-native';
 
 import DrawerItem from '../Drawer/DrawerItem';
 
 it('renders basic DrawerItem', () => {
-  const tree = renderer
-    .create(<DrawerItem onPress={() => {}} label="Example item" />)
-    .toJSON();
+  const tree = render(
+    <DrawerItem onPress={() => {}} label="Example item" />
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders DrawerItem with icon', () => {
-  const tree = renderer
-    .create(<DrawerItem icon="information" label="Example item" />)
-    .toJSON();
+  const tree = render(
+    <DrawerItem icon="information" label="Example item" />
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders active DrawerItem', () => {
-  const tree = renderer
-    .create(<DrawerItem icon="information" active label="Example item" />)
-    .toJSON();
+  const tree = render(
+    <DrawerItem icon="information" active label="Example item" />
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
diff --git a/src/components/__tests__/FAB.test.tsx b/src/components/__tests__/FAB.test.tsx
index 32d1e46684..8e8dcb644d 100644
--- a/src/components/__tests__/FAB.test.tsx
+++ b/src/components/__tests__/FAB.test.tsx
@@ -3,7 +3,6 @@ import { Animated, StyleSheet } 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';
@@ -33,98 +32,90 @@ const styles = StyleSheet.create({
 });
 
 it('renders default FAB', () => {
-  const tree = renderer.create(<FAB onPress={() => {}} icon="plus" />).toJSON();
+  const tree = render(<FAB onPress={() => {}} icon="plus" />).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders small FAB', () => {
-  const tree = renderer
-    .create(<FAB size="small" onPress={() => {}} icon="plus" />)
-    .toJSON();
+  const tree = render(
+    <FAB size="small" onPress={() => {}} icon="plus" />
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders large FAB', () => {
-  const tree = renderer
-    .create(<FAB size="large" onPress={() => {}} icon="plus" />)
-    .toJSON();
+  const tree = render(
+    <FAB size="large" onPress={() => {}} icon="plus" />
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders FAB with custom size prop', () => {
-  const tree = renderer
-    .create(<FAB customSize={100} onPress={() => {}} icon="plus" />)
-    .toJSON();
+  const tree = render(
+    <FAB customSize={100} onPress={() => {}} icon="plus" />
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders extended FAB', () => {
-  const tree = renderer
-    .create(<FAB onPress={() => {}} icon="plus" label="Add items" />)
-    .toJSON();
+  const tree = render(
+    <FAB onPress={() => {}} icon="plus" label="Add items" />
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders extended FAB with custom size prop', () => {
-  const tree = renderer
-    .create(
-      <FAB customSize={100} onPress={() => {}} icon="plus" label="Add items" />
-    )
-    .toJSON();
+  const tree = render(
+    <FAB customSize={100} onPress={() => {}} icon="plus" label="Add items" />
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders loading FAB', () => {
-  const tree = renderer
-    .create(<FAB onPress={() => {}} icon="plus" loading={true} />)
-    .toJSON();
+  const tree = render(
+    <FAB onPress={() => {}} icon="plus" loading={true} />
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders loading FAB with custom size prop', () => {
-  const tree = renderer
-    .create(
-      <FAB customSize={100} onPress={() => {}} icon="plus" loading={true} />
-    )
-    .toJSON();
+  const tree = render(
+    <FAB customSize={100} onPress={() => {}} icon="plus" loading={true} />
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders disabled FAB', () => {
-  const tree = renderer
-    .create(<FAB onPress={() => {}} icon="plus" disabled />)
-    .toJSON();
+  const tree = render(<FAB onPress={() => {}} icon="plus" disabled />).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders custom color for the icon and label of the FAB', () => {
-  const tree = renderer
-    .create(<FAB onPress={() => {}} icon="plus" color="#AA0114" />)
-    .toJSON();
+  const tree = render(
+    <FAB onPress={() => {}} icon="plus" color="#AA0114" />
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders not visible FAB', () => {
-  const { update, toJSON } = renderer.create(
-    <FAB onPress={() => {}} icon="plus" />
-  );
+  const { update, toJSON } = render(<FAB onPress={() => {}} icon="plus" />);
   update(<FAB onPress={() => {}} icon="plus" visible={false} />);
 
   expect(toJSON()).toMatchSnapshot();
 });
 
 it('renders visible FAB', () => {
-  const { update, toJSON } = renderer.create(
+  const { update, toJSON } = render(
     <FAB onPress={() => {}} icon="plus" visible={false} />
   );
 
diff --git a/src/components/__tests__/IconButton.test.tsx b/src/components/__tests__/IconButton.test.tsx
index bf9fa54e97..b846041616 100644
--- a/src/components/__tests__/IconButton.test.tsx
+++ b/src/components/__tests__/IconButton.test.tsx
@@ -3,7 +3,6 @@ import { Animated, StyleSheet } 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 { pink500 } from '../../styles/themes/v2/colors';
@@ -17,33 +16,33 @@ const styles = StyleSheet.create({
 });
 
 it('renders icon button by default', () => {
-  const tree = renderer.create(<IconButton icon="camera" />).toJSON();
+  const tree = render(<IconButton icon="camera" />).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders icon button with color', () => {
-  const tree = renderer
-    .create(<IconButton icon="camera" iconColor={pink500} />)
-    .toJSON();
+  const tree = render(
+    <IconButton icon="camera" iconColor={pink500} />
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders icon button with size', () => {
-  const tree = renderer.create(<IconButton icon="camera" size={30} />).toJSON();
+  const tree = render(<IconButton icon="camera" size={30} />).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders disabled icon button', () => {
-  const tree = renderer.create(<IconButton icon="camera" disabled />).toJSON();
+  const tree = render(<IconButton icon="camera" disabled />).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders icon change animated', () => {
-  const tree = renderer.create(<IconButton icon="camera" animated />).toJSON();
+  const tree = render(<IconButton icon="camera" animated />).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
diff --git a/src/components/__tests__/ListAccordion.test.tsx b/src/components/__tests__/ListAccordion.test.tsx
index 2ec12dfc2a..c9fe8d6d10 100644
--- a/src/components/__tests__/ListAccordion.test.tsx
+++ b/src/components/__tests__/ListAccordion.test.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { StyleSheet } 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 { red500 } from '../../styles/themes/v2/colors';
@@ -18,78 +18,68 @@ const styles = StyleSheet.create({
 });
 
 it('renders list accordion with children', () => {
-  const tree = renderer
-    .create(
-      <ListAccordion
-        left={(props) => <ListIcon {...props} icon="folder" />}
-        title="Expandable list item"
-      >
-        <ListItem title="First Item" />
-      </ListAccordion>
-    )
-    .toJSON();
+  const tree = render(
+    <ListAccordion
+      left={(props) => <ListIcon {...props} icon="folder" />}
+      title="Expandable list item"
+    >
+      <ListItem title="First Item" />
+    </ListAccordion>
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders multiline list accordion', () => {
-  const tree = renderer
-    .create(
-      <ListAccordion
-        title="Expandable list item"
-        description="Describes the expandable list item"
-      >
-        <ListItem title="List item 1" />
-      </ListAccordion>
-    )
-    .toJSON();
+  const tree = render(
+    <ListAccordion
+      title="Expandable list item"
+      description="Describes the expandable list item"
+    >
+      <ListItem title="List item 1" />
+    </ListAccordion>
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders list accordion with left items', () => {
-  const tree = renderer
-    .create(
-      <ListAccordion
-        left={(props) => <ListIcon {...props} icon="star" />}
-        title="Accordion item 1"
-      >
-        <ListItem
-          left={(props) => <ListIcon {...props} icon="thumb-up" />}
-          title="List item 1"
-        />
-      </ListAccordion>
-    )
-    .toJSON();
+  const tree = render(
+    <ListAccordion
+      left={(props) => <ListIcon {...props} icon="star" />}
+      title="Accordion item 1"
+    >
+      <ListItem
+        left={(props) => <ListIcon {...props} icon="thumb-up" />}
+        title="List item 1"
+      />
+    </ListAccordion>
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders expanded accordion', () => {
-  const tree = renderer
-    .create(
-      <ListAccordion title="Accordion item 1" expanded>
-        <ListItem title="List item 1" />
-      </ListAccordion>
-    )
-    .toJSON();
+  const tree = render(
+    <ListAccordion title="Accordion item 1" expanded>
+      <ListItem title="List item 1" />
+    </ListAccordion>
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders list accordion with custom title and description styles', () => {
-  const tree = renderer
-    .create(
-      <ListAccordion
-        title="Accordion item 1"
-        description="Describes the expandable list item"
-        titleStyle={styles.coloring}
-        descriptionStyle={styles.coloring}
-      >
-        <ListItem title="List item 1" />
-      </ListAccordion>
-    )
-    .toJSON();
+  const tree = render(
+    <ListAccordion
+      title="Accordion item 1"
+      description="Describes the expandable list item"
+      titleStyle={styles.coloring}
+      descriptionStyle={styles.coloring}
+    >
+      <ListItem title="List item 1" />
+    </ListAccordion>
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
diff --git a/src/components/__tests__/ListItem.test.tsx b/src/components/__tests__/ListItem.test.tsx
index 118c3a7ee9..5f09c6658d 100644
--- a/src/components/__tests__/ListItem.test.tsx
+++ b/src/components/__tests__/ListItem.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { StyleSheet } from 'react-native';
 import { Text, View } from 'react-native';
 
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react-native';
 
 import { red500 } from '../../styles/themes/v2/colors';
 import Chip from '../Chip/Chip';
@@ -19,106 +19,94 @@ const styles = StyleSheet.create({
 });
 
 it('renders list item with title and description', () => {
-  const tree = renderer
-    .create(
-      <ListItem title="First Item" description="Description for first item" />
-    )
-    .toJSON();
+  const tree = render(
+    <ListItem title="First Item" description="Description for first item" />
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders list item with left item', () => {
-  const tree = renderer
-    .create(
-      <ListItem
-        title="First Item"
-        left={(props) => <ListIcon {...props} icon="folder" />}
-      />
-    )
-    .toJSON();
+  const tree = render(
+    <ListItem
+      title="First Item"
+      left={(props) => <ListIcon {...props} icon="folder" />}
+    />
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders list item with right item', () => {
-  const tree = renderer
-    .create(<ListItem title="First Item" right={() => <Text>GG</Text>} />)
-    .toJSON();
+  const tree = render(
+    <ListItem title="First Item" right={() => <Text>GG</Text>} />
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders list item with left and right items', () => {
-  const tree = renderer
-    .create(
-      <ListItem
-        title="First Item"
-        description="Item description"
-        left={() => <Text>GG</Text>}
-        right={(props) => <ListIcon {...props} icon="folder" />}
-      />
-    )
-    .toJSON();
+  const tree = render(
+    <ListItem
+      title="First Item"
+      description="Item description"
+      left={() => <Text>GG</Text>}
+      right={(props) => <ListIcon {...props} icon="folder" />}
+    />
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders list item with custom title and description styles', () => {
-  const tree = renderer
-    .create(
-      <ListItem
-        title="First Item"
-        description="Item description"
-        titleStyle={styles.title}
-        descriptionStyle={styles.description}
-      />
-    )
-    .toJSON();
+  const tree = render(
+    <ListItem
+      title="First Item"
+      description="Item description"
+      titleStyle={styles.title}
+      descriptionStyle={styles.description}
+    />
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders list item with custom description', () => {
-  const tree = renderer
-    .create(
-      <ListItem
-        title="List Item with custom description"
-        description={({ ellipsizeMode, color: descriptionColor, fontSize }) => (
+  const tree = render(
+    <ListItem
+      title="List Item with custom description"
+      description={({ ellipsizeMode, color: descriptionColor, fontSize }) => (
+        <View>
+          <Text
+            numberOfLines={2}
+            ellipsizeMode={ellipsizeMode}
+            style={{ color: descriptionColor, fontSize }}
+          >
+            React Native Paper is a high-quality, standard-compliant Design
+            Design library that has you covered in all major use-cases.
+          </Text>
           <View>
-            <Text
-              numberOfLines={2}
-              ellipsizeMode={ellipsizeMode}
-              style={{ color: descriptionColor, fontSize }}
-            >
-              React Native Paper is a high-quality, standard-compliant Design
-              Design library that has you covered in all major use-cases.
-            </Text>
-            <View>
-              <Chip icon="file-pdf-box" onPress={() => {}}>
-                DOCS.pdf
-              </Chip>
-            </View>
+            <Chip icon="file-pdf-box" onPress={() => {}}>
+              DOCS.pdf
+            </Chip>
           </View>
-        )}
-      />
-    )
-    .toJSON();
+        </View>
+      )}
+    />
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders with a description with typeof number', () => {
-  const tree = renderer
-    .create(
-      <ListItem
-        title="First Item"
-        description={123}
-        titleStyle={styles.title}
-        descriptionStyle={styles.description}
-      />
-    )
-    .toJSON();
+  const tree = render(
+    <ListItem
+      title="First Item"
+      description={123}
+      titleStyle={styles.title}
+      descriptionStyle={styles.description}
+    />
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
diff --git a/src/components/__tests__/ListSection.test.tsx b/src/components/__tests__/ListSection.test.tsx
index 1da417d8ac..7e90e791af 100644
--- a/src/components/__tests__/ListSection.test.tsx
+++ b/src/components/__tests__/ListSection.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { StyleSheet } from 'react-native';
 
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react-native';
 
 import { red500 } from '../../styles/themes/v2/colors';
 import ListIcon from '../List/ListIcon';
@@ -16,59 +16,53 @@ const styles = StyleSheet.create({
 });
 
 it('renders list section without subheader', () => {
-  const tree = renderer
-    .create(
-      <ListSection>
-        <ListItem
-          title="First Item"
-          left={(props) => <ListIcon {...props} icon="folder" />}
-        />
-        <ListItem
-          title="Second Item"
-          left={(props) => <ListIcon {...props} icon="folder" />}
-        />
-      </ListSection>
-    )
-    .toJSON();
+  const tree = render(
+    <ListSection>
+      <ListItem
+        title="First Item"
+        left={(props) => <ListIcon {...props} icon="folder" />}
+      />
+      <ListItem
+        title="Second Item"
+        left={(props) => <ListIcon {...props} icon="folder" />}
+      />
+    </ListSection>
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders list section with subheader', () => {
-  const tree = renderer
-    .create(
-      <ListSection>
-        <ListSubheader>Some title</ListSubheader>
-        <ListItem
-          title="First Item"
-          left={(props) => <ListIcon {...props} icon="folder" />}
-        />
-        <ListItem
-          title="Second Item"
-          left={(props) => <ListIcon {...props} icon="folder" />}
-        />
-      </ListSection>
-    )
-    .toJSON();
+  const tree = render(
+    <ListSection>
+      <ListSubheader>Some title</ListSubheader>
+      <ListItem
+        title="First Item"
+        left={(props) => <ListIcon {...props} icon="folder" />}
+      />
+      <ListItem
+        title="Second Item"
+        left={(props) => <ListIcon {...props} icon="folder" />}
+      />
+    </ListSection>
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders list section with custom title style', () => {
-  const tree = renderer
-    .create(
-      <ListSection title="Some title" titleStyle={styles.itemColor}>
-        <ListItem
-          title="First Item"
-          left={(props) => <ListIcon {...props} icon="folder" />}
-        />
-        <ListItem
-          title="Second Item"
-          left={(props) => <ListIcon {...props} icon="folder" />}
-        />
-      </ListSection>
-    )
-    .toJSON();
+  const tree = render(
+    <ListSection title="Some title" titleStyle={styles.itemColor}>
+      <ListItem
+        title="First Item"
+        left={(props) => <ListIcon {...props} icon="folder" />}
+      />
+      <ListItem
+        title="Second Item"
+        left={(props) => <ListIcon {...props} icon="folder" />}
+      />
+    </ListSection>
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
diff --git a/src/components/__tests__/Menu.test.tsx b/src/components/__tests__/Menu.test.tsx
index 116a2386df..b27027b0fc 100644
--- a/src/components/__tests__/Menu.test.tsx
+++ b/src/components/__tests__/Menu.test.tsx
@@ -1,8 +1,7 @@
 import * as React from 'react';
 import { Animated, StyleSheet, View } from 'react-native';
 
-import { render, waitFor } from '@testing-library/react-native';
-import renderer from 'react-test-renderer';
+import { render, waitFor, screen } from '@testing-library/react-native';
 
 import Button from '../Button/Button';
 import Menu from '../Menu/Menu';
@@ -16,59 +15,53 @@ const styles = StyleSheet.create({
 });
 
 it('renders visible menu', () => {
-  const tree = renderer
-    .create(
-      <Portal.Host>
-        <Menu
-          visible
-          onDismiss={jest.fn()}
-          anchor={<Button mode="outlined">Open menu</Button>}
-        >
-          <Menu.Item onPress={jest.fn()} title="Undo" />
-          <Menu.Item onPress={jest.fn()} title="Redo" />
-        </Menu>
-      </Portal.Host>
-    )
-    .toJSON();
+  const tree = render(
+    <Portal.Host>
+      <Menu
+        visible
+        onDismiss={jest.fn()}
+        anchor={<Button mode="outlined">Open menu</Button>}
+      >
+        <Menu.Item onPress={jest.fn()} title="Undo" />
+        <Menu.Item onPress={jest.fn()} title="Redo" />
+      </Menu>
+    </Portal.Host>
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders not visible menu', () => {
-  const tree = renderer
-    .create(
-      <Portal.Host>
-        <Menu
-          visible={false}
-          onDismiss={jest.fn()}
-          anchor={<Button mode="outlined">Open menu</Button>}
-        >
-          <Menu.Item onPress={jest.fn()} title="Undo" />
-          <Menu.Item onPress={jest.fn()} title="Redo" />
-        </Menu>
-      </Portal.Host>
-    )
-    .toJSON();
+  const tree = render(
+    <Portal.Host>
+      <Menu
+        visible={false}
+        onDismiss={jest.fn()}
+        anchor={<Button mode="outlined">Open menu</Button>}
+      >
+        <Menu.Item onPress={jest.fn()} title="Undo" />
+        <Menu.Item onPress={jest.fn()} title="Redo" />
+      </Menu>
+    </Portal.Host>
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders menu with content styles', () => {
-  const tree = renderer
-    .create(
-      <Portal.Host>
-        <Menu
-          visible
-          onDismiss={jest.fn()}
-          anchor={<Button mode="outlined">Open menu</Button>}
-          contentStyle={styles.contentStyle}
-        >
-          <Menu.Item onPress={jest.fn()} title="Undo" />
-          <Menu.Item onPress={jest.fn()} title="Redo" />
-        </Menu>
-      </Portal.Host>
-    )
-    .toJSON();
+  const tree = render(
+    <Portal.Host>
+      <Menu
+        visible
+        onDismiss={jest.fn()}
+        anchor={<Button mode="outlined">Open menu</Button>}
+        contentStyle={styles.contentStyle}
+      >
+        <Menu.Item onPress={jest.fn()} title="Undo" />
+        <Menu.Item onPress={jest.fn()} title="Redo" />
+      </Menu>
+    </Portal.Host>
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
@@ -94,7 +87,7 @@ it('uses the default anchorPosition of top', async () => {
     );
   }
 
-  const tree = renderer.create(makeMenu(false));
+  render(makeMenu(false));
 
   jest
     .spyOn(View.prototype, 'measureInWindow')
@@ -104,22 +97,15 @@ it('uses the default anchorPosition of top', async () => {
   // componentDidUpdate isn't called by default in jest. Forcing the update
   // than triggers measureInWindow, which is how Menu decides where to show
   // itself.
-  tree.update(makeMenu(true));
+  screen.update(makeMenu(true));
 
-  // If someone has a better way to verify the location of a child on the
-  // screen, please by all means let me know.
   await waitFor(() => {
-    const menu = tree.root.findByProps({ accessibilityViewIsModal: true });
-    expect(menu).toHaveProperty('_fiber.pendingProps.style', [
-      {
-        position: 'absolute',
-      },
-      {
-        left: 100,
-        top: 100,
-      },
-      undefined,
-    ]);
+    const menu = screen.getByTestId('menu-view');
+    expect(menu).toHaveStyle({
+      position: 'absolute',
+      left: 100,
+      top: 100,
+    });
   });
 });
 
@@ -145,27 +131,21 @@ it('respects anchorPosition bottom', async () => {
     );
   }
 
-  const tree = renderer.create(makeMenu(false));
+  render(makeMenu(false));
 
   jest
     .spyOn(View.prototype, 'measureInWindow')
     .mockImplementation((fn) => fn(100, 100, 80, 32));
 
-  // See note from previous test about this update.
-  tree.update(makeMenu(true));
+  screen.update(makeMenu(true));
 
   await waitFor(() => {
-    const menu = tree.root.findByProps({ accessibilityViewIsModal: true });
-    expect(menu).toHaveProperty('_fiber.pendingProps.style', [
-      {
-        position: 'absolute',
-      },
-      {
-        left: 100,
-        top: 132,
-      },
-      undefined,
-    ]);
+    const menu = screen.getByTestId('menu-view');
+    expect(menu).toHaveStyle({
+      position: 'absolute',
+      left: 100,
+      top: 132,
+    });
   });
 });
 
diff --git a/src/components/__tests__/MenuItem.test.tsx b/src/components/__tests__/MenuItem.test.tsx
index ec0fecc90e..f9121da469 100644
--- a/src/components/__tests__/MenuItem.test.tsx
+++ b/src/components/__tests__/MenuItem.test.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
 
 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';
@@ -11,27 +10,25 @@ import { getMenuItemColor } from '../Menu/utils';
 
 describe('Menu Item', () => {
   it('renders menu item', () => {
-    const tree = renderer
-      .create(
-        <>
-          <Menu.Item leadingIcon="redo" onPress={() => {}} title="Redo" />
-          <Menu.Item leadingIcon="undo" onPress={() => {}} title="Undo" />
-          <Menu.Item
-            leadingIcon="content-cut"
-            onPress={() => {}}
-            title="Cut"
-            disabled
-          />
-          <Menu.Item
-            leadingIcon="content-copy"
-            onPress={() => {}}
-            title="Copy"
-            disabled
-          />
-          <Menu.Item onPress={() => {}} title="Paste" />
-        </>
-      )
-      .toJSON();
+    const tree = render(
+      <>
+        <Menu.Item leadingIcon="redo" onPress={() => {}} title="Redo" />
+        <Menu.Item leadingIcon="undo" onPress={() => {}} title="Undo" />
+        <Menu.Item
+          leadingIcon="content-cut"
+          onPress={() => {}}
+          title="Cut"
+          disabled
+        />
+        <Menu.Item
+          leadingIcon="content-copy"
+          onPress={() => {}}
+          title="Copy"
+          disabled
+        />
+        <Menu.Item onPress={() => {}} title="Paste" />
+      </>
+    ).toJSON();
 
     expect(tree).toMatchSnapshot();
   });
diff --git a/src/components/__tests__/RadioButton/RadioButton.test.tsx b/src/components/__tests__/RadioButton/RadioButton.test.tsx
index e28362a62b..ecba6bf851 100644
--- a/src/components/__tests__/RadioButton/RadioButton.test.tsx
+++ b/src/components/__tests__/RadioButton/RadioButton.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react-native';
 
 import RadioButton from '../../RadioButton';
 import { RadioButtonContext } from '../../RadioButton/RadioButtonGroup';
@@ -20,7 +20,7 @@ describe('RadioButton', () => {
     });
 
     it('renders properly', () => {
-      const tree = renderer.create(<RadioButton value="first" />).toJSON();
+      const tree = render(<RadioButton value="first" />).toJSON();
 
       expect(tree).toMatchSnapshot();
     });
@@ -40,7 +40,7 @@ describe('RadioButton', () => {
     });
 
     it('renders properly', () => {
-      const tree = renderer.create(<RadioButton value="first" />).toJSON();
+      const tree = render(<RadioButton value="first" />).toJSON();
 
       expect(tree).toMatchSnapshot();
     });
@@ -48,15 +48,13 @@ describe('RadioButton', () => {
 
   describe('when RadioButton is wrapped by RadioButtonContext.Provider', () => {
     it('renders properly', () => {
-      const tree = renderer
-        .create(
-          <RadioButtonContext.Provider
-            value={{ value: 'first', onValueChange: () => {} }}
-          >
-            <RadioButton value="first" />
-          </RadioButtonContext.Provider>
-        )
-        .toJSON();
+      const tree = render(
+        <RadioButtonContext.Provider
+          value={{ value: 'first', onValueChange: () => {} }}
+        >
+          <RadioButton value="first" />
+        </RadioButtonContext.Provider>
+      ).toJSON();
 
       expect(tree).toMatchSnapshot();
     });
@@ -64,9 +62,9 @@ describe('RadioButton', () => {
 
   describe('RadioButton with custom testID', () => {
     it('renders properly', () => {
-      const tree = renderer
-        .create(<RadioButton value="first" testID={'custom:testID'} />)
-        .toJSON();
+      const tree = render(
+        <RadioButton value="first" testID={'custom:testID'} />
+      ).toJSON();
 
       expect(tree).toMatchSnapshot();
     });
diff --git a/src/components/__tests__/RadioButton/RadioButtonGroup.test.tsx b/src/components/__tests__/RadioButton/RadioButtonGroup.test.tsx
index 34bdd5abb7..2b431102cb 100644
--- a/src/components/__tests__/RadioButton/RadioButtonGroup.test.tsx
+++ b/src/components/__tests__/RadioButton/RadioButtonGroup.test.tsx
@@ -1,18 +1,16 @@
 import React from 'react';
 
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react-native';
 
 import RadioButton from '../../RadioButton';
 
 describe('RadioButtonGroup', () => {
   it('renders properly', () => {
-    const tree = renderer
-      .create(
-        <RadioButton.Group value="first" onValueChange={() => {}}>
-          <RadioButton value="first" />
-        </RadioButton.Group>
-      )
-      .toJSON();
+    const tree = render(
+      <RadioButton.Group value="first" onValueChange={() => {}}>
+        <RadioButton value="first" />
+      </RadioButton.Group>
+    ).toJSON();
 
     expect(tree).toMatchSnapshot();
   });
diff --git a/src/components/__tests__/RadioButton/RadioButtonItem.test.tsx b/src/components/__tests__/RadioButton/RadioButtonItem.test.tsx
index a2678cd775..ed790d0256 100644
--- a/src/components/__tests__/RadioButton/RadioButtonItem.test.tsx
+++ b/src/components/__tests__/RadioButton/RadioButtonItem.test.tsx
@@ -1,68 +1,60 @@
 import * as React from 'react';
 import { Platform } from 'react-native';
 
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react-native';
 
 import RadioButton from '../../RadioButton';
 
 it('renders unchecked', () => {
-  const tree = renderer
-    .create(
-      <RadioButton.Item
-        status="unchecked"
-        label="Unchecked Button"
-        value="unchecked"
-      />
-    )
-    .toJSON();
+  const tree = render(
+    <RadioButton.Item
+      status="unchecked"
+      label="Unchecked Button"
+      value="unchecked"
+    />
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('can render the iOS radio button on different platforms', () => {
   Platform.OS = 'android';
-  const tree = renderer
-    .create(
-      <RadioButton.Item
-        status="unchecked"
-        label="iOS Radio button"
-        mode="ios"
-        value="ios"
-      />
-    )
-    .toJSON();
+  const tree = render(
+    <RadioButton.Item
+      status="unchecked"
+      label="iOS Radio button"
+      mode="ios"
+      value="ios"
+    />
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('can render the Android radio button on different platforms', () => {
   Platform.OS = 'ios';
-  const tree = renderer
-    .create(
-      <RadioButton.Item
-        status="unchecked"
-        label="iOS Checkbox"
-        mode="android"
-        value="android"
-      />
-    )
-    .toJSON();
+  const tree = render(
+    <RadioButton.Item
+      status="unchecked"
+      label="iOS Checkbox"
+      mode="android"
+      value="android"
+    />
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('can render leading radio button control', () => {
   Platform.OS = 'ios';
-  const tree = renderer
-    .create(
-      <RadioButton.Item
-        label="Default with leading control"
-        status={'unchecked'}
-        value="iOS"
-        position="leading"
-      />
-    )
-    .toJSON();
+  const tree = render(
+    <RadioButton.Item
+      label="Default with leading control"
+      status={'unchecked'}
+      value="iOS"
+      position="leading"
+    />
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
diff --git a/src/components/__tests__/Searchbar.test.tsx b/src/components/__tests__/Searchbar.test.tsx
index fffd1032c5..a9bf8ce6e1 100644
--- a/src/components/__tests__/Searchbar.test.tsx
+++ b/src/components/__tests__/Searchbar.test.tsx
@@ -2,29 +2,26 @@ import * as React from 'react';
 import { Animated } from 'react-native';
 
 import { fireEvent, render } from '@testing-library/react-native';
-import renderer from 'react-test-renderer';
 
 import * as Avatar from '../Avatar/Avatar';
 import Searchbar from '../Searchbar';
 
 it('renders with placeholder', () => {
-  const tree = renderer
-    .create(<Searchbar placeholder="Search" value="" />)
-    .toJSON();
+  const tree = render(<Searchbar placeholder="Search" value="" />).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders with text', () => {
-  const tree = renderer
-    .create(<Searchbar placeholder="Search" value="query" />)
-    .toJSON();
+  const tree = render(
+    <Searchbar placeholder="Search" value="query" />
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('activity indicator snapshot test', () => {
-  const tree = renderer.create(<Searchbar loading={true} value="" />).toJSON();
+  const tree = render(<Searchbar loading={true} value="" />).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
diff --git a/src/components/__tests__/SegmentedButton.test.tsx b/src/components/__tests__/SegmentedButton.test.tsx
index 2a3f169c7b..2e96e7bdb9 100644
--- a/src/components/__tests__/SegmentedButton.test.tsx
+++ b/src/components/__tests__/SegmentedButton.test.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
 
 import { render } from '@testing-library/react-native';
 import color from 'color';
-import renderer from 'react-test-renderer';
 
 import { getTheme } from '../../core/theming';
 import { black } from '../../styles/themes/v2/colors';
@@ -13,46 +12,40 @@ import {
 } from '../SegmentedButtons/utils';
 
 it('renders segmented button', () => {
-  const tree = renderer
-    .create(
-      <SegmentedButtons
-        onValueChange={() => {}}
-        value={'walk'}
-        buttons={[{ value: 'walk' }, { value: 'ride' }]}
-      />
-    )
-    .toJSON();
+  const tree = render(
+    <SegmentedButtons
+      onValueChange={() => {}}
+      value={'walk'}
+      buttons={[{ value: 'walk' }, { value: 'ride' }]}
+    />
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders disabled segmented button', () => {
-  const tree = renderer
-    .create(
-      <SegmentedButtons
-        onValueChange={() => {}}
-        value={'walk'}
-        buttons={[{ value: 'walk' }, { value: 'ride', disabled: true }]}
-      />
-    )
-    .toJSON();
+  const tree = render(
+    <SegmentedButtons
+      onValueChange={() => {}}
+      value={'walk'}
+      buttons={[{ value: 'walk' }, { value: 'ride', disabled: true }]}
+    />
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders checked segmented button with selected check', () => {
-  const tree = renderer
-    .create(
-      <SegmentedButtons
-        onValueChange={() => {}}
-        value={'walk'}
-        buttons={[
-          { value: 'walk', showSelectedCheck: true },
-          { value: 'ride', disabled: true },
-        ]}
-      />
-    )
-    .toJSON();
+  const tree = render(
+    <SegmentedButtons
+      onValueChange={() => {}}
+      value={'walk'}
+      buttons={[
+        { value: 'walk', showSelectedCheck: true },
+        { value: 'ride', disabled: true },
+      ]}
+    />
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
diff --git a/src/components/__tests__/Snackbar.test.tsx b/src/components/__tests__/Snackbar.test.tsx
index 41aec30f77..b9fcb31da4 100644
--- a/src/components/__tests__/Snackbar.test.tsx
+++ b/src/components/__tests__/Snackbar.test.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
 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';
@@ -47,71 +46,61 @@ jest.mock('react-native-safe-area-context', () => ({
 }));
 
 it('renders snackbar with content', () => {
-  const tree = renderer
-    .create(
-      <Snackbar visible onDismiss={jest.fn()}>
-        Snackbar content
-      </Snackbar>
-    )
-    .toJSON();
+  const tree = render(
+    <Snackbar visible onDismiss={jest.fn()}>
+      Snackbar content
+    </Snackbar>
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders not visible snackbar with content wrapper but no actual content', () => {
-  const tree = renderer
-    .create(
-      <Snackbar visible={false} onDismiss={jest.fn()}>
-        Snackbar content
-      </Snackbar>
-    )
-    .toJSON();
+  const tree = render(
+    <Snackbar visible={false} onDismiss={jest.fn()}>
+      Snackbar content
+    </Snackbar>
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders snackbar with Text as a child', () => {
-  const tree = renderer
-    .create(
-      <Snackbar visible onDismiss={jest.fn()}>
-        <Text>Snackbar content</Text>
-      </Snackbar>
-    )
-    .toJSON();
+  const tree = render(
+    <Snackbar visible onDismiss={jest.fn()}>
+      <Text>Snackbar content</Text>
+    </Snackbar>
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders snackbar with action button', () => {
-  const tree = renderer
-    .create(
-      <Snackbar
-        visible
-        onDismiss={() => {}}
-        action={{ label: 'Undo', onPress: jest.fn() }}
-      >
-        Snackbar content
-      </Snackbar>
-    )
-    .toJSON();
+  const tree = render(
+    <Snackbar
+      visible
+      onDismiss={() => {}}
+      action={{ label: 'Undo', onPress: jest.fn() }}
+    >
+      Snackbar content
+    </Snackbar>
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders snackbar with View & Text as a child', () => {
-  const tree = renderer
-    .create(
-      <Snackbar visible onDismiss={jest.fn()}>
-        <View style={styles.snackContent}>
-          <View style={styles.iconView} />
-          <Text style={styles.text}>
-            Error Message which is veryyyyyyyyyyyy longggggggg Error Message
-            which is veryyyyyyyyyyyy longggggggg
-          </Text>
-        </View>
-      </Snackbar>
-    )
-    .toJSON();
+  const tree = render(
+    <Snackbar visible onDismiss={jest.fn()}>
+      <View style={styles.snackContent}>
+        <View style={styles.iconView} />
+        <Text style={styles.text}>
+          Error Message which is veryyyyyyyyyyyy longggggggg Error Message which
+          is veryyyyyyyyyyyy longggggggg
+        </Text>
+      </View>
+    </Snackbar>
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
diff --git a/src/components/__tests__/Switch.test.tsx b/src/components/__tests__/Switch.test.tsx
index 2332d3cf26..e475b9a166 100644
--- a/src/components/__tests__/Switch.test.tsx
+++ b/src/components/__tests__/Switch.test.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { Platform } 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 {
@@ -18,25 +18,25 @@ import Switch from '../Switch/Switch';
 import { getSwitchColor } from '../Switch/utils';
 
 it('renders on switch', () => {
-  const tree = renderer.create(<Switch value />).toJSON();
+  const tree = render(<Switch value />).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders off switch', () => {
-  const tree = renderer.create(<Switch value={false} />).toJSON();
+  const tree = render(<Switch value={false} />).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders disabled switch', () => {
-  const tree = renderer.create(<Switch disabled value />).toJSON();
+  const tree = render(<Switch disabled value />).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders switch with color', () => {
-  const tree = renderer.create(<Switch value color={pink500} />).toJSON();
+  const tree = render(<Switch value color={pink500} />).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
diff --git a/src/components/__tests__/ToggleButton.test.tsx b/src/components/__tests__/ToggleButton.test.tsx
index e55ab7f239..83cd8e2659 100644
--- a/src/components/__tests__/ToggleButton.test.tsx
+++ b/src/components/__tests__/ToggleButton.test.tsx
@@ -3,7 +3,6 @@ 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 { tokens } from '../../styles/themes/v3/tokens';
@@ -11,27 +10,25 @@ import ToggleButton from '../ToggleButton';
 import { getToggleButtonColor } from '../ToggleButton/utils';
 
 it('renders toggle button', () => {
-  const tree = renderer
-    .create(<ToggleButton status="checked" onPress={() => {}} icon="heart" />)
-    .toJSON();
+  const tree = render(
+    <ToggleButton status="checked" onPress={() => {}} icon="heart" />
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders disabled toggle button', () => {
-  const tree = renderer
-    .create(
-      <ToggleButton disabled value="toggle" status="checked" icon="heart" />
-    )
-    .toJSON();
+  const tree = render(
+    <ToggleButton disabled value="toggle" status="checked" icon="heart" />
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders unchecked toggle button', () => {
-  const tree = renderer
-    .create(<ToggleButton disabled status="unchecked" icon="heart" />)
-    .toJSON();
+  const tree = render(
+    <ToggleButton disabled status="unchecked" icon="heart" />
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
diff --git a/src/components/__tests__/Typography/Caption.test.tsx b/src/components/__tests__/Typography/Caption.test.tsx
index 2a5480f353..b85bee50d4 100644
--- a/src/components/__tests__/Typography/Caption.test.tsx
+++ b/src/components/__tests__/Typography/Caption.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { StyleSheet } from 'react-native';
 
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react-native';
 
 import { red500 } from '../../../styles/themes/v2/colors';
 import Caption from '../../Typography/v2/Caption';
@@ -14,15 +14,15 @@ const style = StyleSheet.create({
 });
 
 it('renders caption with children as content', () => {
-  const tree = renderer.create(<Caption>Caption content</Caption>).toJSON();
+  const tree = render(<Caption>Caption content</Caption>).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders caption applying style', () => {
-  const tree = renderer
-    .create(<Caption style={style.caption}>Big and red caption</Caption>)
-    .toJSON();
+  const tree = render(
+    <Caption style={style.caption}>Big and red caption</Caption>
+  ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
diff --git a/src/components/__tests__/Typography/Text.test.tsx b/src/components/__tests__/Typography/Text.test.tsx
index c349c4e8f2..19224ccda3 100644
--- a/src/components/__tests__/Typography/Text.test.tsx
+++ b/src/components/__tests__/Typography/Text.test.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 
 import { render } from '@testing-library/react-native';
-import renderer from 'react-test-renderer';
 
 import Provider from '../../../core/Provider';
 import configureFonts from '../../../styles/fonts';
@@ -36,7 +35,7 @@ it('renders every variant of Text with children as content', () => {
     </>
   );
 
-  const tree = renderer.create(variants).toJSON();
+  const tree = render(variants).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
diff --git a/src/components/__tests__/__snapshots__/Menu.test.tsx.snap b/src/components/__tests__/__snapshots__/Menu.test.tsx.snap
index daa8f91b9c..dc24bab891 100644
--- a/src/components/__tests__/__snapshots__/Menu.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Menu.test.tsx.snap
@@ -216,6 +216,7 @@ Array [
           undefined,
         ]
       }
+      testID="menu-view"
     >
       <View
         collapsable={false}
@@ -895,6 +896,7 @@ Array [
           undefined,
         ]
       }
+      testID="menu-view"
     >
       <View
         collapsable={false}