diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock
index 14c774cb..4aa436ba 100644
--- a/example/ios/Podfile.lock
+++ b/example/ios/Podfile.lock
@@ -1237,6 +1237,72 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
+  - react-native-safe-area-context (4.11.0):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - react-native-safe-area-context/common (= 4.11.0)
+    - react-native-safe-area-context/fabric (= 4.11.0)
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
+  - react-native-safe-area-context/common (4.11.0):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
+  - react-native-safe-area-context/fabric (4.11.0):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - react-native-safe-area-context/common
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
   - React-nativeconfig (0.75.2)
   - React-NativeModulesApple (0.75.2):
     - glog
@@ -1497,7 +1563,49 @@ PODS:
     - React-logger (= 0.75.2)
     - React-perflogger (= 0.75.2)
     - React-utils (= 0.75.2)
-  - RNLiveMarkdown (0.1.169):
+  - RNCAsyncStorage (2.0.0):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
+  - RNGestureHandler (2.20.0):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
+  - RNLiveMarkdown (0.1.170):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1517,9 +1625,9 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - RNLiveMarkdown/newarch (= 0.1.169)
+    - RNLiveMarkdown/newarch (= 0.1.170)
     - Yoga
-  - RNLiveMarkdown/newarch (0.1.169):
+  - RNLiveMarkdown/newarch (0.1.170):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1540,6 +1648,51 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
+  - RNScreens (3.34.0):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-RCTImage
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - RNScreens/common (= 3.34.0)
+    - Yoga
+  - RNScreens/common (3.34.0):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - 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)
 
@@ -1581,6 +1734,7 @@ DEPENDENCIES:
   - React-logger (from `../node_modules/react-native/ReactCommon/logger`)
   - React-Mapbuffer (from `../node_modules/react-native/ReactCommon`)
   - React-microtasksnativemodule (from `../node_modules/react-native/ReactCommon/react/nativemodule/microtasks`)
