Add Markdown input to Test screen, update navigation, and adjust keyboard offset

Author: codeAbinash

App.tsx

@@ -109,7 +109,7 @@ export type RootStackParamList = {
   CustomizingAnimations: undefined
   Basic: undefined
   KeyboardAnimation: undefined
-  Animations: undefined
+  // Animations: undefined
   DragAnimation: undefined
   Weather: undefined
   WeatherWelcome: undefined

bun.lockb

@@ -19,6 +19,7 @@
     "prettier:fix": "prettier --write ."
   },
   "dependencies": {
+    "@expensify/react-native-live-markdown": "^0.1.219",
     "@react-native-clipboard/clipboard": "^1.16.1",
     "@react-native-community/netinfo": "^11.4.1",
     "@react-native-masked-view/masked-view": "^0.3.2",
@@ -28,7 +29,9 @@
     "@shopify/react-native-skia": "^1.10.2",
     "@tanstack/react-query": "^5.64.1",
     "clsx": "^2.1.1",
+    "expensify-common": "^2.0.114",
     "hono": "^4.6.16",
+    "html-entities": "^2.5.2",
     "lottie-react-native": "^7.2.1",
     "nativewind": "^4.1.23",
     "react": "18.3.1",

package.json

@@ -22,7 +22,7 @@ export default function KeyboardAvoid(props: KeyboardAvoidingContainerProps) {
     <KeyboardAvoidingView
       style={{ flex: 1 }}
       behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-      // keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : 0}
+      keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : 10}
       enabled={isKeyboardVisible}
     >
       <ScrollView

src/components/KeyboardAvoid.tsx

@@ -114,7 +114,7 @@ function Shortcuts({ navigation }: { navigation: StackNav }) {
           <Medium className='text-xs text-gray-700 dark:text-gray-300'>Shortcut 1</Medium>
         </TouchableOpacity>
         <TouchableOpacity
-          onPress={() => navigation.navigate('Story')}
+          onPress={() => navigation.navigate('Test')}
           style={[hw, styles.shadow, styles.center]}
           className='w-1/2 rounded-2xl bg-white dark:bg-zinc-900'
         >

src/screens/Home/HomeScreen.tsx

@@ -1,34 +1,28 @@
-import { Setting07SolidIcon } from '@assets/icons/icons'
-import { Gap12 } from '@components/Gap'
-import RoundedIcon from '@components/RoundedIcon'
-import SettGroup from '@components/Settings/SettGroup'
-import { SettOption } from '@components/Settings/SettOption'
-import SettText from '@components/Settings/SettText'
 import SettWrapper from '@components/Settings/SettWrapper'
+import { MarkdownTextInput, parseExpensiMark } from '@expensify/react-native-live-markdown'
+import { Colors } from '@utils/colors'
+import { H } from '@utils/dimensions'
+import { MEDIUM } from '@utils/fonts'
 import type { NavProp } from '@utils/types'
+import { useState } from 'react'
 
 export default function Test({ navigation }: NavProp) {
+  const [text, setText] = useState('')
   return (
     <>
-      <SettWrapper navigation={navigation} title='Test Screen'>
-        <Gap12>
-          <SettText className='mt-3'>This is a test screen.</SettText>
-          <SettGroup title='Sample title'>
-            <SettOption
-              title='A blank setting'
-              Icon={<RoundedIcon Icon={Setting07SolidIcon} className='bg-slate-500' />}
-              arrow
-            />
-            <SettOption
-              title='Animations'
-              Icon={<RoundedIcon Icon={Setting07SolidIcon} className='bg-slate-500' />}
-              arrow
-              onPressOut={() => navigation.navigate('Animations')}
-            />
-          </SettGroup>
-          <SettText>Sample text</SettText>
-        </Gap12>
-        <SettText>End Text</SettText>
+      <SettWrapper navigation={navigation} title='Test Markdown' className='px-2'>
+        <MarkdownTextInput
+          value={text}
+          onChangeText={setText}
+          keyboardType='twitter'
+          className='text'
+          parser={parseExpensiMark}
+          numberOfLines={100}
+          style={{ ...MEDIUM, flex: 1, textAlignVertical: 'top', height: H - 100 }}
+          selectionColor={Colors.accent + '77'}
+          cursorColor={Colors.accent}
+          multiline
+        />
       </SettWrapper>
     </>
   )