diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock
index 87660f35..24207675 100644
--- a/example/ios/Podfile.lock
+++ b/example/ios/Podfile.lock
@@ -1230,6 +1230,8 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
+  - react-native-safe-area-context (4.11.0):
+    - React-Core
   - React-nativeconfig (0.75.3)
   - React-NativeModulesApple (0.75.3):
     - glog
@@ -1499,6 +1501,49 @@ PODS:
     - React-Core
     - React-jsi
   - ReactTestApp-Resources (1.0.0-dev)
+  - RNGestureHandler (2.20.0):
+    - DoubleConversion
+    - glog
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-jsi
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
+  - RNScreens (3.34.0):
+    - DoubleConversion
+    - glog
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-jsi
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-RCTImage
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
   - SocketRocket (0.7.0)
   - Yoga (0.0.0)
 
@@ -1540,6 +1585,7 @@ DEPENDENCIES:
   - React-Mapbuffer (from `../node_modules/react-native/ReactCommon`)
   - React-microtasksnativemodule (from `../node_modules/react-native/ReactCommon/react/nativemodule/microtasks`)
   - react-native-bottom-tabs (from `../..`)
+  - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
   - React-nativeconfig (from `../node_modules/react-native/ReactCommon`)
   - React-NativeModulesApple (from `../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios`)
   - React-perflogger (from `../node_modules/react-native/ReactCommon/reactperflogger`)
@@ -1568,6 +1614,8 @@ DEPENDENCIES:
   - "ReactNativeHost (from `../node_modules/@rnx-kit/react-native-host`)"
   - ReactTestApp-DevSupport (from `../node_modules/react-native-test-app`)
   - ReactTestApp-Resources (from `..`)
