Fix Multiline input and remove unnecessary packages

Author: codeAbinash

bun.lockb

@@ -19,7 +19,6 @@
     "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",
@@ -29,9 +28,7 @@
     "@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

@@ -1,5 +1,5 @@
 import { Colors } from '@utils/colors'
-import { F, SEMIBOLD } from '@utils/fonts'
+import { SEMIBOLD } from '@utils/fonts'
 import { cn } from '@utils/utils'
 import React from 'react'
 import { TextInput, View, useColorScheme, type TextInputProps } from 'react-native'
@@ -16,8 +16,8 @@ export function Input({ Icon, Right, accent = Colors.accent, multiline, classNam
       <View className='flex-1 flex-row items-center' style={{ gap: 22 }}>
         {Icon}
         <TextInput
-          className={cn('flex-1 px-0 py-3 text-zinc-800 dark:text-zinc-200', className)}
-          style={[{ marginBottom: 1, paddingVertical: 0, flex: 1 }, F.F12_5, SEMIBOLD]}
+          className={cn('flex-1 text-zinc-800 dark:text-zinc-200', className)}
+          style={[{ marginBottom: 1, flex: 1, height: multiline ? undefined : 40, fontSize: 12.5 }, SEMIBOLD]}
           placeholderTextColor={scheme === 'dark' ? Colors.zinc[500] : Colors.zinc[400]}
           cursorColor={accent}
           selectionColor={accent + '77'}

src/components/Input.tsx

@@ -1,28 +1,20 @@
+import { Input } from '@components/Input'
+import SettGroup from '@components/Settings/SettGroup'
+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 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 navigation={navigation} title='Test Screen'>
+        <SettText className='mt-5'>This is a test screen</SettText>
+        <SettGroup title='Normal Input'>
+          <Input placeholder='Test Input' />
+        </SettGroup>
+        <SettGroup title='Multiline Input (8)'>
+          <Input multiline placeholder='Test Input' numberOfLines={8} />
+        </SettGroup>
       </SettWrapper>
     </>
   )

src/screens/Test.tsx

@@ -89,7 +89,7 @@ export default function Login({ navigation }: NavProp) {
           <Lottie source={Animations['welcome']} style={{ width: W * 0.6, height: W * 0.6 }} />
         </View>
         <Gap12>
-          <SettGroup title='Enter your credentials'>
+          <SettGroup title='Email or Username'>
             <Input
               Icon={<RoundedIcon Icon={Mail02SolidIcon} className='bg-rose-500' />}
               autoComplete='email'
@@ -98,7 +98,7 @@ export default function Login({ navigation }: NavProp) {
               onChangeText={setUsername}
             />
           </SettGroup>
-          <SettGroup title='Enter your password'>
+          <SettGroup title='Your password'>
             <Input
               value={password}
               autoComplete='password'