@chem-po/react-native 0.0.30 → 0.0.32

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

@@ -2,7 +2,8 @@ import { InputRef } from '@chem-po/core'
 import { TextField, usePlaceholderColor, useTextColor } from '@chem-po/react'
 import { Ionicons } from '@expo/vector-icons'
 import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react'
-import { StyleSheet, TextInput, TouchableOpacity, View } from 'react-native'
+import { StyleSheet, TextInput, View } from 'react-native'
+import { Pressable } from 'react-native-gesture-handler'
 import { FieldProps } from '../../types'
 import { useInputStyles } from '../hooks/useInputStyles'
 import { TextAreaComponent } from './textarea'
@@ -63,9 +64,9 @@ export const TextComponent = forwardRef<InputRef, FieldProps<TextField>>(
     return type === 'password' ? (
       <View style={[conatinerStyles, styles.passwordContainer, style]}>
         {body}
-        <TouchableOpacity style={styles.eyeIcon} onPress={() => setIsHidden(!isHidden)}>
+        <Pressable style={styles.eyeIcon} onPress={() => setIsHidden(!isHidden)}>
           <Ionicons name={isHidden ? 'eye' : 'eye-off'} size={20} color="#666" />
-        </TouchableOpacity>
+        </Pressable>
       </View>
     ) : (
       <View style={[conatinerStyles, style]}>{body}</View>

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

@@ -16,7 +16,7 @@ export const TextAreaComponent = forwardRef<TextInput, FieldProps<TextField>>(
       <View style={[container, style]}>
         <AutoResizeTextarea
           ref={ref}
-          style={[{ color, ...text }, inputStyle]}
+          style={[{ color, ...text, paddingBottom: inEditable ? 0 : 4 }, inputStyle]}
           placeholder={field.placeholder}
           placeholderTextColor={placeholderColor}
           multiline

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

@@ -39,7 +39,10 @@ export const useWebAutoResize = (
   style: StyleProp<TextStyle> | undefined,
 ) => {
   const flattenedStyle = useMemo(() => StyleSheet.flatten(style), [style])
-  const [height, setHeight] = useState((flattenedStyle.fontSize ?? 18) + 4)
+  const fontSize = useMemo(() => flattenedStyle.fontSize ?? 16, [flattenedStyle.fontSize])
+  const [height, setHeight] = useState<number | 'auto'>(
+    Platform.OS === 'web' ? fontSize + 10 : 'auto',
+  )
   const spanRef = useRef<HTMLSpanElement>(
     Platform.OS === 'web' ? document.createElement('span') : null,
   )
@@ -55,15 +58,14 @@ export const useWebAutoResize = (
         ? (e: string) => {
             if (spanRef.current) {
               const height = getWebTextHeight(e, spanRef)
-              setHeight((height ?? 18) + 4)
+              setHeight((height ?? fontSize) + 8)
               if (onChangeText) onChangeText(e)
             }
           }
         : onChangeText,
-    [onChangeText],
+    [onChangeText, fontSize],
   )
   return {
-    getWebTextHeight,
     handleChange,
     height,
     setHeight,

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

@@ -2,7 +2,8 @@ import { InputRef, padZeros } from '@chem-po/core'
 import { TimeField, useIconColor } from '@chem-po/react'
 import { Ionicons } from '@expo/vector-icons'
 import React, { forwardRef, useImperativeHandle, useMemo, useState } from 'react'
-import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+import { StyleSheet, Text, View } from 'react-native'
+import { Pressable } from 'react-native-gesture-handler'
 import { Portal } from 'react-native-paper'
 import { TimePickerModal } from 'react-native-paper-dates'
 import { FieldProps } from '../../types'
@@ -71,7 +72,7 @@ export const TimeInput = forwardRef<InputRef, FieldProps<TimeField>>(
 
     return (
       <View style={styles.container}>
-        <TouchableOpacity
+        <Pressable
           style={[styles.button, inputStyles]}
           onPress={() => {
             setVisible(true)
@@ -90,7 +91,7 @@ export const TimeInput = forwardRef<InputRef, FieldProps<TimeField>>(
               />
             ) : null}
           </View>
-        </TouchableOpacity>
+        </Pressable>
         <Portal>
           <TimePickerModal
             visible={visible}

package/src/components/form/view/select.tsx

@@ -24,7 +24,11 @@ export const DefaultRenderOption = <
 >({
   option,
 }: RenderSelectOptionProps<Value, Option>) => {
-  return <Txt style={inputViewStyles.value}>{option.label}</Txt>
+  return (
+    <View style={{ padding: 6 }}>
+      <Txt style={inputViewStyles.value}>{option.label}</Txt>
+    </View>
+  )
 }
 
 export const SelectFieldView = ({

package/src/components/image/ImageViewModal.tsx

@@ -1,8 +1,13 @@
 import { useScreen, useToast } from '@chem-po/react'
 import { Ionicons } from '@expo/vector-icons'
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
-import { Image, Modal, StyleSheet, TouchableOpacity, View } from 'react-native'
-import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler'
+import { Image, Modal, Platform, SafeAreaView, StyleSheet, View } from 'react-native'
+import {
+  Gesture,
+  GestureDetector,
+  GestureHandlerRootView,
+  Pressable,
+} from 'react-native-gesture-handler'
 import Animated, { useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated'
 import { downloadFile } from '../../utils/downloadFile'
 import { LoadingLogo } from '../loading/Loading'
@@ -53,11 +58,13 @@ export const ImageViewModal: React.FC<ImageViewModalProps> = ({
   }, [screenHeight, screenWidth, imageSize, loading])
 
   const onLoadStart = useCallback(() => setLoading(true), [])
-  const onLoad = useCallback((e: any) => {
-    const { width: naturalWidth, height: naturalHeight } = e.nativeEvent.source
-    setImageSize({ width: naturalWidth, height: naturalHeight })
-    setLoading(false)
-  }, [])
+  const onLoad = useCallback(() => {
+    if (!src) return
+    Image.getSize(src, (width, height) => {
+      setImageSize({ width, height })
+      setLoading(false)
+    })
+  }, [src])
 
   // Reset zoom and pan when modal opens/closes
   const resetTransform = useCallback(() => {
@@ -91,7 +98,10 @@ export const ImageViewModal: React.FC<ImageViewModalProps> = ({
       const usedName = filename ?? `image_${Date.now()}.jpg`
 
       await downloadFile(src, usedName, fileType)
-      showSuccess('Image downloaded successfully')
+      if (Platform.OS === 'android') {
+        showSuccess('Image downloaded successfully')
+        return
+      }
     } catch (error: unknown) {
       if (error instanceof Error) {
         console.error('Error downloading image:', error.message)
@@ -203,53 +213,51 @@ export const ImageViewModal: React.FC<ImageViewModalProps> = ({
 
   return (
     <Modal visible={isOpen} transparent animationType="fade" onRequestClose={onClose}>
-      <GestureHandlerRootView style={styles.gestureRoot}>
-        <View style={styles.modalOverlay}>
-          <TouchableOpacity
-            style={styles.backgroundTouchable}
-            activeOpacity={1}
-            onPress={onClose}
-          />
-          <View style={styles.contentContainer}>
-            <GestureDetector gesture={combinedGestures}>
-              <Animated.View
-                style={[
-                  styles.imageContainer,
-                  {
-                    width,
-                    height,
-                    opacity: loading ? 0 : 1,
-                  },
-                  animatedStyle,
-                ]}>
-                <Image
-                  source={src ? { uri: src } : undefined}
-                  style={styles.image}
-                  onLoadStart={onLoadStart}
-                  onLoad={onLoad}
-                  resizeMode="contain"
-                />
-              </Animated.View>
-            </GestureDetector>
+      <SafeAreaView style={{ flex: 1 }}>
+        <GestureHandlerRootView style={styles.gestureRoot}>
+          <View style={styles.modalOverlay}>
+            <Pressable style={styles.backgroundTouchable} onPress={onClose} />
+            <View style={styles.contentContainer}>
+              <GestureDetector gesture={combinedGestures}>
+                <Animated.View
+                  style={[
+                    styles.imageContainer,
+                    {
+                      width,
+                      height,
+                      opacity: loading ? 0 : 1,
+                    },
+                    animatedStyle,
+                  ]}>
+                  <Image
+                    source={src ? { uri: src } : undefined}
+                    style={styles.image}
+                    onLoadStart={onLoadStart}
+                    onLoad={onLoad}
+                    resizeMode="contain"
+                  />
+                </Animated.View>
+              </GestureDetector>
 
-            {withDownload && (
-              <TouchableOpacity style={styles.downloadButton} onPress={() => void handleDownload()}>
-                <Ionicons name="download" size={24} color="white" />
-              </TouchableOpacity>
-            )}
+              {withDownload && (
+                <Pressable style={styles.downloadButton} onPress={() => void handleDownload()}>
+                  <Ionicons name="download" size={24} color="white" />
+                </Pressable>
+              )}
 
-            <TouchableOpacity style={styles.closeButton} onPress={onClose}>
-              <Ionicons name="close" size={24} color="white" />
-            </TouchableOpacity>
+              <Pressable style={styles.closeButton} onPress={onClose}>
+                <Ionicons name="close" size={24} color="white" />
+              </Pressable>
 
-            {loading || !src ? (
-              <View style={styles.loadingContainer}>
-                <LoadingLogo isLoading={loading} size={70} />
-              </View>
-            ) : null}
+              {loading || !src ? (
+                <View style={styles.loadingContainer}>
+                  <LoadingLogo isLoading={loading} size={70} />
+                </View>
+              ) : null}
+            </View>
           </View>
-        </View>
-      </GestureHandlerRootView>
+        </GestureHandlerRootView>
+      </SafeAreaView>
     </Modal>
   )
 }
@@ -303,6 +311,7 @@ const styles = StyleSheet.create({
   },
   loadingContainer: {
     ...StyleSheet.absoluteFillObject,
+    pointerEvents: 'none',
     justifyContent: 'center',
     alignItems: 'center',
   },

package/src/components/layout/CollapseHorizontal.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react'
+import React, { useCallback, useLayoutEffect, useRef, useState } from 'react'
 import { LayoutChangeEvent, StyleProp, View, ViewStyle } from 'react-native'
 import Animated, {
   useAnimatedStyle,
@@ -18,26 +18,34 @@ export const CollapseHorizontal = ({
   duration?: number
   style?: StyleProp<ViewStyle>
 }) => {
-  const contentWidth = useSharedValue(0)
+  const contentRef = useRef<View>(null)
+  const [contentWidth, setContentWidth] = useState(0)
   const width = useSharedValue(0)
   const opacity = useSharedValue(0)
-
   const handleLayout = useCallback(
     (event: LayoutChangeEvent) => {
-      contentWidth.value = event.nativeEvent.layout.width
+      setContentWidth(event.nativeEvent.layout.width)
       // Initialize width if component is initially visible
       if (isIn && width.value === 0) {
-        width.value = contentWidth.value
+        width.value = event.nativeEvent.layout.width
         opacity.value = 1
       }
     },
-    [isIn, contentWidth, width, opacity],
+    [isIn, width, opacity],
   )
 
+  useLayoutEffect(() => {
+    if (contentRef.current) {
+      contentRef.current.measure((_x, _y, width) => {
+        setContentWidth(width)
+      })
+    }
+  }, [])
+
   React.useEffect(() => {
     if (isIn) {
       // Fade in: width first, then opacity
-      width.value = withTiming(contentWidth.value, {
+      width.value = withTiming(contentWidth, {
         duration,
       })
       opacity.value = withSequence(
@@ -58,7 +66,7 @@ export const CollapseHorizontal = ({
         }),
       )
     }
-  }, [isIn, contentWidth.value, duration, width, opacity])
+  }, [isIn, contentWidth, duration, width, opacity])
 
   const animatedStyle = useAnimatedStyle(() => ({
     width: width.value,
@@ -74,8 +82,10 @@ export const CollapseHorizontal = ({
         },
         animatedStyle,
       ]}>
-      <View style={[{ position: 'absolute' }, style]} onLayout={handleLayout}>
-        {children}
+      <View style={{ position: 'absolute', width: 'auto' }}>
+        <View style={style} onLayout={handleLayout} ref={contentRef}>
+          {children}
+        </View>
       </View>
     </Animated.View>
   )

package/src/components/loading/LoadingImage.tsx

@@ -1,14 +1,15 @@
 import { useMounted } from '@chem-po/react'
 import { Ionicons } from '@expo/vector-icons'
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { DimensionValue, Image, StyleSheet, TouchableOpacity, View, ViewStyle } from 'react-native'
+import { DimensionValue, Image, StyleSheet, View, ViewStyle } from 'react-native'
+import { Pressable } from 'react-native-gesture-handler'
 import { ImageViewModal } from '../image/ImageViewModal'
 import { LoadingLogo } from './Loading'
 
 export interface LoadingImageProps {
   src?: string | null
   loadingOverride?: boolean
-  onLoad?: (e: any) => void
+  onLoad?: (dims: { width: number; height: number }) => void
   filename?: string
   fileType?: string
   withFullView?: boolean
@@ -41,12 +42,13 @@ export const LoadingImage = ({
   const [viewing, setViewing] = useState(false)
   const mounted = useMounted(100)
 
-  const handleImageLoad = useCallback(
-    (e: any) => {
-      if (onLoad) onLoad(e)
-    },
-    [onLoad],
-  )
+  const handleImageLoad = useCallback(() => {
+    if (onLoad && src) {
+      Image.getSize(src, (width, height) => {
+        onLoad({ width, height })
+      })
+    }
+  }, [onLoad, src])
 
   const [prevSrc, setPrevSrc] = useState(src)
   useEffect(() => {
@@ -65,7 +67,6 @@ export const LoadingImage = ({
           opacity: src && !loading ? 1 : 0,
         },
       ]}
-      // onLoadStart={() => setImageLoading(true)}
       onLoadEnd={() => setImageLoading(false)}
       onLoad={handleImageLoad}
       resizeMode={src ? 'cover' : 'contain'}
@@ -86,23 +87,22 @@ export const LoadingImage = ({
       {!withFullView || buttonFullView ? (
         ImageComponent
       ) : (
-        <TouchableOpacity
-          activeOpacity={0.9}
+        <Pressable
           onPress={() => setViewing(true)}
           style={{
-            width: width ? undefined : '100%',
-            height: height ? undefined : '100%',
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
           }}>
           {ImageComponent}
-        </TouchableOpacity>
+        </Pressable>
       )}
       {buttonFullView && (
-        <TouchableOpacity
-          style={styles.fullViewButton}
-          onPress={() => setViewing(true)}
-          activeOpacity={0.7}>
+        <Pressable style={styles.fullViewButton} onPress={() => setViewing(true)}>
           <Ionicons name="expand" size={20} color="white" style={styles.fullViewIcon} />
-        </TouchableOpacity>
+        </Pressable>
       )}
       <View
         style={[

package/src/components/theme/colorMode/DarkModeToggle.tsx

@@ -1,7 +1,8 @@
 import { useBackgroundColor, useIconColor, useTheme } from '@chem-po/react'
 import { Ionicons } from '@expo/vector-icons'
 import React from 'react'
-import { StyleSheet, TouchableOpacity, View } from 'react-native'
+import { StyleSheet, View } from 'react-native'
+import { Pressable } from 'react-native-gesture-handler'
 
 export const DarkModeToggle = () => {
   const { colorMode, toggleColorMode } = useTheme()
@@ -11,7 +12,7 @@ export const DarkModeToggle = () => {
   const iconName = isDark ? 'moon' : 'sunny'
   const bg = useBackgroundColor(100)
   return (
-    <TouchableOpacity
+    <Pressable
       onPress={toggleColorMode}
       style={[
         styles.button,
@@ -20,7 +21,7 @@ export const DarkModeToggle = () => {
         },
       ]}>
       <Ionicons name={iconName} size={16} color={iconColor} />
-    </TouchableOpacity>
+    </Pressable>
   )
 }
 

package/src/utils/downloadFile.ts

@@ -1,36 +1,46 @@
 import * as FileSystem from 'expo-file-system'
+import { downloadAsync } from 'expo-file-system'
+import { shareAsync } from 'expo-sharing'
+import { Platform } from 'react-native'
 
 export const downloadFile = async (uri: string, filename: string, fileType: string) => {
-  const permissions = await FileSystem.StorageAccessFramework.requestDirectoryPermissionsAsync()
-  if (!permissions.granted) {
-    return
+  if (Platform.OS === 'android') {
+    const permissions = await FileSystem.StorageAccessFramework.requestDirectoryPermissionsAsync()
+    if (!permissions.granted) {
+      throw new Error('Permission not granted')
+    }
+
+    // Download to temporary location first
+    const tempFileUri = `${FileSystem.cacheDirectory}${filename}`
+
+    // Download the file to temporary location
+    await FileSystem.downloadAsync(uri, tempFileUri)
+
+    // Read the temporary file as base64
+    const base64Content = await FileSystem.readAsStringAsync(tempFileUri, {
+      encoding: FileSystem.EncodingType.Base64,
+    })
+
+    // Create a file within the selected directory using SAF
+    const fileUri = await FileSystem.StorageAccessFramework.createFileAsync(
+      permissions.directoryUri,
+      filename,
+      fileType,
+    )
+
+    // Write the content to the SAF file
+    await FileSystem.StorageAccessFramework.writeAsStringAsync(fileUri, base64Content, {
+      encoding: FileSystem.EncodingType.Base64,
+    })
+
+    // Clean up temporary file
+    await FileSystem.deleteAsync(tempFileUri, { idempotent: true })
+
+    return { uri: fileUri }
   }
-
-  // Download to temporary location first
-  const tempFileUri = `${FileSystem.cacheDirectory}${filename}`
-
-  // Download the file to temporary location
-  await FileSystem.downloadAsync(uri, tempFileUri)
-
-  // Read the temporary file as base64
-  const base64Content = await FileSystem.readAsStringAsync(tempFileUri, {
-    encoding: FileSystem.EncodingType.Base64,
-  })
-
-  // Create a file within the selected directory using SAF
-  const fileUri = await FileSystem.StorageAccessFramework.createFileAsync(
-    permissions.directoryUri,
-    filename,
-    fileType,
-  )
-
-  // Write the content to the SAF file
-  await FileSystem.StorageAccessFramework.writeAsStringAsync(fileUri, base64Content, {
-    encoding: FileSystem.EncodingType.Base64,
-  })
-
-  // Clean up temporary file
-  await FileSystem.deleteAsync(tempFileUri, { idempotent: true })
-
-  return { uri: fileUri }
+  if (!FileSystem.documentDirectory) {
+    throw new Error('Document directory not found')
+  }
+  const result = await downloadAsync(uri, FileSystem.documentDirectory + filename)
+  return shareAsync(result.uri)
 }