+  - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
+  - RNScreens (from `../node_modules/react-native-screens`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
@@ -1645,6 +1693,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/react/nativemodule/microtasks"
   react-native-bottom-tabs:
     :path: "../.."
+  react-native-safe-area-context:
+    :path: "../node_modules/react-native-safe-area-context"
   React-nativeconfig:
     :path: "../node_modules/react-native/ReactCommon"
   React-NativeModulesApple:
@@ -1701,6 +1751,10 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-test-app"
   ReactTestApp-Resources:
     :path: ".."
+  RNGestureHandler:
+    :path: "../node_modules/react-native-gesture-handler"
+  RNScreens:
+    :path: "../node_modules/react-native-screens"
   Yoga:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
@@ -1740,6 +1794,7 @@ SPEC CHECKSUMS:
   React-Mapbuffer: 714f2fae68edcabfc332b754e9fbaa8cfc68fdd4
   React-microtasksnativemodule: 987cf7e0e0e7129250a48b807e70d3b906c726cf
   react-native-bottom-tabs: 894d1fb8fc4e6d525b2da35e83e00e18c420cdf2
+  react-native-safe-area-context: 851c62c48dce80ccaa5637b6aa5991a1bc36eca9
   React-nativeconfig: 4a9543185905fe41014c06776bf126083795aed9
   React-NativeModulesApple: 651670a799672bd54469f2981d91493dda361ddf
   React-perflogger: 3bbb82f18e9ac29a1a6931568e99d6305ef4403b
@@ -1768,9 +1823,11 @@ SPEC CHECKSUMS:
   ReactNativeHost: 99c0ffb175cd69de2ac9a70892cd22dac65ea79d
   ReactTestApp-DevSupport: b7cd76a3aeee6167f5e14d82f09685059152c426
   ReactTestApp-Resources: 7db90c026cccdf40cfa495705ad436ccc4d64154
+  RNGestureHandler: 18b9b5d65c77c4744a640f69b7fccdd47ed935c0
+  RNScreens: 5288a8dbeedb3c5051aa2d5658c1c553c050b80a
   SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d
-  Yoga: 1354c027ab07c7736f99a3bef16172d6f1b12b47
+  Yoga: 4ef80d96a5534f0e01b3055f17d1e19a9fc61b63
 
 PODFILE CHECKSUM: 539add55dc6c2e7f9754e288b1ce4fd8583819ae
 
-COCOAPODS: 1.14.3
+COCOAPODS: 1.15.2
diff --git a/example/package.json b/example/package.json
index 3b87cce1..a15fe9c2 100644
--- a/example/package.json
+++ b/example/package.json
@@ -14,9 +14,16 @@
   },
   "dependencies": {
     "@callstack/react-native-visionos": "^0.75.0",
+    "@react-navigation/bottom-tabs": "^6.6.1",
+    "@react-navigation/native": "^6.1.18",
+    "@react-navigation/native-stack": "^6.11.0",
+    "@react-navigation/stack": "^6.4.1",
     "color": "^4.2.3",
     "react": "18.3.1",
-    "react-native": "0.75.3"
+    "react-native": "0.75.3",
+    "react-native-gesture-handler": "^2.20.0",
+    "react-native-safe-area-context": "^4.11.0",
+    "react-native-screens": "^3.34.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
diff --git a/example/src/App.tsx b/example/src/App.tsx
index 96258506..2d404875 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -1,55 +1,109 @@
-import { StyleSheet } from 'react-native';
-import TabView, {
-  type OnPageSelectedEventData,
-  type TabViewItems,
-} from 'react-native-bottom-tabs';
-import { Article } from './Screens/Article';
-import { Contacts } from './Screens/Contacts';
-import { Albums } from './Screens/Albums';
-import { useState } from 'react';
+import { enableScreens } from 'react-native-screens';
+// run this before any screen render(usually in App.js)
+enableScreens();
 
-const items: TabViewItems = [
-  { key: 'article', title: 'Article', icon: 'document.fill', badge: '!' },
-  { key: 'albums', title: 'Albums', icon: 'square.grid.2x2.fill', badge: '5' },
-  { key: 'contacts', title: 'Contacts', icon: 'person.fill' },
+import * as React from 'react';
+import {
+  StyleSheet,
+  Text,
+  ScrollView,
+  TouchableOpacity,
+  Button,
+  Alert,
+} from 'react-native';
+import { NavigationContainer, useNavigation } from '@react-navigation/native';
+import { createStackNavigator } from '@react-navigation/stack';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import JSBottomTabs from './Examples/JSBottomTabs';
+import ThreeTabs from './Examples/ThreeTabs';
+import FourTabs from './Examples/FourTabs';
+
+const examples = [
+  { component: ThreeTabs, name: 'Three Tabs' },
+  { component: FourTabs, name: 'Four Tabs' },
+  { component: JSBottomTabs, name: 'JS Bottom Tabs' },
 ];
 
-export default function App() {
-  const [selectedPage, setSelectedTab] = useState<string>('contacts');
+function App() {
+  const navigation = useNavigation();
+  return (
+    <ScrollView>
+      {examples.map((example) => (
+        <TouchableOpacity
+          key={example.name}
+          testID={example.name}
+          style={styles.exampleTouchable}
+          onPress={() => {
+            //@ts-ignore
+            navigation.navigate(example.name);
+          }}
+        >
+          <Text style={styles.exampleText}>{example.name}</Text>
+        </TouchableOpacity>
+      ))}
+    </ScrollView>
+  );
+}
 
-  const handlePageSelected = ({
-    nativeEvent: { key },
-  }: {
-    nativeEvent: OnPageSelectedEventData;
-  }) => setSelectedTab(key);
+const Stack = createStackNavigator();
 
-  const goToAlbums = () => {
-    setSelectedTab('albums');
-  };
+const NativeStack = createNativeStackNavigator();
 
+export default function Navigation() {
+  const [mode, setMode] = React.useState<'native' | 'js'>('native');
+  const NavigationStack = mode === 'js' ? Stack : NativeStack;
   return (
-    <TabView
-      style={styles.fullWidth}
-      items={items}
-      tabViewStyle="sidebarAdaptable"
-      selectedPage={selectedPage}
-      onPageSelected={handlePageSelected}
-    >
-      <Article onClick={goToAlbums} />
-      <Albums />
-      <Contacts />
-    </TabView>
+    <SafeAreaProvider>
+      <NavigationContainer>
+        <NavigationStack.Navigator initialRouteName="BottomTabs Example">
+          <NavigationStack.Screen
+            name="BottomTabs Example"
+            component={App}
+            options={{
+              headerRight: () => (
+                <Button
+                  onPress={() =>
+                    Alert.alert(
+                      'Alert',
+                      `Do you want to change to the ${
+                        mode === 'js' ? 'native stack' : 'js stack'
+                      } ?`,
+                      [
+                        { text: 'No', onPress: () => {} },
+                        {
+                          text: 'Yes',
+                          onPress: () => {
+                            setMode(mode === 'js' ? 'native' : 'js');
+                          },
+                        },
+                      ]
+                    )
+                  }
+                  title={mode === 'js' ? 'JS' : 'NATIVE'}
+                  color="blue"
+                />
+              ),
+            }}
+          />
+          {examples.map((example, index) => (
+            <NavigationStack.Screen
+              key={index}
+              name={example.name}
+              component={example.component}
+            />
+          ))}
+        </NavigationStack.Navigator>
+      </NavigationContainer>
+    </SafeAreaProvider>
   );
 }
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
+  exampleTouchable: {
+    padding: 16,
   },
-  fullWidth: {
-    width: '100%',
-    height: '100%',
+  exampleText: {
+    fontSize: 16,
   },
 });
diff --git a/example/src/Examples/FourTabs.tsx b/example/src/Examples/FourTabs.tsx
new file mode 100644
index 00000000..8a298968
--- /dev/null
+++ b/example/src/Examples/FourTabs.tsx
@@ -0,0 +1,53 @@
+import { StyleSheet } from 'react-native';
+import TabView, {
+  type OnPageSelectedEventData,
+  type TabViewItems,
+} from 'react-native-bottom-tabs';
+import { useState } from 'react';
+import { Article } from '../Screens/Article';
+import { Albums } from '../Screens/Albums';
+import { Chat } from '../Screens/Chat';
+import { Contacts } from '../Screens/Contacts';
+
+const items: TabViewItems = [
+  { key: 'article', title: 'Article', icon: 'document.fill', badge: '!' },
+  { key: 'albums', title: 'Albums', icon: 'square.grid.2x2.fill', badge: '5' },
+  { key: 'contacts', title: 'Contacts', icon: 'person.fill' },
+  { key: 'chat', title: 'Chat', icon: 'keyboard' },
+];
+
+export default function FourTabs() {
+  const [selectedPage, setSelectedTab] = useState<string>('contacts');
+
+  const handlePageSelected = ({
+    nativeEvent: { key },
+  }: {
+    nativeEvent: OnPageSelectedEventData;
+  }) => setSelectedTab(key);
+
+  const goToAlbums = () => {
+    setSelectedTab('albums');
+  };
+
+  return (
+    <TabView
+      style={styles.fullWidth}
+      items={items}
+      tabViewStyle="sidebarAdaptable"
+      selectedPage={selectedPage}
+      onPageSelected={handlePageSelected}
+    >
+      <Article onClick={goToAlbums} />
+      <Albums />
+      <Contacts />
+      <Chat />
+    </TabView>
+  );
+}
+
+const styles = StyleSheet.create({
+  fullWidth: {
+    width: '100%',
+    height: '100%',
+  },
+});
diff --git a/example/src/Examples/JSBottomTabs.tsx b/example/src/Examples/JSBottomTabs.tsx
new file mode 100644
index 00000000..1b7f7407
--- /dev/null
+++ b/example/src/Examples/JSBottomTabs.tsx
@@ -0,0 +1,20 @@
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { Article } from '../Screens/Article';
+import { Albums } from '../Screens/Albums';
+import { Contacts } from '../Screens/Contacts';
+import { Chat } from '../Screens/Chat';
+
+const Tab = createBottomTabNavigator();
+
+function JSBottomTabs() {
+  return (
+    <Tab.Navigator screenOptions={{ headerShown: false }}>
+      <Tab.Screen name="Article" component={Article} />
+      <Tab.Screen name="Albums" component={Albums} />
+      <Tab.Screen name="Contacts" component={Contacts} />
+      <Tab.Screen name="Chat" component={Chat} />
+    </Tab.Navigator>
+  );
+}
+
+export default JSBottomTabs;
diff --git a/example/src/Examples/ThreeTabs.tsx b/example/src/Examples/ThreeTabs.tsx
new file mode 100644
index 00000000..fdc4d312
--- /dev/null
+++ b/example/src/Examples/ThreeTabs.tsx
@@ -0,0 +1,50 @@
+import { StyleSheet } from 'react-native';
+import TabView, {
+  type OnPageSelectedEventData,
+  type TabViewItems,
+} from 'react-native-bottom-tabs';
+import { useState } from 'react';
+import { Article } from '../Screens/Article';
+import { Albums } from '../Screens/Albums';
+import { Contacts } from '../Screens/Contacts';
+
+const items: TabViewItems = [
+  { key: 'article', title: 'Article', icon: 'document.fill', badge: '!' },
+  { key: 'albums', title: 'Albums', icon: 'square.grid.2x2.fill', badge: '5' },
+  { key: 'contacts', title: 'Contacts', icon: 'person.fill' },
+];
+
+export default function ThreeTabs() {
+  const [selectedPage, setSelectedTab] = useState<string>('contacts');
+
+  const handlePageSelected = ({
+    nativeEvent: { key },
+  }: {
+    nativeEvent: OnPageSelectedEventData;
+  }) => setSelectedTab(key);
+
+  const goToAlbums = () => {
+    setSelectedTab('albums');
+  };
+
+  return (
+    <TabView
+      style={styles.fullWidth}
+      items={items}
+      tabViewStyle="sidebarAdaptable"
+      selectedPage={selectedPage}
+      onPageSelected={handlePageSelected}
+    >
+      <Article onClick={goToAlbums} />
+      <Albums />
+      <Contacts />
+    </TabView>
+  );
+}
+
+const styles = StyleSheet.create({
+  fullWidth: {
+    width: '100%',
+    height: '100%',
+  },
+});
diff --git a/example/src/Screens/Albums.tsx b/example/src/Screens/Albums.tsx
index 41ad8c88..5376beb5 100644
--- a/example/src/Screens/Albums.tsx
+++ b/example/src/Screens/Albums.tsx
@@ -39,6 +39,7 @@ const COVERS = [
 export function Albums(props: Partial<ScrollViewProps>) {
   const dimensions = useWindowDimensions();
 
+  console.log(Platform.OS, ' Rendering Albums');
   const itemSize = dimensions.width / Math.floor(dimensions.width / 150);
 
   return (
diff --git a/example/src/Screens/Article.tsx b/example/src/Screens/Article.tsx
index 7b30da1e..2636684d 100644
--- a/example/src/Screens/Article.tsx
+++ b/example/src/Screens/Article.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import {
   Button,
   Image,
-  SafeAreaView,
+  Platform,
   ScrollView,
   type ScrollViewProps,
   StyleSheet,
@@ -47,94 +47,92 @@ export function Article({
 }: Props) {
   const ref = React.useRef<ScrollView>(null);
 
+  console.log(Platform.OS, ' Rendering Article');
   return (
-    <SafeAreaView>
-      <ScrollView
-        ref={ref}
-        style={{ backgroundColor: '#fff' }}
-        contentContainerStyle={styles.content}
-        {...rest}
-      >
-        <View style={styles.author}>
-          <Image
-            style={styles.avatar}
-            source={require('../../assets/avatar-1.png')}
-          />
-          <View style={styles.meta}>
-            <Text style={[styles.name, { color: '#000' }]}>{author.name}</Text>
-            <Text style={[styles.timestamp, { color: '#000' }]}>{date}</Text>
-          </View>
-        </View>
-        <Button title="Go to Albums" onPress={onClick} />
-        <Heading>What is Lorem Ipsum?</Heading>
-        <Paragraph>
-          Lorem Ipsum is simply dummy text of the printing and typesetting
-          industry. Lorem Ipsum has been the industry&apos;s standard dummy text
-          ever since the 1500s, when an unknown printer took a galley of type
-          and scrambled it to make a type specimen book. It has survived not
-          only five centuries, but also the leap into electronic typesetting,
-          remaining essentially unchanged. It was popularised in the 1960s with
-          the release of Letraset sheets containing Lorem Ipsum passages, and
-          more recently with desktop publishing software like Aldus PageMaker
-          including versions of Lorem Ipsum.
-        </Paragraph>
+    <ScrollView
+      ref={ref}
+      style={{ backgroundColor: '#fff' }}
+      contentContainerStyle={styles.content}
+      {...rest}
+    >
+      <View style={styles.author}>
         <Image
-          style={styles.image}
-          resizeMode="cover"
-          source={require('../../assets/book.jpg')}
+          style={styles.avatar}
+          source={require('../../assets/avatar-1.png')}
         />
-        <Heading>Where does it come from?</Heading>
-        <Paragraph>
-          Contrary to popular belief, Lorem Ipsum is not simply random text. It
-          has roots in a piece of classical Latin literature from 45 BC, making
-          it over 2000 years old. Richard McClintock, a Latin professor at
-          Hampden-Sydney College in Virginia, looked up one of the more obscure
-          Latin words, consectetur, from a Lorem Ipsum passage, and going
-          through the cites of the word in classical literature, discovered the
-          undoubtable source. Lorem Ipsum comes from sections 1.10.32 and
-          1.10.33 of &quot;de Finibus Bonorum et Malorum&quot; (The Extremes of
-          Good and Evil) by Cicero, written in 45 BC. This book is a treatise on
-          the theory of ethics, very popular during the Renaissance. The first
-          line of Lorem Ipsum, &quot;Lorem ipsum dolor sit amet..&quot;, comes
-          from a line in section 1.10.32.
-        </Paragraph>
-        <Paragraph>
-          The standard chunk of Lorem Ipsum used since the 1500s is reproduced
-          below for those interested. Sections 1.10.32 and 1.10.33 from &quot;de
-          Finibus Bonorum et Malorum&quot; by Cicero are also reproduced in
-          their exact original form, accompanied by English versions from the
-          1914 translation by H. Rackham.
-        </Paragraph>
-        <Heading>Why do we use it?</Heading>
-        <Paragraph>
-          It is a long established fact that a reader will be distracted by the
-          readable content of a page when looking at its layout. The point of
-          using Lorem Ipsum is that it has a more-or-less normal distribution of
-          letters, as opposed to using &quot;Content here, content here&quot;,
-          making it look like readable English. Many desktop publishing packages
-          and web page editors now use Lorem Ipsum as their default model text,
-          and a search for &quot;lorem ipsum&quot; will uncover many web sites
-          still in their infancy. Various versions have evolved over the years,
-          sometimes by accident, sometimes on purpose (injected humour and the
-          like).
-        </Paragraph>
-        <Heading>Where can I get some?</Heading>
-        <Paragraph>
-          There are many variations of passages of Lorem Ipsum available, but
-          the majority have suffered alteration in some form, by injected
-          humour, or randomised words which don&apos;t look even slightly
-          believable. If you are going to use a passage of Lorem Ipsum, you need
-          to be sure there isn&apos;t anything embarrassing hidden in the middle
-          of text. All the Lorem Ipsum generators on the Internet tend to repeat
-          predefined chunks as necessary, making this the first true generator
-          on the Internet. It uses a dictionary of over 200 Latin words,
-          combined with a handful of model sentence structures, to generate
-          Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is
-          therefore always free from repetition, injected humour, or
-          non-characteristic words etc.
-        </Paragraph>
-      </ScrollView>
-    </SafeAreaView>
+        <View style={styles.meta}>
+          <Text style={[styles.name, { color: '#000' }]}>{author.name}</Text>
+          <Text style={[styles.timestamp, { color: '#000' }]}>{date}</Text>
+        </View>
+      </View>
+      <Button title="Go to Albums" onPress={onClick} />
+      <Heading>What is Lorem Ipsum?</Heading>
+      <Paragraph>
+        Lorem Ipsum is simply dummy text of the printing and typesetting
+        industry. Lorem Ipsum has been the industry&apos;s standard dummy text
+        ever since the 1500s, when an unknown printer took a galley of type and
+        scrambled it to make a type specimen book. It has survived not only five
+        centuries, but also the leap into electronic typesetting, remaining
+        essentially unchanged. It was popularised in the 1960s with the release
+        of Letraset sheets containing Lorem Ipsum passages, and more recently
+        with desktop publishing software like Aldus PageMaker including versions
+        of Lorem Ipsum.
+      </Paragraph>
+      <Image
+        style={styles.image}
+        resizeMode="cover"
+        source={require('../../assets/book.jpg')}
+      />
+      <Heading>Where does it come from?</Heading>
+      <Paragraph>
+        Contrary to popular belief, Lorem Ipsum is not simply random text. It
+        has roots in a piece of classical Latin literature from 45 BC, making it
+        over 2000 years old. Richard McClintock, a Latin professor at
+        Hampden-Sydney College in Virginia, looked up one of the more obscure
+        Latin words, consectetur, from a Lorem Ipsum passage, and going through
+        the cites of the word in classical literature, discovered the
+        undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33
+        of &quot;de Finibus Bonorum et Malorum&quot; (The Extremes of Good and
+        Evil) by Cicero, written in 45 BC. This book is a treatise on the theory
+        of ethics, very popular during the Renaissance. The first line of Lorem
+        Ipsum, &quot;Lorem ipsum dolor sit amet..&quot;, comes from a line in
+        section 1.10.32.
+      </Paragraph>
+      <Paragraph>
+        The standard chunk of Lorem Ipsum used since the 1500s is reproduced
+        below for those interested. Sections 1.10.32 and 1.10.33 from &quot;de
+        Finibus Bonorum et Malorum&quot; by Cicero are also reproduced in their
+        exact original form, accompanied by English versions from the 1914
+        translation by H. Rackham.
+      </Paragraph>
+      <Heading>Why do we use it?</Heading>
+      <Paragraph>
+        It is a long established fact that a reader will be distracted by the
+        readable content of a page when looking at its layout. The point of
+        using Lorem Ipsum is that it has a more-or-less normal distribution of
+        letters, as opposed to using &quot;Content here, content here&quot;,
+        making it look like readable English. Many desktop publishing packages
+        and web page editors now use Lorem Ipsum as their default model text,
+        and a search for &quot;lorem ipsum&quot; will uncover many web sites
+        still in their infancy. Various versions have evolved over the years,
+        sometimes by accident, sometimes on purpose (injected humour and the
+        like).
+      </Paragraph>
+      <Heading>Where can I get some?</Heading>
+      <Paragraph>
+        There are many variations of passages of Lorem Ipsum available, but the
+        majority have suffered alteration in some form, by injected humour, or
+        randomised words which don&apos;t look even slightly believable. If you
+        are going to use a passage of Lorem Ipsum, you need to be sure there
+        isn&apos;t anything embarrassing hidden in the middle of text. All the
+        Lorem Ipsum generators on the Internet tend to repeat predefined chunks
+        as necessary, making this the first true generator on the Internet. It
+        uses a dictionary of over 200 Latin words, combined with a handful of
+        model sentence structures, to generate Lorem Ipsum which looks
+        reasonable. The generated Lorem Ipsum is therefore always free from
+        repetition, injected humour, or non-characteristic words etc.
+      </Paragraph>
+    </ScrollView>
   );
 }
 
diff --git a/example/src/Screens/Chat.tsx b/example/src/Screens/Chat.tsx
new file mode 100644
index 00000000..6eb19c62
--- /dev/null
+++ b/example/src/Screens/Chat.tsx
@@ -0,0 +1,115 @@
+import {
+  Image,
+  Platform,
+  ScrollView,
+  type ScrollViewProps,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+} from 'react-native';
+
+const MESSAGES = [
+  'okay',
+  'sudo make me a sandwich',
+  'what? make it yourself',
+  'make me a sandwich',
+];
+
+export function Chat({
+  bottom = true,
+  ...rest
+}: Partial<ScrollViewProps & { bottom: boolean }>) {
+  console.log(Platform.OS, ' Rendering Chat');
+  return (
+    <View style={styles.container}>
+      <ScrollView
+        style={styles.inverted}
+        contentContainerStyle={styles.content}
+        {...rest}
+      >
+        {MESSAGES.map((text, i) => {
+          const odd = i % 2;
+
+          return (
+            <View
+              key={i}
+              style={[odd ? styles.odd : styles.even, styles.inverted]}
+            >
+              <Image
+                style={styles.avatar}
+                source={
+                  odd
+                    ? require('../../assets/avatar-2.png')
+                    : require('../../assets/avatar-1.png')
+                }
+              />
+              <View
+                style={[
+                  styles.bubble,
+                  { backgroundColor: odd ? 'blue' : 'white' },
+                ]}
+              >
+                <Text style={{ color: odd ? 'white' : 'blue' }}>{text}</Text>
+              </View>
+            </View>
+          );
+        })}
+      </ScrollView>
+      <TextInput
+        style={[styles.input, { backgroundColor: 'white', color: 'black' }]}
+        placeholderTextColor={'#B0B0B0'}
+        placeholder="Write a message"
+        underlineColorAndroid="transparent"
+      />
+      {bottom ? (
+        <View
+          style={[styles.spacer, Platform.OS !== 'android' && { height: 80 }]}
+        />
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#F2F2F2',
+  },
+  inverted: {
+    transform: [{ scaleY: -1 }],
+  },
+  content: {
+    padding: 16,
+  },
+  even: {
+    flexDirection: 'row',
+  },
+  odd: {
+    flexDirection: 'row-reverse',
+  },
+  avatar: {
+    marginVertical: 8,
+    marginHorizontal: 6,
+    height: 40,
+    width: 40,
+    borderRadius: 20,
+    borderColor: 'rgba(0, 0, 0, .16)',
+    borderWidth: StyleSheet.hairlineWidth,
+  },
+  bubble: {
+    marginVertical: 8,
+    marginHorizontal: 6,
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    borderRadius: 20,
+  },
+  input: {
+    height: 48,
+    paddingVertical: 12,
+    paddingHorizontal: 24,
+  },
+  spacer: {
+    backgroundColor: '#fff',
+  },
+});
diff --git a/example/src/Screens/Contacts.tsx b/example/src/Screens/Contacts.tsx
index d9741d5c..ff28e3f6 100644
--- a/example/src/Screens/Contacts.tsx
+++ b/example/src/Screens/Contacts.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import {
   FlatList,
   type FlatListProps,
+  Platform,
   SafeAreaView,
   StyleSheet,
   Text,
@@ -92,6 +93,7 @@ const ItemSeparator = () => {
 };
 
 export function Contacts({ query, ...rest }: Props) {
+  console.log(Platform.OS, ' Rendering Contacts');
   const renderItem = ({ item }: { item: Item }) => <ContactItem item={item} />;
 
   return (
diff --git a/ios/TabViewImpl.swift b/ios/TabViewImpl.swift
index b182281d..736e85fa 100644
--- a/ios/TabViewImpl.swift
+++ b/ios/TabViewImpl.swift
@@ -29,7 +29,7 @@ struct RepresentableView: UIViewRepresentable {
 struct TabViewImpl: View {
   @ObservedObject var props: TabViewProps
   var onSelect: (_ key: String) -> Void
-
+  
   var body: some View {
     TabView(selection: $props.selectedPage) {
       ForEach(props.children?.indices ?? 0..<0, id: \.self) { index in
@@ -57,12 +57,6 @@ extension View {
     switch name {
     case "automatic":
       self.tabViewStyle(.automatic)
-    case "page":
-      if #available(iOS 14.0, tvOS 14.0, *) {
-        self.tabViewStyle(.page)
-      } else {
-        self
-      }
     case "sidebarAdaptable":
       if #available(iOS 18.0, macOS 15.0, tvOS 18.0, visionOS 2.0, *) {
         self.tabViewStyle(.sidebarAdaptable)
@@ -73,7 +67,7 @@ extension View {
       self
     }
   }
-
+  
   @ViewBuilder
   func tabBadge(_ data: String?) -> some View {
     if #available(iOS 15.0, macOS 15.0, visionOS 2.0, *) {
@@ -87,3 +81,4 @@ extension View {
     }
   }
 }
+
diff --git a/ios/TabViewProvider.swift b/ios/TabViewProvider.swift
index b5ce56df..c64caecf 100644
--- a/ios/TabViewProvider.swift
+++ b/ios/TabViewProvider.swift
@@ -2,14 +2,14 @@ import Foundation
 import SwiftUI
 
 struct TabInfo: Codable {
-    let key: String
-    let icon: String
-    let title: String
-    let badge: String
+  let key: String
+  let icon: String
+  let title: String
+  let badge: String
 }
 
 struct TabData: Codable {
-    let tabs: [TabInfo]
+  let tabs: [TabInfo]
 }
 
 @objc public class TabViewProvider: UIView {
@@ -17,7 +17,7 @@ struct TabData: Codable {
   private var hostingController: UIHostingController<TabViewImpl>?
   private var coalescingKey: UInt16 = 0
   var eventDispatcher: RCTEventDispatcherProtocol?
-
+  
   @objc var onPageSelected: RCTDirectEventBlock?
   @objc var selectedPage: NSString? {
     didSet {
@@ -34,47 +34,55 @@ struct TabData: Codable {
       props.items = parseTabData(from: items)
     }
   }
-
+  
   @objc public convenience init(eventDispatcher: RCTEventDispatcherProtocol) {
     self.init()
     self.eventDispatcher = eventDispatcher
   }
-
-  override init(frame: CGRect) {
-    super.init(frame: frame)
-    setupView()
-  }
-
-  required init?(coder aDecoder: NSCoder) {
-    super.init(coder: aDecoder)
-    setupView()
-  }
-
+  
   public override func didUpdateReactSubviews() {
     props.children = reactSubviews()
   }
-
+  
   public override func layoutSubviews() {
     super.layoutSubviews()
+    setupView()
     props.children = reactSubviews()
   }
-
+  
   private func setupView() {
+    if self.hostingController != nil {
+      return
+    }
+    
     self.hostingController = UIHostingController(rootView: TabViewImpl(props: props) { key in
       self.coalescingKey += 1
       self.eventDispatcher?.send(PageSelectedEvent(reactTag: self.reactTag, key: NSString(string: key), coalescingKey: self.coalescingKey))
     })
-    if let hostingController = self.hostingController {
+    if let hostingController = self.hostingController, let parentViewController = findViewController() {
+      parentViewController.addChild(hostingController)
       addSubview(hostingController.view)
       hostingController.view.translatesAutoresizingMaskIntoConstraints = false
       hostingController.view.pinEdges(to: self)
+      hostingController.didMove(toParent: parentViewController)
     }
   }
-
+  
+  private func findViewController() -> UIViewController? {
+    var responder: UIResponder? = self
+    while let nextResponder = responder?.next {
+      if let viewController = nextResponder as? UIViewController {
+        return viewController
+      }
+      responder = nextResponder
+    }
+    return nil
+  }
+  
   func parseTabData(from array: NSArray?) -> TabData? {
     guard let array else { return nil }
     var items: [TabInfo] = []
-
+    
     for value in array {
       if let itemDict = value as? [String: Any] {
         items.append(
@@ -87,7 +95,7 @@ struct TabData: Codable {
         )
       }
     }
-
+    
     return TabData(tabs: items)
   }
 }
diff --git a/ios/react-native-bottom-tabs-Bridging-Header.h b/ios/react-native-bottom-tabs-Bridging-Header.h
index f14a54a1..b4a33181 100644
--- a/ios/react-native-bottom-tabs-Bridging-Header.h
+++ b/ios/react-native-bottom-tabs-Bridging-Header.h
@@ -1,3 +1,4 @@
 #import <React/RCTViewManager.h>
 #import <React/RCTUIManager.h>
 #import <React/UIView+React.h>
+#import <React/RCTUtils.h>
diff --git a/src/TabViewNativeComponent.ts b/src/TabViewNativeComponent.ts
index 4b8a1b16..991d05be 100644
--- a/src/TabViewNativeComponent.ts
+++ b/src/TabViewNativeComponent.ts
@@ -20,10 +20,7 @@ export interface TabViewProps extends ViewProps {
   items: TabViewItems;
   selectedPage: string;
   onPageSelected?: DirectEventHandler<OnPageSelectedEventData>;
-  tabViewStyle?: WithDefault<
-    'automatic' | 'page' | 'sidebarAdaptable',
-    'automatic'
-  >;
+  tabViewStyle?: WithDefault<'automatic' | 'sidebarAdaptable', 'automatic'>;
 }
 
 export default codegenNativeComponent<TabViewProps>('RCTTabView', {
diff --git a/yarn.lock b/yarn.lock
index f6d917b5..201363c9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1890,6 +1890,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@egjs/hammerjs@npm:^2.0.17":
+  version: 2.0.17
+  resolution: "@egjs/hammerjs@npm:2.0.17"
+  dependencies:
+    "@types/hammerjs": ^2.0.36
+  checksum: 8945137cec5837edd70af3f2e0ea621543eb0aa3b667e6269ec6485350f4d120c2434b37c7c30b1cf42a65275dd61c1f24626749c616696d3956ac0c008c4766
+  languageName: node
+  linkType: hard
+
 "@eslint-community/eslint-utils@npm:^4.2.0":
   version: 4.4.0
   resolution: "@eslint-community/eslint-utils@npm:4.4.0"
@@ -3397,6 +3406,109 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@react-navigation/bottom-tabs@npm:^6.6.1":
+  version: 6.6.1
+  resolution: "@react-navigation/bottom-tabs@npm:6.6.1"
+  dependencies:
+    "@react-navigation/elements": ^1.3.31
+    color: ^4.2.3
+    warn-once: ^0.1.0
+  peerDependencies:
+    "@react-navigation/native": ^6.0.0
+    react: "*"
+    react-native: "*"
+    react-native-safe-area-context: ">= 3.0.0"
+    react-native-screens: ">= 3.0.0"
+  checksum: 07d6da4b91d7f372b67bcb9f1ff97fba96f1fe226bd95d43d7877362ce71d99c6eebe9ca41d84ea8828f055713386262e089a8207a6c849f33bae49b4df4b196
+  languageName: node
+  linkType: hard
+
+"@react-navigation/core@npm:^6.4.17":
+  version: 6.4.17
+  resolution: "@react-navigation/core@npm:6.4.17"
+  dependencies:
+    "@react-navigation/routers": ^6.1.9
+    escape-string-regexp: ^4.0.0
+    nanoid: ^3.1.23
+    query-string: ^7.1.3
+    react-is: ^16.13.0
+    use-latest-callback: ^0.2.1
+  peerDependencies:
+    react: "*"
+  checksum: 5e7315bb6ebff8e796eaccb0442d00696466750cc387e93f5edb5293d4ad3f409c1525ef76192894488e2d0979b762b236a1b0fbbb7500b2f065bf4745d509c0
+  languageName: node
+  linkType: hard
+
+"@react-navigation/elements@npm:^1.3.31":
+  version: 1.3.31
+  resolution: "@react-navigation/elements@npm:1.3.31"
+  peerDependencies:
+    "@react-navigation/native": ^6.0.0
+    react: "*"
+    react-native: "*"
+    react-native-safe-area-context: ">= 3.0.0"
+  checksum: 1e4a65ccd9fab757d01bf41f605aafd6ca8301ae25ad7d3f1769320793418cca9fe2f25ac9337578ce1e0a1560bbbc3a88f18b899867aacd4d31de7a789e417e
+  languageName: node
+  linkType: hard
+
+"@react-navigation/native-stack@npm:^6.11.0":
+  version: 6.11.0
+  resolution: "@react-navigation/native-stack@npm:6.11.0"
+  dependencies:
+    "@react-navigation/elements": ^1.3.31
+    warn-once: ^0.1.0
+  peerDependencies:
+    "@react-navigation/native": ^6.0.0
+    react: "*"
+    react-native: "*"
+    react-native-safe-area-context: ">= 3.0.0"
+    react-native-screens: ">= 3.0.0"
+  checksum: d3dd57c216f5dbe53636bdb9aa48fe27831640f868cf5c68731943a49b68cb457d81182e7868f3e3033da0564e9f193f1b06b69085b8bc5b04ccfbe12ea2bbc0
+  languageName: node
+  linkType: hard
+
+"@react-navigation/native@npm:^6.1.18":
+  version: 6.1.18
+  resolution: "@react-navigation/native@npm:6.1.18"
+  dependencies:
+    "@react-navigation/core": ^6.4.17
+    escape-string-regexp: ^4.0.0
+    fast-deep-equal: ^3.1.3
+    nanoid: ^3.1.23
+  peerDependencies:
+    react: "*"
+    react-native: "*"
+  checksum: 82aeea67723f5dc41403e1c260f04942696f6cde95e30629c383521c3837d18d2d5c21bd78f0ade50beb81ac5edca2d7d38980dcd3a79e3acc86f45d0c09a4b8
+  languageName: node
+  linkType: hard
+
+"@react-navigation/routers@npm:^6.1.9":
+  version: 6.1.9
+  resolution: "@react-navigation/routers@npm:6.1.9"
+  dependencies:
+    nanoid: ^3.1.23
+  checksum: 3a3392ce095d6a2bd2aad69856f513b35774f943a3dc73d8ffb75127de6773203e3264188d87058bdea4c0c9a7d43ed28d0cbf3a1f1cdc086df3ee255d8e1e27
+  languageName: node
+  linkType: hard
+
+"@react-navigation/stack@npm:^6.4.1":
+  version: 6.4.1
+  resolution: "@react-navigation/stack@npm:6.4.1"
+  dependencies:
+    "@react-navigation/elements": ^1.3.31
+    color: ^4.2.3
+    warn-once: ^0.1.0
+  peerDependencies:
+    "@react-navigation/native": ^6.0.0
+    react: "*"
+    react-native: "*"
+    react-native-gesture-handler: ">= 1.0.0"
+    react-native-safe-area-context: ">= 3.0.0"
+    react-native-screens: ">= 3.0.0"
+  checksum: 09bcfb001db0f411df881da9f2551b7015c4d5259a77fcb93196de308838035d016dc4dcb654d16d9cd4cc99f09f5e48add796aa903f9a253678947c35b18199
+  languageName: node
+  linkType: hard
+
 "@release-it/conventional-changelog@npm:^5.0.0":
   version: 5.1.1
   resolution: "@release-it/conventional-changelog@npm:5.1.1"
@@ -3608,6 +3720,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/hammerjs@npm:^2.0.36":
+  version: 2.0.45
+  resolution: "@types/hammerjs@npm:2.0.45"
+  checksum: 40a29067c485a2a1f4345718104218fcf769adb1dbe091cdb6f679b3293dfa0798b207eb498ee7fd79ae8664c999117738fa0c01753f7465a639128f38c3ff5b
+  languageName: node
+  linkType: hard
+
 "@types/http-cache-semantics@npm:^4.0.2":
   version: 4.0.4
   resolution: "@types/http-cache-semantics@npm:4.0.4"
@@ -5674,6 +5793,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"decode-uri-component@npm:^0.2.2":
+  version: 0.2.2
+  resolution: "decode-uri-component@npm:0.2.2"
+  checksum: 95476a7d28f267292ce745eac3524a9079058bbb35767b76e3ee87d42e34cd0275d2eb19d9d08c3e167f97556e8a2872747f5e65cbebcac8b0c98d83e285f139
+  languageName: node
+  linkType: hard
+
 "decompress-response@npm:^6.0.0":
   version: 6.0.0
   resolution: "decompress-response@npm:6.0.0"
@@ -6821,6 +6947,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"filter-obj@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "filter-obj@npm:1.1.0"
+  checksum: cf2104a7c45ff48e7f505b78a3991c8f7f30f28bd8106ef582721f321f1c6277f7751aacd5d83026cb079d9d5091082f588d14a72e7c5d720ece79118fa61e10
+  languageName: node
+  linkType: hard
+
 "finalhandler@npm:1.1.2":
   version: 1.1.2
   resolution: "finalhandler@npm:1.1.2"
@@ -7555,6 +7688,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"hoist-non-react-statics@npm:^3.3.0":
+  version: 3.3.2
+  resolution: "hoist-non-react-statics@npm:3.3.2"
+  dependencies:
+    react-is: ^16.7.0
+  checksum: b1538270429b13901ee586aa44f4cc3ecd8831c061d06cb8322e50ea17b3f5ce4d0e2e66394761e6c8e152cd8c34fb3b4b690116c6ce2bd45b18c746516cb9e8
+  languageName: node
+  linkType: hard
+
 "hosted-git-info@npm:^2.1.4":
   version: 2.8.9
   resolution: "hosted-git-info@npm:2.8.9"
@@ -10190,6 +10332,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"nanoid@npm:^3.1.23":
+  version: 3.3.7
+  resolution: "nanoid@npm:3.3.7"
+  bin:
+    nanoid: bin/nanoid.cjs
+  checksum: d36c427e530713e4ac6567d488b489a36582ef89da1d6d4e3b87eded11eb10d7042a877958c6f104929809b2ab0bafa17652b076cdf84324aa75b30b722204f2
+  languageName: node
+  linkType: hard
+
 "natural-compare-lite@npm:^1.4.0":
   version: 1.4.0
   resolution: "natural-compare-lite@npm:1.4.0"
@@ -11108,7 +11259,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prop-types@npm:^15.8.1":
+"prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
   version: 15.8.1
   resolution: "prop-types@npm:15.8.1"
   dependencies:
@@ -11196,6 +11347,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"query-string@npm:^7.1.3":
+  version: 7.1.3
+  resolution: "query-string@npm:7.1.3"
+  dependencies:
+    decode-uri-component: ^0.2.2
+    filter-obj: ^1.1.0
+    split-on-first: ^1.0.0
+    strict-uri-encode: ^2.0.0
+  checksum: 91af02dcd9cc9227a052841d5c2eecb80a0d6489d05625df506a097ef1c59037cfb5e907f39b84643cbfd535c955abec3e553d0130a7b510120c37d06e0f4346
+  languageName: node
+  linkType: hard
+
 "querystring@npm:^0.2.1":
   version: 0.2.1
   resolution: "querystring@npm:0.2.1"
@@ -11264,7 +11427,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-is@npm:^16.13.1":
+"react-freeze@npm:^1.0.0":
+  version: 1.0.4
+  resolution: "react-freeze@npm:1.0.4"
+  peerDependencies:
+    react: ">=17.0.0"
+  checksum: 6b4d93209dff04a1f25d9f8e0c56a9a8a80e7889e8e8267299f34449c7e41a9ab90cad24569d03dd7173b56b7496576dba68f71f1d4e5c8be72f0633023668bc
+  languageName: node
+  linkType: hard
+
+"react-is@npm:^16.13.0, react-is@npm:^16.13.1, react-is@npm:^16.7.0":
   version: 16.13.1
   resolution: "react-is@npm:16.13.1"
   checksum: f7a19ac3496de32ca9ae12aa030f00f14a3d45374f1ceca0af707c831b2a6098ef0d6bdae51bd437b0a306d7f01d4677fcc8de7c0d331eb47ad0f46130e53c5f
@@ -11296,11 +11468,18 @@ __metadata:
     "@react-native/babel-preset": 0.75.3
     "@react-native/metro-config": 0.75.3
     "@react-native/typescript-config": 0.75.3
+    "@react-navigation/bottom-tabs": ^6.6.1
+    "@react-navigation/native": ^6.1.18
+    "@react-navigation/native-stack": ^6.11.0
+    "@react-navigation/stack": ^6.4.1
     "@rnx-kit/metro-config": ^2.0.0
     color: ^4.2.3
     react: 18.3.1
     react-native: 0.75.3
     react-native-builder-bob: ^0.30.2
+    react-native-gesture-handler: ^2.20.0
+    react-native-safe-area-context: ^4.11.0
+    react-native-screens: ^3.34.0
     react-native-test-app: ^3.10.10
   languageName: unknown
   linkType: soft
@@ -11366,6 +11545,44 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-gesture-handler@npm:^2.20.0":
+  version: 2.20.0
+  resolution: "react-native-gesture-handler@npm:2.20.0"
+  dependencies:
+    "@egjs/hammerjs": ^2.0.17
+    hoist-non-react-statics: ^3.3.0
+    invariant: ^2.2.4
+    prop-types: ^15.7.2
+  peerDependencies:
+    react: "*"
+    react-native: "*"
+  checksum: f573bc3717ae0209ff30bf62b95b3c7f11bd97f4797090211bce416c250388f55d1995aac0a7f1bbc99b06223ea64cbeae8d4ef88dcb8c877201b49163ea0e4b
+  languageName: node
+  linkType: hard
+
+"react-native-safe-area-context@npm:^4.11.0":
+  version: 4.11.0
+  resolution: "react-native-safe-area-context@npm:4.11.0"
+  peerDependencies:
+    react: "*"
+    react-native: "*"
+  checksum: 6d6af265ecf1b9cb45e042a335f2c5da472ad41eb5d4fda8e31a1607b344726f0f4f9501ef3a3a731cec3784ba93485b44cbdafbf5f13055caa130c703bbd307
+  languageName: node
+  linkType: hard
+
+"react-native-screens@npm:^3.34.0":
+  version: 3.34.0
+  resolution: "react-native-screens@npm:3.34.0"
+  dependencies:
+    react-freeze: ^1.0.0
+    warn-once: ^0.1.0
+  peerDependencies:
+    react: "*"
+    react-native: "*"
+  checksum: 28c1f6e556c318ffcbd79d153b9612cc8a0b8d8b70f909d3cde2fd6d0586a7c151a449e57400d8996f4ee6c3b5140c5c4f643a427e974f6dc573b2bcd8eb7356
+  languageName: node
+  linkType: hard
+
 "react-native-test-app@npm:^3.10.10":
   version: 3.10.10
   resolution: "react-native-test-app@npm:3.10.10"
@@ -12429,6 +12646,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"split-on-first@npm:^1.0.0":
+  version: 1.1.0
+  resolution: "split-on-first@npm:1.1.0"
+  checksum: 16ff85b54ddcf17f9147210a4022529b343edbcbea4ce977c8f30e38408b8d6e0f25f92cd35b86a524d4797f455e29ab89eb8db787f3c10708e0b47ebf528d30
+  languageName: node
+  linkType: hard
+
 "split2@npm:^3.0.0, split2@npm:^3.2.2":
   version: 3.2.2
   resolution: "split2@npm:3.2.2"
@@ -12527,6 +12751,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"strict-uri-encode@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "strict-uri-encode@npm:2.0.0"
+  checksum: eaac4cf978b6fbd480f1092cab8b233c9b949bcabfc9b598dd79a758f7243c28765ef7639c876fa72940dac687181b35486ea01ff7df3e65ce3848c64822c581
+  languageName: node
+  linkType: hard
+
 "string-length@npm:^4.0.1":
   version: 4.0.2
   resolution: "string-length@npm:4.0.2"
@@ -13438,6 +13669,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"use-latest-callback@npm:^0.2.1":
+  version: 0.2.1
+  resolution: "use-latest-callback@npm:0.2.1"
+  peerDependencies:
+    react: ">=16.8"
+  checksum: da5718eda625738cc7dac8fb502d0f8f2039435eb71203565a72c32e0f5769e7b8ddac074e650066636e7f4b29b45524f751cb18a2b430856d98879bbb10d274
+  languageName: node
+  linkType: hard
+
 "util-deprecate@npm:^1.0.1, util-deprecate@npm:~1.0.1":
   version: 1.0.2
   resolution: "util-deprecate@npm:1.0.2"
@@ -13524,6 +13764,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"warn-once@npm:^0.1.0":
+  version: 0.1.1
+  resolution: "warn-once@npm:0.1.1"
+  checksum: e6a5a1f5a8dba7744399743d3cfb571db4c3947897875d4962a7c5b1bf2195ab4518c838cb4cea652e71729f21bba2e98dc75686f5fccde0fabbd894e2ed0c0d
+  languageName: node
+  linkType: hard
+
 "wcwidth@npm:^1.0.1":
   version: 1.0.1
   resolution: "wcwidth@npm:1.0.1"