@chem-po/react-native 0.0.30 → 0.0.32

package/src/components/form/input/Editable.tsx

@@ -10,7 +10,8 @@ import {
 } from '@chem-po/react'
 import { Ionicons } from '@expo/vector-icons'
 import React, { ForwardedRef, useCallback, useEffect, useMemo } from 'react'
-import { StyleSheet, TextStyle, TouchableOpacity, View, ViewStyle } from 'react-native'
+import { StyleSheet, TextStyle, View, ViewStyle } from 'react-native'
+import { Pressable } from 'react-native-gesture-handler'
 import { CustomInputProps } from '../../../types/forms'
 import { CollapseHorizontal } from '../../layout/CollapseHorizontal'
 import { LoadingOverlay } from '../../loading/LoadingOverlay'
@@ -95,8 +96,6 @@ export const Editable = <T extends Field>({
     [CustomView, field],
   )
 
-  console.log({ isEditing })
-
   return (
     <View style={[styles.container, containerStyle]}>
       <View style={styles.contentContainer}>
@@ -124,7 +123,7 @@ export const Editable = <T extends Field>({
         {!alwaysEditing && (
           <View style={styles.buttonsContainer}>
             <CollapseHorizontal in={!isEditing}>
-              <TouchableOpacity
+              <Pressable
                 onPress={() => {
                   handleEditOpen()
                 }}
@@ -132,10 +131,10 @@ export const Editable = <T extends Field>({
                 onPressIn={() => setEditHovered(true)}
                 onPressOut={() => setEditHovered(false)}>
                 <Ionicons name="create-outline" size={20} color={iconColor} />
-              </TouchableOpacity>
+              </Pressable>
             </CollapseHorizontal>
             <CollapseHorizontal in={isEditing} style={styles.submitButtonContainer}>
-              <TouchableOpacity
+              <Pressable
                 onPress={() => {
                   handleEditClose()
                 }}
@@ -143,14 +142,14 @@ export const Editable = <T extends Field>({
                 onPressIn={() => setEditHovered(true)}
                 onPressOut={() => setEditHovered(false)}>
                 <Ionicons name="close" size={20} color={iconColor} />
-              </TouchableOpacity>
-              <TouchableOpacity
+              </Pressable>
+              <Pressable
                 style={[styles.submitButton, { backgroundColor: submitColor }]}
                 onPress={() => {
                   submit()
                 }}>
                 <Ionicons name="checkmark" size={20} color="#fff" />
-              </TouchableOpacity>
+              </Pressable>
             </CollapseHorizontal>
           </View>
         )}

package/src/components/form/input/common/InputClearButton.tsx

@@ -1,7 +1,8 @@
 import { useBackgroundColor, useBorderColor, useIconColor } from '@chem-po/react'
 import { Ionicons } from '@expo/vector-icons'
 import React from 'react'
-import { StyleSheet, TouchableOpacity } from 'react-native'
+import { StyleSheet } from 'react-native'
+import { Pressable } from 'react-native-gesture-handler'
 
 export const InputClearButton = ({
   onPress,
@@ -18,7 +19,7 @@ export const InputClearButton = ({
   const borderColor = useBorderColor()
   const backgroundColor = useBackgroundColor(100)
   return (
-    <TouchableOpacity
+    <Pressable
       onPress={onPress}
       style={[
         styles.closeButton,
@@ -27,7 +28,7 @@ export const InputClearButton = ({
       hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
       disabled={!isActive}>
       <Ionicons name="close" size={size} color={iconColor} style={{ alignSelf: 'center' }} />
-    </TouchableOpacity>
+    </Pressable>
   )
 }
 

package/src/components/form/input/date/index.tsx

@@ -2,9 +2,11 @@ import { getDateString, InputRef } from '@chem-po/core'
 import { DateField, useIconColor } from '@chem-po/react'
 import { Ionicons } from '@expo/vector-icons'
 import React, { forwardRef, useImperativeHandle, useMemo } from 'react'
-import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+import { StyleSheet, Text, View } from 'react-native'
+import { Gesture, GestureDetector } from 'react-native-gesture-handler'
 import { Portal } from 'react-native-paper'
 import { DatePickerModal } from 'react-native-paper-dates'
+import { runOnJS } from 'react-native-reanimated'
 import { FieldProps } from '../../types'
 import { DateInputClearButton } from '../common/InputClearButton'
 import { useInputColor } from '../hooks/useInputColor'
@@ -46,24 +48,28 @@ export const DateInput = forwardRef<InputRef, FieldProps<DateField>>(
       },
     }))
 
-    const showDialog = () => {
-      onFocus()
-    }
-
     const iconColor = useIconColor()
     const inputColor = useInputColor(value)
 
     const minDateObj = minDate === 'now' ? new Date() : minDate ? new Date(minDate) : undefined
     const maxDateObj = maxDate === 'now' ? new Date() : maxDate ? new Date(maxDate) : undefined
 
+    const mainTap = Gesture.Tap().onStart(() => {
+      runOnJS(onFocus)()
+    })
+
     return (
       <View style={styles.container}>
-        <TouchableOpacity style={[styles.button, inputStyles]} onPress={showDialog}>
-          <Text style={[styles.text, text, { color: inputColor }]}>
-            {value ? getDateString(value, 'short') : placeholder}
-          </Text>
+        <View style={[styles.button, inputStyles]}>
+          <GestureDetector gesture={mainTap}>
+            <View style={styles.textContainer}>
+              <Text numberOfLines={1} style={[styles.text, text, { color: inputColor }]}>
+                {value ? getDateString(value, 'short') : placeholder}
+              </Text>
+              <Ionicons name="calendar" size={iconSize} color={iconColor} />
+            </View>
+          </GestureDetector>
           <View style={buttonContainer}>
-            <Ionicons name="calendar" size={iconSize} color={iconColor} />
             {optional && value ? (
               <DateInputClearButton
                 size={clearButtonSize}
@@ -72,7 +78,7 @@ export const DateInput = forwardRef<InputRef, FieldProps<DateField>>(
               />
             ) : null}
           </View>
-        </TouchableOpacity>
+        </View>
         <Portal>
           <DatePickerModal
             locale="en"
@@ -104,8 +110,15 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
+    gap: 8,
     width: '100%',
   },
+  textContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
   text: {
     flex: 1,
   },

package/src/components/form/input/datetime/index.tsx

@@ -2,10 +2,11 @@ import { getDateTimeString, InputRef } from '@chem-po/core'
 import { DateTimeField, useIconColor } from '@chem-po/react'
 import { Ionicons } from '@expo/vector-icons'
 import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from 'react'
-import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
-import { Pressable } from 'react-native-gesture-handler'
+import { StyleSheet, Text, View } from 'react-native'
+import { Gesture, GestureDetector, Pressable } from 'react-native-gesture-handler'
 import { Portal } from 'react-native-paper'
 import { DatePickerModal, TimePickerModal } from 'react-native-paper-dates'
+import { runOnJS } from 'react-native-reanimated'
 import { FieldProps } from '../../types'
 import { DateInputClearButton } from '../common/InputClearButton'
 import { useInputColor } from '../hooks/useInputColor'
@@ -64,11 +65,21 @@ export const DateTimeInput = forwardRef<InputRef, FieldProps<DateTimeField>>(
     )
 
     const handleDismiss = useCallback(() => {
-      setShowDatePicker(true)
+      setShowDatePicker(false)
       setShowTimePicker(false)
       onBlur()
     }, [onBlur])
 
+    const handleFocusTime = useCallback(() => {
+      setShowTimePicker(true)
+      onFocus()
+    }, [onFocus])
+
+    const handleFocusDate = useCallback(() => {
+      setShowDatePicker(true)
+      onFocus()
+    }, [onFocus])
+
     const date = useMemo(() => (value ? new Date(value) : undefined), [value])
 
     const formattedValue = useMemo(() => {
@@ -84,22 +95,25 @@ export const DateTimeInput = forwardRef<InputRef, FieldProps<DateTimeField>>(
     const iconColor = useIconColor()
     const inputColor = useInputColor(value)
 
+    const mainTap = Gesture.Tap().onStart(() => {
+      runOnJS(handleFocusDate)()
+    })
+
     return (
       <View style={styles.container}>
-        <TouchableOpacity
-          style={[styles.button, inputStyles]}
-          onPress={() => {
-            setShowDatePicker(true)
-            onFocus()
-          }}>
-          <Text style={[styles.text, text, { color: inputColor }]}>
-            {formattedValue ?? placeholder}
-          </Text>
+        <View style={[styles.button, inputStyles]}>
+          <GestureDetector gesture={mainTap}>
+            <View style={styles.textContainer}>
+              <Text numberOfLines={1} style={[styles.text, text, { color: inputColor }]}>
+                {formattedValue ?? placeholder}
+              </Text>
+            </View>
+          </GestureDetector>
           <View style={buttonContainer}>
-            <Pressable onPress={() => setShowDatePicker(true)}>
+            <Pressable onPress={handleFocusDate}>
               <Ionicons name="calendar" size={iconSize} color={iconColor} />
             </Pressable>
-            <Pressable onPress={() => setShowTimePicker(true)}>
+            <Pressable onPress={handleFocusTime}>
               <Ionicons name="time" size={iconSize} color={iconColor} />
             </Pressable>
             {optional && value ? (
@@ -110,7 +124,7 @@ export const DateTimeInput = forwardRef<InputRef, FieldProps<DateTimeField>>(
               />
             ) : null}
           </View>
-        </TouchableOpacity>
+        </View>
         <Portal>
           {showDatePicker && (
             <DatePickerModal
@@ -153,7 +167,10 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
     width: '100%',
   },
-  text: {
+  textContainer: {
     flex: 1,
   },
+  text: {
+    width: '100%',
+  },
 })

package/src/components/form/input/file/index.tsx

@@ -12,8 +12,9 @@ import {
 import { Ionicons } from '@expo/vector-icons'
 import * as DocumentPicker from 'expo-document-picker'
 import * as ImagePicker from 'expo-image-picker'
-import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from 'react'
-import { StyleProp, StyleSheet, Text, TouchableOpacity, View, ViewStyle } from 'react-native'
+import React, { forwardRef, useCallback, useImperativeHandle, useMemo } from 'react'
+import { Platform, StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native'
+import { Pressable } from 'react-native-gesture-handler'
 import { downloadFile } from '../../../../utils/downloadFile'
 import { LoadingImage } from '../../../loading/LoadingImage'
 import { FieldProps } from '../../types'
@@ -33,17 +34,17 @@ const generateAccept = (field: FileField) => {
   return accept.join(',')
 }
 
-const NoFileView = ({ hasUpload }: { hasUpload?: boolean }) => {
+const NoFileView = ({ hasUpload, onPress }: { hasUpload?: boolean; onPress?: () => void }) => {
   const textColor = useTextColor()
   const iconColor = useIconColor()
   const borderColor = useBorderColor()
   return (
-    <View style={[styles.noFileContainer, { borderColor }]}>
+    <Pressable style={[styles.noFileContainer, { borderColor }]} onPress={onPress}>
       <Text style={[styles.noFileText, { color: textColor }]}>
         {hasUpload ? 'Tap to upload file' : 'No file uploaded'}
       </Text>
       <Ionicons name="cloud-upload" size={24} color={iconColor} />
-    </View>
+    </Pressable>
   )
 }
 
@@ -54,6 +55,7 @@ export const FileView = ({
   withFullView,
   nonImageContainerStyle,
   withDownload,
+  onUploadPress,
 }: {
   value?: FileValue | null
   hasUpload?: boolean
@@ -61,6 +63,7 @@ export const FileView = ({
   withFullView?: boolean
   nonImageContainerStyle?: StyleProp<ViewStyle>
   withDownload?: boolean
+  onUploadPress?: () => void
 }) => {
   const { storagePath, dataUrl } = value ?? {}
   const missingFile = !dataUrl && !storagePath
@@ -93,7 +96,10 @@ export const FileView = ({
 
     try {
       await downloadFile(url, filename, fileType)
-      showSuccess('File downloaded successfully')
+      if (Platform.OS === 'android') {
+        showSuccess('File downloaded successfully')
+        return
+      }
     } catch (error: unknown) {
       if (error instanceof Error) {
         console.error('Error downloading file:', error.message)
@@ -104,26 +110,22 @@ export const FileView = ({
     }
   }, [url, value, showError, showSuccess])
   if (!value || missingFile) {
-    return <NoFileView hasUpload={hasUpload} />
+    return <NoFileView onPress={onUploadPress} hasUpload={hasUpload} />
   }
 
-  if (value.type?.startsWith('image/')) {
-    return (
-      <LoadingImage
-        withDownload={withDownload}
-        filename={value.filename}
-        src={url}
-        fileType={value.type}
-        loadingOverride={loading}
-        width={imageOptions?.width ?? 120}
-        height={imageOptions?.height ?? 120}
-        withFullView={withFullView}
-        style={styles.image}
-      />
-    )
-  }
-
-  return (
+  const body = value.type?.startsWith('image/') ? (
+    <LoadingImage
+      withDownload={withDownload}
+      filename={value.filename}
+      src={url}
+      fileType={value.type}
+      loadingOverride={loading}
+      width={imageOptions?.width ?? 120}
+      height={imageOptions?.height ?? 120}
+      withFullView={withFullView}
+      style={styles.image}
+    />
+  ) : (
     <View style={[styles.fileContainer, { borderColor, backgroundColor }, nonImageContainerStyle]}>
       <View style={styles.iconContainer}>
         <Ionicons name="document" size={24} color={iconColor} />
@@ -134,25 +136,25 @@ export const FileView = ({
         </Text>
       </View>
       {withDownload && (
-        <TouchableOpacity
+        <Pressable
           style={styles.downloadButton}
           onPress={() => void handleDownload()}
           disabled={loading}>
           <Ionicons name="download" size={20} color={iconColor} />
-        </TouchableOpacity>
+        </Pressable>
       )}
     </View>
   )
+
+  return onUploadPress ? <Pressable onPress={onUploadPress}>{body}</Pressable> : body
 }
 
 export const FileComponent = forwardRef<InputRef, FieldProps<FileField>>(
   ({ input: { value, onChange }, field }, ref) => {
-    const [loading, setLoading] = useState(false)
     const { imageOptions } = field || {}
 
     const handlePickFile = useCallback(async () => {
       try {
-        setLoading(true)
         let result: ImagePicker.ImagePickerResult | DocumentPicker.DocumentPickerResult
 
         if (field.accept?.includes('image')) {
@@ -193,8 +195,6 @@ export const FileComponent = forwardRef<InputRef, FieldProps<FileField>>(
         if (error instanceof Error) {
           console.error('Error picking file:', error.message)
         }
-      } finally {
-        setLoading(false)
       }
     }, [field, onChange, value])
 
@@ -227,12 +227,14 @@ export const FileComponent = forwardRef<InputRef, FieldProps<FileField>>(
     return (
       <View style={[styles.container, { borderColor }]}>
         <Text style={[styles.placeholder, { color: placeholderColor }]}>{field.placeholder}</Text>
-        <TouchableOpacity
-          style={styles.contentContainer}
-          onPress={() => void handlePickFile()}
-          disabled={loading}>
-          <FileView hasUpload imageOptions={imgOptions} value={value} />
-        </TouchableOpacity>
+        <View style={styles.contentContainer}>
+          <FileView
+            hasUpload
+            onUploadPress={() => void handlePickFile()}
+            imageOptions={imgOptions}
+            value={value}
+          />
+        </View>
       </View>
     )
   },

package/src/components/form/input/hooks/useInputStyles.ts

@@ -15,18 +15,15 @@ export const inputStyles = StyleSheet.create({
     borderRadius: 3,
   },
   inputSmall: {
-    paddingVertical: 6,
-    paddingHorizontal: 9,
+    padding: 8,
     borderRadius: 4,
   },
   inputMedium: {
-    paddingVertical: 8,
-    paddingHorizontal: 12,
+    padding: 12,
     borderRadius: 6,
   },
   inputLarge: {
-    paddingVertical: 10,
-    paddingHorizontal: 14,
+    padding: 14,
     borderRadius: 8,
   },
   inputTextSmall: {
@@ -110,7 +107,13 @@ export const useInputStyles = (
   const textColor = useTextColor()
   const usedSize = size ?? formSize
   return {
-    text: { ...inputTextSizeMap[usedSize], color: textColor, outlineWidth: 0 },
+    text: {
+      ...inputTextSizeMap[usedSize],
+      paddingTop: 0,
+      paddingBottom: 0,
+      color: textColor,
+      outlineWidth: 0,
+    },
     container: {
       ...inputStyles.input,
       ...(inEditable ? editableInputSizeMap[usedSize] : inputSizeMap[usedSize]),

package/src/components/form/input/input.tsx

@@ -192,11 +192,11 @@ const staticStyles = StyleSheet.create({
   },
   inputContainer: {
     width: '100%',
-    borderRadius: 4,
     paddingVertical: 1,
-    overflow: 'hidden',
+    // overflow: 'hidden',
   },
   errorText: {
+    paddingTop: 3,
     paddingHorizontal: 8,
     fontWeight: 500,
     // backgroundColor: 'red',

package/src/components/form/input/multipleSelect/index.tsx

@@ -48,20 +48,17 @@ const BaseMultipleSelectComponent = <T extends MultipleSelectField>(
 
   const colorMode = useColorMode()
   const inputRef = useRef<IDropdownRef>(null)
-  const {
-    container: inputStyles,
-    iconSize,
-    clearButtonSize,
-    text,
-    buttonContainer,
-    size,
-  } = useInputStyles(inEditable, field.size, formSize)
+  const { container, iconSize, clearButtonSize, text, buttonContainer, size } = useInputStyles(
+    inEditable,
+    field.size,
+    formSize,
+  )
   const iconColor = useIconColor()
   const textColor = useTextColor()
   const placeholderColor = usePlaceholderColor()
   const menuBg = useBackgroundColor(100)
   const inputBg = useBackgroundColor(50)
-  const selectedOptionBg = useColorModeValue('#ffffff55', '#ffffff22')
+  const selectedOptionBg = useColorModeValue('#ffffff22', '#ffffff22')
   const borderColor = useBorderColor()
 
   useImperativeHandle(ref, () => ({
@@ -73,13 +70,6 @@ const BaseMultipleSelectComponent = <T extends MultipleSelectField>(
     },
   }))
 
-  const defaultSelectedOptionStyle = useMemo(() => {
-    return {
-      paddingVertical: inputStyles.paddingVertical,
-      paddingHorizontal: inputStyles.paddingHorizontal,
-    }
-  }, [inputStyles])
-
   const RenderOptionText = (
     props: RenderSelectOptionProps<T['options'][number]['value'], T['options'][number]>,
   ) => {
@@ -96,9 +86,9 @@ const BaseMultipleSelectComponent = <T extends MultipleSelectField>(
       return RenderOption(props)
     }
     return (
-      <>
-        <Txt style={[defaultSelectedOptionStyle, text]}>{props.option.label}</Txt>
-      </>
+      <View style={{ padding: 6 }}>
+        <Txt style={[text]}>{props.option.label}</Txt>
+      </View>
     )
   }
 
@@ -110,11 +100,11 @@ const BaseMultipleSelectComponent = <T extends MultipleSelectField>(
     <View style={[styles.wrapper]}>
       <MultiSelect
         ref={inputRef}
-        style={[inputStyles, { borderColor }]}
+        style={[container, { borderColor, boxShadow: `0 0 10px ${borderColor}`, borderWidth: 0 }]}
         placeholderStyle={[text, { color: value?.length ? textColor : placeholderColor }]}
         containerStyle={{
           backgroundColor: menuBg,
-          boxShadow: `0 0 10px ${borderColor}`,
+          boxShadow: `0 0 6px ${borderColor}`,
           borderWidth: 0,
         }}
         inputSearchStyle={[styles.inputSearch, text, { backgroundColor: inputBg, borderWidth: 0 }]}
@@ -135,21 +125,33 @@ const BaseMultipleSelectComponent = <T extends MultipleSelectField>(
         }}
         onFocus={onFocus}
         onBlur={onBlur}
+        itemContainerStyle={{
+          backgroundColor: menuBg,
+          borderTopWidth: 1,
+          borderColor: borderColor,
+        }}
         renderItem={(item, selected) => (
-          <View style={{ backgroundColor: menuBg }}>
-            <View style={{ backgroundColor: selected ? selectedOptionBg : 'transparent' }}>
-              <RenderOptionText
-                value={item.value}
-                option={item}
-                colorMode={colorMode}
-                isSelected={!!selected}
-                size={size}
-              />
-            </View>
+          <View
+            style={{
+              backgroundColor: selected ? selectedOptionBg : 'transparent',
+              paddingVertical: 8,
+              paddingHorizontal: 12,
+              flexDirection: 'row',
+              alignItems: 'center',
+              width: '100%',
+            }}>
+            <RenderOptionText
+              value={item.value}
+              option={item}
+              colorMode={colorMode}
+              isSelected={!!selected}
+              size={size}
+            />
+            {selected ? <Ionicons name="checkmark" size={iconSize} color={iconColor} /> : null}
           </View>
         )}
         renderSelectedItem={item => (
-          <SelectedOptionContainer>
+          <SelectedOptionContainer style={{ marginTop: 10 }}>
             <RenderSelectedOptionText
               value={item.value}
               option={item}
@@ -189,7 +191,7 @@ const styles = StyleSheet.create({
     width: '100%',
   },
   defaultOption: {
-    padding: 10,
+    flex: 1,
   },
   iconStyle: {
     width: 20,
@@ -198,7 +200,6 @@ const styles = StyleSheet.create({
   inputSearch: {
     paddingVertical: 4,
     minHeight: 0,
-    height: 'auto',
     outlineWidth: 0,
     fontSize: 16,
   },
@@ -216,7 +217,6 @@ const styles = StyleSheet.create({
     borderLeftWidth: 1,
     borderTopRightRadius: 8,
     borderBottomRightRadius: 8,
-    height: '100%',
     justifyContent: 'center',
   },
 })

package/src/components/form/input/socialMedia/index.tsx

@@ -9,7 +9,8 @@ import React, {
   useMemo,
   useState,
 } from 'react'
-import { Modal, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native'
+import { Modal, StyleSheet, Text, TextInput, View } from 'react-native'
+import { Pressable } from 'react-native-gesture-handler'
 import { FieldProps } from '../../types'
 const siteToIcon: Record<SocialMediaSites, string> = {
   facebook: 'facebook',
@@ -42,11 +43,11 @@ const SocialMediaSiteInput: FC<{
 
   return (
     <>
-      <TouchableOpacity
+      <Pressable
         style={[styles.iconButton, !handle && styles.iconButtonInactive]}
         onPress={() => onModalClose()}>
         <Text style={styles.iconText}>{siteToIcon[site]}</Text>
-      </TouchableOpacity>
+      </Pressable>
 
       <Modal
         visible={isModalVisible}
@@ -65,9 +66,9 @@ const SocialMediaSiteInput: FC<{
               autoCapitalize="none"
               autoCorrect={false}
             />
-            <TouchableOpacity style={styles.closeButton} onPress={onModalClose}>
+            <Pressable style={styles.closeButton} onPress={onModalClose}>
               <Text style={styles.closeButtonText}>Close</Text>
-            </TouchableOpacity>
+            </Pressable>
           </View>
         </View>
       </Modal>

package/src/components/form/input/text/AutoResizeTextarea.tsx

@@ -10,7 +10,7 @@ export const AutoResizeTextarea = forwardRef<TextInput, TextInputProps>(
   ({ style, value, onChangeText, ...props }, ref) => {
     const textColor = useTextColor()
 
-    const { handleChange, height, setHeight } = useWebAutoResize(onChangeText, style)
+    const { handleChange, height } = useWebAutoResize(onChangeText, style)
 
     const iconColor = useIconColor()
 
@@ -18,9 +18,6 @@ export const AutoResizeTextarea = forwardRef<TextInput, TextInputProps>(
       <TextInput
         ref={ref}
         cursorColor={iconColor}
-        onContentSizeChange={e => {
-          setHeight(e.nativeEvent.contentSize.height)
-        }}
         multiline
         style={[styles.textarea, { color: textColor, height }, style]}
         value={value}
@@ -33,7 +30,6 @@ export const AutoResizeTextarea = forwardRef<TextInput, TextInputProps>(
 const styles = StyleSheet.create({
   textarea: {
     width: '100%',
-    minHeight: 18,
     backgroundColor: 'transparent',
     textAlignVertical: 'top',
     outlineWidth: 0,