+  - 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`)
@@ -1607,7 +1761,10 @@ DEPENDENCIES:
   - React-utils (from `../node_modules/react-native/ReactCommon/react/utils`)
   - ReactCodegen (from `build/generated/ios`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
+  - "RNCAsyncStorage (from `../node_modules/@react-native-async-storage/async-storage`)"
+  - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
   - RNLiveMarkdown (from `../..`)
+  - RNScreens (from `../node_modules/react-native-screens`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
@@ -1686,6 +1843,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon"
   React-microtasksnativemodule:
     :path: "../node_modules/react-native/ReactCommon/react/nativemodule/microtasks"
+  react-native-safe-area-context:
+    :path: "../node_modules/react-native-safe-area-context"
   React-nativeconfig:
     :path: "../node_modules/react-native/ReactCommon"
   React-NativeModulesApple:
@@ -1738,8 +1897,14 @@ EXTERNAL SOURCES:
     :path: build/generated/ios
   ReactCommon:
     :path: "../node_modules/react-native/ReactCommon"
+  RNCAsyncStorage:
+    :path: "../node_modules/@react-native-async-storage/async-storage"
+  RNGestureHandler:
+    :path: "../node_modules/react-native-gesture-handler"
   RNLiveMarkdown:
     :path: "../.."
+  RNScreens:
+    :path: "../node_modules/react-native-screens"
   Yoga:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
@@ -1779,6 +1944,7 @@ SPEC CHECKSUMS:
   React-logger: 8db32983d75dc2ad54f278f344ccb9b256e694fc
   React-Mapbuffer: 1c08607305558666fd16678b85ef135e455d5c96
   React-microtasksnativemodule: f13f03163b6a5ec66665dfe80a0df4468bb766a6
+  react-native-safe-area-context: f1fda705dfe14355f41933debb5932887e234cc5
   React-nativeconfig: 57781b79e11d5af7573e6f77cbf1143b71802a6d
   React-NativeModulesApple: 7ff2e2cfb2e5fa5bdedcecf28ce37e696c6ef1e1
   React-perflogger: 8a360ccf603de6ddbe9ff8f54383146d26e6c936
@@ -1805,7 +1971,10 @@ SPEC CHECKSUMS:
   React-utils: 81a715d9c0a2a49047e77a86f3a2247408540deb
   ReactCodegen: 60973d382704c793c605b9be0fc7f31cb279442f
   ReactCommon: 6ef348087d250257c44c0204461c03f036650e9b
-  RNLiveMarkdown: 00ab78496be2ae15a15a83f14ba732c01624f02c
+  RNCAsyncStorage: 597673c6086d359029afefef8fd5859f1f35ab87
+  RNGestureHandler: c374c750a0a9bacd95f5c740d146ab9428549d6b
+  RNLiveMarkdown: d747d551a329f6ce0c066eeb1ef08480ce05d61b
+  RNScreens: de6e57426ba0e6cbc3fb5b4f496e7f08cb2773c2
   SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d
   Yoga: 2a45d7e59592db061217551fd3bbe2dd993817ae
 
diff --git a/example/package.json b/example/package.json
index 6dd71838..91e7c9fb 100644
--- a/example/package.json
+++ b/example/package.json
@@ -9,8 +9,15 @@
     "start": "react-native start"
   },
   "dependencies": {
+    "@react-native-async-storage/async-storage": "^2.0.0",
+    "@react-navigation/native": "^6.1.18",
+    "@react-navigation/native-stack": "^6.11.0",
+    "@react-navigation/stack": "^6.4.1",
     "react": "18.3.1",
-    "react-native": "0.75.2"
+    "react-native": "0.75.2",
+    "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 d3d63426..9640bcc8 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -1,152 +1,247 @@
+import {
+  HeaderBackButton,
+  type HeaderBackButtonProps,
+} from '@react-navigation/elements';
+import type {
+  NavigationProp,
+  NavigationState,
+  PathConfigMap,
+} from '@react-navigation/native';
 import * as React from 'react';
-import {Button, StyleSheet, Text, View} from 'react-native';
-import {MarkdownTextInput} from '@expensify/react-native-live-markdown';
-import type {TextInput} from 'react-native';
-import * as TEST_CONST from './testConstants';
-import {PlatformInfo} from './PlatformInfo';
+import {
+  ActivityIndicator,
+  FlatList,
+  Linking,
+  Platform,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
 
-export default function App() {
-  const [value, setValue] = React.useState(TEST_CONST.EXAMPLE_CONTENT);
-  const [textColorState, setTextColorState] = React.useState(false);
-  const [linkColorState, setLinkColorState] = React.useState(false);
-  const [textFontSizeState, setTextFontSizeState] = React.useState(false);
-  const [emojiFontSizeState, setEmojiFontSizeState] = React.useState(false);
-  const [selection, setSelection] = React.useState({start: 0, end: 0});
-
-  const style = React.useMemo(() => {
-    return {
-      color: textColorState ? 'gray' : 'black',
-      fontSize: textFontSizeState ? 15 : 20,
-    };
-  }, [textColorState, textFontSizeState]);
+import {NavigationContainer, useNavigation} from '@react-navigation/native';
 
-  const markdownStyle = React.useMemo(() => {
-    return {
-      emoji: {
-        fontSize: emojiFontSizeState ? 15 : 20,
-      },
-      link: {
-        color: linkColorState ? 'red' : 'blue',
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import {
+  createNativeStackNavigator,
+  type NativeStackNavigationProp,
+} from '@react-navigation/native-stack';
+import {
+  createStackNavigator,
+  type StackNavigationProp,
+} from '@react-navigation/stack';
+import {EXAMPLES} from './examples';
+
+function noop() {
+  // do nothing
+}
+
+type RootStackParamList = {[P in keyof typeof EXAMPLES]: undefined} & {
+  Home: undefined;
+};
+
+interface HomeScreenProps {
+  navigation:
+    | StackNavigationProp<RootStackParamList, 'Home'>
+    | NativeStackNavigationProp<RootStackParamList, 'Home'>;
+}
+
+const EXAMPLES_NAMES = Object.keys(EXAMPLES);
+
+function HomeScreen({navigation}: HomeScreenProps) {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [wasClicked, setWasClicked] = React.useState<string[]>([]);
+
+  return (
+    <FlatList
+      data={EXAMPLES_NAMES}
+      initialNumToRender={EXAMPLES_NAMES.length}
+      renderItem={({item: name}) => (
+        <Item
+          icon={EXAMPLES[name]?.icon ?? 'ℹ️'}
+          title={EXAMPLES[name]?.title ?? ''}
+          onPress={() => {
+            navigation.navigate(name);
+            if (!wasClicked.includes(name)) {
+              setTimeout(() => setWasClicked([...wasClicked, name]), 500);
+            }
+          }}
+          wasClicked={wasClicked.includes(name)}
+        />
+      )}
+      renderScrollComponent={props => <ScrollView {...props} />}
+      ItemSeparatorComponent={ItemSeparator}
+      style={styles.list}
+    />
+  );
+}
+
+interface ItemProps {
+  icon?: string;
+  title: string;
+  onPress: () => void;
+  missingOnFabric?: boolean;
+  wasClicked?: boolean;
+}
+
+function Item({icon, title, onPress, wasClicked}: ItemProps) {
+  return (
+    <Pressable
+      style={[styles.button, wasClicked && styles.visitedItem]}
+      onPress={onPress}>
+      {icon && <Text style={styles.title}>{icon + '  '}</Text>}
+      <Text style={styles.title}>{title}</Text>
+    </Pressable>
+  );
+}
+
+function ItemSeparator() {
+  return <View style={styles.separator} />;
+}
+
+const Stack =
+  Platform.OS === 'macos'
+    ? createStackNavigator<RootStackParamList>()
+    : createNativeStackNavigator<RootStackParamList>();
+
+const linking = {
+  prefixes: [],
+  config: {
+    screens: EXAMPLES_NAMES.reduce<PathConfigMap<RootStackParamList>>(
+      (acc, name) => {
+        acc[name] = name;
+        return acc;
       },
-    };
-  }, [emojiFontSizeState, linkColorState]);
+      {Home: ''},
+    ),
+  },
+};
 
-  // TODO: use MarkdownTextInput ref instead of TextInput ref
-  const ref = React.useRef<TextInput>(null);
+function BackButton(props: HeaderBackButtonProps) {
+  const navigation = useNavigation<NavigationProp<RootStackParamList>>();
 
   return (
-    <View style={styles.container}>
-      <PlatformInfo />
-      <MarkdownTextInput
-        multiline
-        autoCapitalize="none"
-        value={value}
-        onChangeText={setValue}
-        style={[styles.input, style]}
-        ref={ref}
-        markdownStyle={markdownStyle}
-        placeholder="Type here..."
-        onSelectionChange={e => setSelection(e.nativeEvent.selection)}
-        selection={selection}
-        id={TEST_CONST.INPUT_ID}
-        maxLength={30000}
-      />
-      <Text style={styles.text}>{JSON.stringify(value)}</Text>
-      <Button
-        testID="focus"
-        title="Focus"
-        onPress={() => {
-          if (!ref.current) {
-            return;
-          }
-          ref.current.focus();
-        }}
-      />
-      <Button
-        testID="blur"
-        title="Blur"
-        onPress={() => {
-          if (!ref.current) {
-            return;
-          }
-          ref.current.blur();
-        }}
-      />
-      <Button
-        testID="reset"
-        title="Reset"
-        onPress={() => {
-          setValue(TEST_CONST.EXAMPLE_CONTENT);
-          setTextColorState(false);
-          setLinkColorState(false);
-          setTextFontSizeState(false);
-          setEmojiFontSizeState(false);
-          setSelection({start: 0, end: 0});
-        }}
-      />
-      <Button
-        testID="clear"
-        title="Clear"
-        onPress={() => {
-          setValue('');
-        }}
-      />
-      <Button
-        title="Toggle text color"
-        onPress={() => setTextColorState(prev => !prev)}
-      />
-      <Button
-        title="Toggle link color"
-        onPress={() => setLinkColorState(prev => !prev)}
-      />
-      <Button
-        title="Toggle text font size"
-        onPress={() => setTextFontSizeState(prev => !prev)}
-      />
-      <Button
-        title="Toggle emoji font size"
-        onPress={() => setEmojiFontSizeState(prev => !prev)}
-      />
-      <Button
-        title="Toggle all"
-        onPress={() => {
-          setTextColorState(prev => !prev);
-          setLinkColorState(prev => !prev);
-          setTextFontSizeState(prev => !prev);
-          setEmojiFontSizeState(prev => !prev);
-        }}
-      />
-      <Button
-        title="Change selection"
-        onPress={() => {
-          if (!ref.current) {
-            return;
+    <HeaderBackButton {...props} onPress={() => navigation.navigate('Home')} />
+  );
+}
+
+// copied from https://reactnavigation.org/docs/state-persistence/
+const PERSISTENCE_KEY = 'NAVIGATION_STATE_V1';
+
+export default function App() {
+  const [isReady, setIsReady] = React.useState(!__DEV__);
+  const [initialState, setInitialState] = React.useState();
+
+  React.useEffect(() => {
+    const restoreState = async () => {
+      try {
+        const initialUrl = await Linking.getInitialURL();
+
+        if (
+          Platform.OS !== 'web' &&
+          Platform.OS !== 'macos' &&
+          initialUrl == null
+        ) {
+          // Only restore state if there's no deep link and we're not on web
+          const savedStateString = await AsyncStorage.getItem(PERSISTENCE_KEY);
+          const state = savedStateString
+            ? JSON.parse(savedStateString)
+            : undefined;
+
+          if (state !== undefined) {
+            setInitialState(state);
           }
-          ref.current.focus();
-          setSelection({start: 0, end: 20});
-        }}
-      />
-    </View>
+        }
+      } finally {
+        setIsReady(true);
+      }
+    };
+
+    if (!isReady) {
+      restoreState().catch(noop);
+    }
+  }, [isReady]);
+
+  const persistNavigationState = React.useCallback(
+    (state?: NavigationState) => {
+      AsyncStorage.setItem(PERSISTENCE_KEY, JSON.stringify(state)).catch(noop);
+    },
+    [],
+  );
+
+  if (!isReady) {
+    return (
+      <View style={[styles.container, styles.center]}>
+        <ActivityIndicator />
+      </View>
+    );
+  }
+
+  return (
+    <NavigationContainer
+      linking={linking}
+      initialState={initialState}
+      onStateChange={persistNavigationState}>
+      <Stack.Navigator>
+        <Stack.Screen
+          name="Home"
+          component={HomeScreen}
+          options={{
+            headerTitle: 'React-native-live-markdown',
+            title: 'React Native Live Markdown Examples',
+            headerLeft: Platform.OS === 'web' ? () => null : undefined,
+          }}
+        />
+        {EXAMPLES_NAMES.map(name => (
+          <Stack.Screen
+            key={name}
+            name={name}
+            component={EXAMPLES[name]!.screen}
+            options={{
+              headerTitle: EXAMPLES[name]?.title ?? '',
+              title: EXAMPLES[name]?.title ?? '',
+              headerLeft: Platform.OS === 'web' ? BackButton : undefined,
+            }}
+          />
+        ))}
+      </Stack.Navigator>
+    </NavigationContainer>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+  },
+  center: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  list: {
+    backgroundColor: '#EFEFF4',
+  },
+  separator: {
+    height: 1,
+    backgroundColor: '#DBDBE0',
+  },
+  button: {
+    flex: 1,
+    height: 60,
+    padding: 15,
+    flexDirection: 'row',
     alignItems: 'center',
-    marginTop: 60,
+    backgroundColor: 'white',
+  },
+  disabledButton: {
+    backgroundColor: 'grey',
+    opacity: 0.5,
   },
-  input: {
-    fontSize: 20,
-    width: 300,
-    padding: 5,
-    borderColor: 'gray',
-    borderWidth: 1,
-    textAlignVertical: 'top',
+  title: {
+    fontSize: 16,
+    color: 'black',
   },
-  text: {
-    fontFamily: 'Courier New',
-    marginTop: 10,
-    height: 100,
+  visitedItem: {
+    backgroundColor: '#e6f0f7',
   },
 });
diff --git a/example/src/PlatformInfo.tsx b/example/src/examples/AboutExample.tsx
similarity index 96%
rename from example/src/PlatformInfo.tsx
rename to example/src/examples/AboutExample.tsx
index 978ca1bb..293273de 100644
--- a/example/src/PlatformInfo.tsx
+++ b/example/src/examples/AboutExample.tsx
@@ -16,7 +16,6 @@ function getPlatform() {
   // @ts-ignore it works
   return Platform.constants.systemName || Platform.constants.Brand;
 }
-
 function getPlatformVersion() {
   return Platform.Version;
 }
@@ -49,7 +48,7 @@ function getReactNativeVersion() {
   return `${major}.${minor}.${patch}`;
 }
 
-export function PlatformInfo() {
+export function AboutExample() {
   return (
     <View style={styles.platform}>
       <Text>
@@ -71,6 +70,6 @@ export function PlatformInfo() {
 const styles = StyleSheet.create({
   platform: {
     alignItems: 'center',
-    marginBottom: 20,
+    marginTop: 20,
   },
 });
diff --git a/example/src/examples/MarkdownPreviewExample.tsx b/example/src/examples/MarkdownPreviewExample.tsx
new file mode 100644
index 00000000..89a3b046
--- /dev/null
+++ b/example/src/examples/MarkdownPreviewExample.tsx
@@ -0,0 +1,103 @@
+import {View, StyleSheet, Text, ScrollView} from 'react-native';
+import {MarkdownTextInput} from '@expensify/react-native-live-markdown';
+import React from 'react';
+
+type MarkdownExample = {
+  title: string;
+  content: string;
+};
+
+const MARKDOWN_EXAMPLES: MarkdownExample[] = [
+  {
+    title: 'Bold Text',
+    content: 'Hello, *world*!',
+  },
+  {
+    title: 'Emoji',
+    content: '😀🍕🍔',
+  },
+  {
+    title: 'Url',
+    content: 'https://expensify.com',
+  },
+  {
+    title: 'Header',
+    content: '# header1',
+  },
+  {
+    title: 'Blockquote',
+    content: '> blockquote',
+  },
+  {
+    title: 'Inline Code',
+    content: '`inline code`',
+  },
+  {
+    title: 'Code Block',
+    content: '```\ncodeblock\n```',
+  },
+  {
+    title: 'Mentions',
+    content: '@here',
+  },
+  {
+    title: 'Email Mentions',
+    content: '@someone@swmansion.com',
+  },
+  {
+    title: 'Hashtag',
+    content: '#mention-report',
+  },
+  {
+    title: 'Image',
+    content: '![demo image](https://picsum.photos/id/1067/200/300)',
+  },
+];
+
+export function MarkdownPreviewExample() {
+  return (
+    <ScrollView>
+      <View style={[styles.container]}>
+        {MARKDOWN_EXAMPLES.map(({title, content}) => {
+          return (
+            <View style={styles.exampleWrapper} key={title}>
+              <Text style={styles.header}>{title}</Text>
+              <MarkdownTextInput
+                multiline
+                autoCapitalize="none"
+                style={styles.input}
+                placeholder="123"
+                defaultValue={content}
+              />
+            </View>
+          );
+        })}
+      </View>
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    paddingTop: 20,
+    paddingBottom: 50,
+    gap: 20,
+    alignItems: 'center',
+  },
+  exampleWrapper: {
+    gap: 8,
+  },
+  header: {
+    fontSize: 24,
+    fontWeight: '600',
+  },
+  input: {
+    fontSize: 20,
+    width: 350,
+    padding: 5,
+    borderColor: 'gray',
+    borderWidth: 1,
+    textAlignVertical: 'top',
+    backgroundColor: 'rgb(253,253,253)',
+  },
+});
diff --git a/example/src/examples/PlaygroundExample.tsx b/example/src/examples/PlaygroundExample.tsx
new file mode 100644
index 00000000..d4fe834c
--- /dev/null
+++ b/example/src/examples/PlaygroundExample.tsx
@@ -0,0 +1,310 @@
+import * as React from 'react';
+import {
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+  ScrollView,
+} from 'react-native';
+import {MarkdownTextInput} from '@expensify/react-native-live-markdown';
+import {TextInput} from 'react-native';
+import * as TEST_CONST from '../testConstants';
+
+const FONT_SIZES = [24, 32, 8, 12, 16];
+const COLORS = ['black', 'blue', 'red', 'cyan', 'magenta', 'orange'];
+
+export function PlaygroundExample() {
+  const [value, setValue] = React.useState(TEST_CONST.EXAMPLE_CONTENT);
+  const [textColorIndex, setTextColorIndex] = React.useState(0);
+  const [linkColorIndex, setLinkColorIndex] = React.useState(1);
+  const [textFontSizeIndex, setTextFontSizeIndex] = React.useState(0);
+  const [emojiFontSizeIndex, setEmojiFontSizeIndex] = React.useState(0);
+  const [selection, setSelection] = React.useState({start: 0, end: 0});
+
+  const style = React.useMemo(() => {
+    return {
+      color: COLORS[textColorIndex],
+      fontSize: FONT_SIZES[textFontSizeIndex],
+    };
+  }, [textColorIndex, textFontSizeIndex]);
+
+  const markdownStyle = React.useMemo(() => {
+    return {
+      emoji: {
+        fontSize: FONT_SIZES[emojiFontSizeIndex],
+      },
+      link: {
+        color: COLORS[linkColorIndex],
+      },
+    };
+  }, [linkColorIndex, emojiFontSizeIndex]);
+
+  const ref = React.useRef<TextInput>(null);
+
+  return (
+    <ScrollView>
+      <View style={styles.container}>
+        <MarkdownTextInput
+          multiline
+          autoCapitalize="none"
+          value={value}
+          onChangeText={setValue}
+          style={[styles.input, style]}
+          ref={ref}
+          markdownStyle={markdownStyle}
+          placeholder="Type here..."
+          onSelectionChange={e => setSelection(e.nativeEvent.selection)}
+          selection={selection}
+          id={TEST_CONST.INPUT_ID}
+        />
+        <View style={styles.controlsGrid}>
+          <Row>
+            <Col>
+              <ColorPicker
+                color={COLORS[textColorIndex]}
+                title="Text Color"
+                testID="change-text-color"
+                onPress={() => setTextColorIndex(i => (i + 1) % COLORS.length)}
+              />
+            </Col>
+            <Col>
+              <ColorPicker
+                color={COLORS[linkColorIndex]}
+                title="Link Color"
+                testID="change-text-color"
+                onPress={() => setLinkColorIndex(i => (i + 1) % COLORS.length)}
+              />
+            </Col>
+          </Row>
+          <Row>
+            <Col>
+              <FontPicker
+                title="Text Font Size"
+                fontSize={FONT_SIZES[textFontSizeIndex]}
+                onPress={() =>
+                  setTextFontSizeIndex(i => (i + 1) % FONT_SIZES.length)
+                }
+              />
+            </Col>
+            <Col>
+              <FontPicker
+                title="Emoji Font Size"
+                fontSize={FONT_SIZES[emojiFontSizeIndex]}
+                onPress={() =>
+                  setEmojiFontSizeIndex(i => (i + 1) % FONT_SIZES.length)
+                }
+              />
+            </Col>
+          </Row>
+          <Row>
+            <Col>
+              <Btn
+                testID="focus"
+                title="Focus"
+                onPress={() => {
+                  if (!ref.current) {
+                    return;
+                  }
+                  ref.current.focus();
+                }}
+              />
+            </Col>
+            <Col>
+              <Btn
+                testID="blur"
+                title="Blur"
+                onPress={() => {
+                  if (!ref.current) {
+                    return;
+                  }
+                  ref.current.blur();
+                }}
+              />
+            </Col>
+          </Row>
+          <Row>
+            <Col>
+              <Btn
+                testID="reset"
+                title="Reset"
+                onPress={() => {
+                  setValue(TEST_CONST.EXAMPLE_CONTENT);
+                  setTextColorIndex(0);
+                  setLinkColorIndex(1);
+                  setTextFontSizeIndex(0);
+                  setEmojiFontSizeIndex(0);
+                  setSelection({start: 0, end: 0});
+                }}
+              />
+            </Col>
+            <Col>
+              <Btn
+                testID="clear"
+                title="Clear"
+                onPress={() => {
+                  setValue('');
+                }}
+              />
+            </Col>
+          </Row>
+          <Row>
+            <Col>
+              <Btn
+                title="Change selection"
+                onPress={() => {
+                  if (!ref.current) {
+                    return;
+                  }
+                  ref.current.focus();
+                  setSelection({start: 0, end: 20});
+                }}
+              />
+            </Col>
+          </Row>
+        </View>
+      </View>
+    </ScrollView>
+  );
+}
+
+function FontPicker({
+  title,
+  testID,
+  onPress,
+  fontSize,
+}: {
+  title?: string;
+  testID?: string;
+  fontSize?: number;
+  onPress: () => void;
+}) {
+  return (
+    <View style={pickerStyles.container}>
+      <Btn testID={testID} onPress={onPress}>
+        <Text style={pickerStyles.title}>{fontSize}</Text>
+      </Btn>
+      <Text style={pickerStyles.title}>{title}</Text>
+    </View>
+  );
+}
+
+function ColorPicker({
+  title,
+  testID,
+  onPress,
+  color,
+}: {
+  title?: string;
+  testID?: string;
+  color?: string;
+  onPress: () => void;
+}) {
+  const boxStyle = React.useMemo(
+    () => [pickerStyles.box, {backgroundColor: color}],
+    [color],
+  );
+  return (
+    <View style={pickerStyles.container}>
+      <Btn testID={testID} onPress={onPress}>
+        <View style={boxStyle} />
+      </Btn>
+      <Text style={pickerStyles.title}>{title}</Text>
+    </View>
+  );
+}
+
+function Btn({
+  title,
+  testID,
+  onPress,
+  children,
+}: {
+  title?: string;
+  testID?: string;
+  children?: React.ReactNode;
+  onPress: () => void;
+}) {
+  return (
+    <TouchableOpacity
+      testID={testID}
+      style={btnStyles.button}
+      onPress={onPress}>
+      {title && <Text style={btnStyles.text}>{title}</Text>}
+      {children && <>{children}</>}
+    </TouchableOpacity>
+  );
+}
+const btnStyles = StyleSheet.create({
+  button: {
+    backgroundColor: 'white',
+    borderWidth: 2,
+    padding: 8,
+    minHeight: 50,
+    minWidth: 50,
+    borderColor: 'black',
+    borderRadius: 12,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  text: {
+    fontWeight: 800,
+  },
+});
+
+function Row({children}: {children: React.ReactNode}) {
+  return <View style={styles.row}>{children}</View>;
+}
+function Col({children}: {children: React.ReactNode}) {
+  return <View style={styles.col}>{children}</View>;
+}
+
+const pickerStyles = StyleSheet.create({
+  container: {
+    flexGrow: 1,
+    flexDirection: 'row',
+    gap: 8,
+    alignItems: 'center',
+  },
+  box: {
+    width: 30,
+    height: 30,
+    borderRadius: 8,
+  },
+  title: {
+    fontWeight: 800,
+  },
+});
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: 16,
+    paddingTop: 16,
+    paddingBottom: 30,
+  },
+  controlsGrid: {
+    flex: 2,
+    paddingTop: 8,
+    gap: 8,
+  },
+  row: {
+    flexDirection: 'row',
+    gap: 8,
+  },
+  col: {
+    flex: 1,
+  },
+  input: {
+    fontSize: 20,
+    width: '100%',
+    padding: 5,
+    borderColor: 'gray',
+    borderWidth: 1,
+    textAlignVertical: 'top',
+  },
+  text: {
+    fontFamily: 'Courier New',
+    marginTop: 10,
+    height: 100,
+  },
+});
diff --git a/example/src/examples/index.ts b/example/src/examples/index.ts
new file mode 100644
index 00000000..3246d29d
--- /dev/null
+++ b/example/src/examples/index.ts
@@ -0,0 +1,27 @@
+import {AboutExample} from './AboutExample';
+import {MarkdownPreviewExample} from './MarkdownPreviewExample';
+import {PlaygroundExample} from './PlaygroundExample';
+
+interface Example {
+  icon?: string;
+  title: string;
+  screen: React.FC;
+}
+
+export const EXAMPLES: Record<string, Example> = {
+  PlaygroundExample: {
+    icon: '🎮',
+    title: 'Playground',
+    screen: PlaygroundExample,
+  },
+  MarkdownPreviewExample: {
+    icon: '👁️',
+    title: 'Markdown Preview',
+    screen: MarkdownPreviewExample,
+  },
+  AboutExample: {
+    icon: 'ℹ️',
+    title: 'About',
+    screen: AboutExample,
+  },
+} as const;
diff --git a/example/src/testConstants.ts b/example/src/testConstants.ts
index d576501e..59f9ad01 100644
--- a/example/src/testConstants.ts
+++ b/example/src/testConstants.ts
@@ -1,4 +1,4 @@
-const LOCAL_URL = 'http://localhost:19006/';
+const LOCAL_URL = 'http://localhost:19006/PlaygroundExample';
 
 const EXAMPLE_CONTENT = [
   'Hello, *world*!',
diff --git a/example/tsconfig.json b/example/tsconfig.json
index 0e875a5a..88966901 100644
--- a/example/tsconfig.json
+++ b/example/tsconfig.json
@@ -1,7 +1,8 @@
 {
   "extends": ["../tsconfig.json"],
   "compilerOptions": {
-    "strict": true
+    "strict": true,
+    "noUncheckedIndexedAccess": false
   },
   "include": ["src/App.tsx", "src/testConstants.ts", "./index.ts"],
   "exclude": ["node_modules"]
diff --git a/yarn.lock b/yarn.lock
index 6faa9d9c..bb654aea 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2797,6 +2797,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
+
 "@esbuild/android-arm64@npm:0.19.4":
   version: 0.19.4
   resolution: "@esbuild/android-arm64@npm:0.19.4"
@@ -3024,10 +3033,14 @@ __metadata:
     "@babel/core": ^7.20.0
     "@babel/preset-env": ^7.20.0
     "@babel/runtime": ^7.20.0
+    "@react-native-async-storage/async-storage": ^2.0.0
     "@react-native/babel-preset": 0.75.2
     "@react-native/eslint-config": 0.75.2
     "@react-native/metro-config": 0.75.2
     "@react-native/typescript-config": 0.75.2
+    "@react-navigation/native": ^6.1.18
+    "@react-navigation/native-stack": ^6.11.0
+    "@react-navigation/stack": ^6.4.1
     "@types/react": ^18.2.6
     "@types/react-test-renderer": ^18.0.0
     babel-jest: ^29.6.3
@@ -3037,6 +3050,9 @@ __metadata:
     prettier: 2.8.8
     react: 18.3.1
     react-native: 0.75.2
+    react-native-gesture-handler: ^2.20.0
+    react-native-safe-area-context: ^4.11.0
+    react-native-screens: ^3.34.0
     react-test-renderer: 18.3.1
     typescript: 5.0.4
   languageName: unknown
@@ -4327,6 +4343,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@react-native-async-storage/async-storage@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "@react-native-async-storage/async-storage@npm:2.0.0"
+  dependencies:
+    merge-options: ^3.0.4
+  peerDependencies:
+    react-native: ^0.0.0-0 || >=0.65 <1.0
+  checksum: 7007a411f13988594a3f9b5ebb29f1554ab65ff2bd90814fa8b125fa68b69c431bdfcd38769ae2dcb6505aec2bad9296f0a0fa1ac8f123007eda49c826f2d138
+  languageName: node
+  linkType: hard
+
 "@react-native-community/cli-clean@npm:13.6.9":
   version: 13.6.9
   resolution: "@react-native-community/cli-clean@npm:13.6.9"
@@ -5261,6 +5288,92 @@ __metadata:
   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"
@@ -5533,6 +5646,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/hammerjs@npm:^2.0.36":
+  version: 2.0.46
+  resolution: "@types/hammerjs@npm:2.0.46"
+  checksum: caba6ec788d19905c71092670b58514b3d1f5eee5382bf9205e8df688d51e7857b7994e2dd7aed57fac8977bdf0e456d67fbaf23440a4385b8ce25fe2af1ec39
+  languageName: node
+  linkType: hard
+
 "@types/html-minifier-terser@npm:^6.0.0":
   version: 6.1.0
   resolution: "@types/html-minifier-terser@npm:6.1.0"
@@ -8155,13 +8275,33 @@ __metadata:
   languageName: node
   linkType: hard
 
-"color-name@npm:~1.1.4":
+"color-name@npm:^1.0.0, color-name@npm:~1.1.4":
   version: 1.1.4
   resolution: "color-name@npm:1.1.4"
   checksum: b0445859521eb4021cd0fb0cc1a75cecf67fceecae89b63f62b201cca8d345baf8b952c966862a9d9a2632987d4f6581f0ec8d957dfacece86f0a7919316f610
   languageName: node
   linkType: hard
 
+"color-string@npm:^1.9.0":
+  version: 1.9.1
+  resolution: "color-string@npm:1.9.1"
+  dependencies:
+    color-name: ^1.0.0
+    simple-swizzle: ^0.2.2
+  checksum: c13fe7cff7885f603f49105827d621ce87f4571d78ba28ef4a3f1a104304748f620615e6bf065ecd2145d0d9dad83a3553f52bb25ede7239d18e9f81622f1cc5
+  languageName: node
+  linkType: hard
+
+"color@npm:^4.2.3":
+  version: 4.2.3
+  resolution: "color@npm:4.2.3"
+  dependencies:
+    color-convert: ^2.0.1
+    color-string: ^1.9.0
+  checksum: 0579629c02c631b426780038da929cca8e8d80a40158b09811a0112a107c62e10e4aad719843b791b1e658ab4e800558f2e87ca4522c8b32349d497ecb6adeb4
+  languageName: node
+  linkType: hard
+
 "colord@npm:^2.9.1":
   version: 2.9.3
   resolution: "colord@npm:2.9.3"
@@ -9144,6 +9284,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"
@@ -11399,6 +11546,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"
@@ -12496,6 +12650,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"
@@ -13123,6 +13286,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-arrayish@npm:^0.3.1":
+  version: 0.3.2
+  resolution: "is-arrayish@npm:0.3.2"
+  checksum: 977e64f54d91c8f169b59afcd80ff19227e9f5c791fa28fa2e5bce355cbaf6c2c356711b734656e80c9dd4a854dd7efcf7894402f1031dfc5de5d620775b4d5f
+  languageName: node
+  linkType: hard
+
 "is-async-function@npm:^2.0.0":
   version: 2.0.0
   resolution: "is-async-function@npm:2.0.0"
@@ -13483,6 +13653,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-plain-obj@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "is-plain-obj@npm:2.1.0"
+  checksum: cec9100678b0a9fe0248a81743041ed990c2d4c99f893d935545cfbc42876cbe86d207f3b895700c690ad2fa520e568c44afc1605044b535a7820c1d40e38daa
+  languageName: node
+  linkType: hard
+
 "is-plain-obj@npm:^3.0.0":
   version: 3.0.0
   resolution: "is-plain-obj@npm:3.0.0"
@@ -15458,6 +15635,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"merge-options@npm:^3.0.4":
+  version: 3.0.4
+  resolution: "merge-options@npm:3.0.4"
+  dependencies:
+    is-plain-obj: ^2.1.0
+  checksum: d86ddb3dd6e85d558dbf25dc944f3527b6bacb944db3fdda6e84a3f59c4e4b85231095f58b835758b9a57708342dee0f8de0dffa352974a48221487fe9f4584f
+  languageName: node
+  linkType: hard
+
 "merge-stream@npm:^2.0.0":
   version: 2.0.0
   resolution: "merge-stream@npm:2.0.0"
@@ -16036,7 +16222,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nanoid@npm:^3.3.7":
+"nanoid@npm:^3.1.23, nanoid@npm:^3.3.7":
   version: 3.3.7
   resolution: "nanoid@npm:3.3.7"
   bin:
@@ -17857,6 +18043,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"
@@ -17989,6 +18187,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"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.12.0 || ^17.0.0 || ^18.0.0, react-is@npm:^18.0.0":
   version: 18.2.0
   resolution: "react-is@npm:18.2.0"
@@ -17996,7 +18203,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-is@npm:^16.13.1":
+"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
@@ -18050,6 +18257,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-web@npm:^0.19.10":
   version: 0.19.10
   resolution: "react-native-web@npm:0.19.10"
@@ -19462,6 +19707,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"simple-swizzle@npm:^0.2.2":
+  version: 0.2.2
+  resolution: "simple-swizzle@npm:0.2.2"
+  dependencies:
+    is-arrayish: ^0.3.1
+  checksum: a7f3f2ab5c76c4472d5c578df892e857323e452d9f392e1b5cf74b74db66e6294a1e1b8b390b519fa1b96b5b613f2a37db6cffef52c3f1f8f3c5ea64eb2d54c0
+  languageName: node
+  linkType: hard
+
 "simple-update-notifier@npm:^2.0.0":
   version: 2.0.0
   resolution: "simple-update-notifier@npm:2.0.0"
@@ -19692,6 +19946,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":
   version: 3.2.2
   resolution: "split2@npm:3.2.2"
@@ -19797,6 +20058,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"
@@ -21239,6 +21507,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.2, util-deprecate@npm:~1.0.1":
   version: 1.0.2
   resolution: "util-deprecate@npm:1.0.2"
@@ -21366,6 +21643,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
+
 "watchpack@npm:^2.4.1":
   version: 2.4.1
   resolution: "watchpack@npm:2.4.1"