@chem-po/react-native 0.0.41 → 0.0.43

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

@@ -6,7 +6,7 @@ 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 { scheduleOnRN } from 'react-native-worklets'
 import { FieldProps } from '../../types'
 import { DateInputClearButton } from '../common/InputClearButton'
 import { useInputColor } from '../hooks/useInputColor'
@@ -55,7 +55,7 @@ export const DateInput = forwardRef<InputRef, FieldProps<DateField>>(
     const maxDateObj = maxDate === 'now' ? new Date() : maxDate ? new Date(maxDate) : undefined
 
     const mainTap = Gesture.Tap().onStart(() => {
-      runOnJS(onFocus)()
+      scheduleOnRN(onFocus)
     })
 
     return (

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

@@ -6,7 +6,7 @@ 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 { scheduleOnRN } from 'react-native-worklets'
 import { FieldProps } from '../../types'
 import { DateInputClearButton } from '../common/InputClearButton'
 import { useInputColor } from '../hooks/useInputColor'
@@ -96,7 +96,7 @@ export const DateTimeInput = forwardRef<InputRef, FieldProps<DateTimeField>>(
     const inputColor = useInputColor(value)
 
     const mainTap = Gesture.Tap().onStart(() => {
-      runOnJS(handleFocusDate)()
+      scheduleOnRN(handleFocusDate)
     })
 
     return (

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

@@ -13,7 +13,7 @@ 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 } from 'react'
-import { Platform, StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native'
+import { Platform, StyleProp, StyleSheet, Text, TextStyle, View, ViewStyle } from 'react-native'
 import { Pressable } from 'react-native-gesture-handler'
 import { downloadFile } from '../../../../utils/downloadFile'
 import { LoadingImage } from '../../../loading/LoadingImage'
@@ -56,6 +56,7 @@ export const FileView = ({
   nonImageContainerStyle,
   withDownload,
   onUploadPress,
+  textStyle,
 }: {
   value?: FileValue | null
   hasUpload?: boolean
@@ -64,6 +65,7 @@ export const FileView = ({
   nonImageContainerStyle?: StyleProp<ViewStyle>
   withDownload?: boolean
   onUploadPress?: () => void
+  textStyle?: StyleProp<TextStyle>
 }) => {
   const { storagePath, dataUrl } = value ?? {}
   const missingFile = !dataUrl && !storagePath
@@ -131,7 +133,7 @@ export const FileView = ({
         <Ionicons name="document" size={24} color={iconColor} />
       </View>
       <View style={styles.filenameContainer}>
-        <Text numberOfLines={1} style={[styles.filename, { color: fileNameColor }]}>
+        <Text numberOfLines={1} style={[styles.filename, { color: fileNameColor }, textStyle]}>
           {value.filename}
         </Text>
       </View>

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

@@ -4,7 +4,6 @@ import {
   useBackgroundColor,
   useBorderColor,
   useColorMode,
-  useColorModeValue,
   useIconColor,
   usePlaceholderColor,
   useTextColor,
@@ -58,7 +57,7 @@ const BaseMultipleSelectComponent = <T extends MultipleSelectField>(
   const placeholderColor = usePlaceholderColor()
   const menuBg = useBackgroundColor(100)
   const inputBg = useBackgroundColor(50)
-  const selectedOptionBg = useColorModeValue('#ffffff22', '#ffffff22')
+  const selectedOptionBg = useBackgroundColor(50)
   const borderColor = useBorderColor()
 
   useImperativeHandle(ref, () => ({
@@ -86,7 +85,7 @@ const BaseMultipleSelectComponent = <T extends MultipleSelectField>(
       return RenderOption(props)
     }
     return (
-      <View style={{ padding: 6 }}>
+      <View style={[container, { width: 'auto' }]}>
         <Txt style={[text]}>{props.option.label}</Txt>
       </View>
     )
@@ -100,11 +99,11 @@ const BaseMultipleSelectComponent = <T extends MultipleSelectField>(
     <View style={[styles.wrapper]}>
       <MultiSelect
         ref={inputRef}
-        style={[container, { borderColor, boxShadow: `0 0 10px ${borderColor}`, borderWidth: 0 }]}
+        style={[container, { borderColor, borderBottomWidth: 1, borderRadius: 0 }]}
         placeholderStyle={[text, { color: value?.length ? textColor : placeholderColor }]}
         containerStyle={{
           backgroundColor: menuBg,
-          boxShadow: `0 0 6px ${borderColor}`,
+          boxShadow: `0 0 10px #00000066`,
           borderWidth: 0,
         }}
         inputSearchStyle={[styles.inputSearch, text, { backgroundColor: inputBg, borderWidth: 0 }]}
@@ -133,7 +132,7 @@ const BaseMultipleSelectComponent = <T extends MultipleSelectField>(
         renderItem={(item, selected) => (
           <View
             style={{
-              backgroundColor: selected ? selectedOptionBg : 'transparent',
+              backgroundColor: selected ? selectedOptionBg : menuBg,
               paddingVertical: 8,
               paddingHorizontal: 12,
               flexDirection: 'row',

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

@@ -2,7 +2,6 @@ import { InputRef, RenderSelectOptionProps } from '@chem-po/core'
 import {
   SelectField,
   useBackgroundColor,
-  useBorderColor,
   useColorMode,
   useIconColor,
   usePlaceholderColor,
@@ -33,14 +32,11 @@ const BaseSelectComponent = <T extends SelectField>(
   const colorMode = useColorMode()
 
   const inputRef = useRef<IDropdownRef>(null)
-  const {
-    container: inputStyles,
-    iconSize,
-    text,
-    size,
-    clearButtonSize,
-    buttonContainer,
-  } = useInputStyles(inEditable, field.size, formSize)
+  const { container, iconSize, text, size, clearButtonSize, buttonContainer } = useInputStyles(
+    inEditable,
+    field.size,
+    formSize,
+  )
 
   useImperativeHandle(ref, () => ({
     focus: () => {
@@ -64,19 +60,18 @@ const BaseSelectComponent = <T extends SelectField>(
   const placeholderColor = usePlaceholderColor()
   const menuBg = useBackgroundColor(100)
   const selectedOptionBg = useBackgroundColor(50)
-  const borderColor = useBorderColor()
 
   return (
     <View style={styles.wrapper}>
       <Dropdown
         ref={inputRef}
-        style={[inputStyles, { borderColor }]}
+        style={container}
         placeholderStyle={[text, { color: placeholderColor }]}
         containerStyle={{
           backgroundColor: menuBg,
           borderWidth: 0,
           borderColor: 'transparent',
-          boxShadow: `0 0 10px ${borderColor}`,
+          boxShadow: `0 0 10px #00000066`,
         }}
         selectedTextStyle={text}
         inputSearchStyle={[

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

@@ -1,7 +1,7 @@
 import { ImageViewOptions, InputSize } from '@chem-po/core'
 import { FileField, usePlaceholderColor } from '@chem-po/react'
 import React, { useMemo } from 'react'
-import { StyleSheet, Text, View, ViewStyle } from 'react-native'
+import { StyleProp, StyleSheet, Text, TextStyle, View, ViewStyle } from 'react-native'
 import { Txt } from '../../text/Txt'
 import { FileView } from '../input/file'
 import { useInputStyles } from '../input/hooks/useInputStyles'
@@ -42,11 +42,13 @@ export const FileFieldView = ({
   noLabel,
   style,
   size: sizeProp,
+  textStyle,
 }: {
   field: FileField
   value: any
   noLabel?: boolean
   style?: ViewStyle
+  textStyle?: StyleProp<TextStyle>
   size?: InputSize
 }) => {
   const { imageOptions, placeholder, size } = field
@@ -66,11 +68,11 @@ export const FileFieldView = ({
       {!noLabel && <Text style={styles.label}>{placeholder}</Text>}
       {value ? (
         <View style={styles.fileContainer}>
-          <FileView imageOptions={options} value={value} />
+          <FileView textStyle={textStyle} imageOptions={options} value={value} />
         </View>
       ) : (
         <View style={container}>
-          <Txt style={[text, { color: placeholderColor }]}>None</Txt>
+          <Txt style={[text, { color: placeholderColor }, textStyle]}>None</Txt>
         </View>
       )}
     </View>

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

@@ -1,7 +1,7 @@
 import { displayField, InputSize } from '@chem-po/core'
 import { Field, FormatField, usePlaceholderColor } from '@chem-po/react'
 import React, { useMemo } from 'react'
-import { StyleSheet, View, ViewStyle } from 'react-native'
+import { StyleProp, StyleSheet, TextStyle, View, ViewStyle } from 'react-native'
 import { Txt } from '../../text'
 import { useInputStyles } from '../input/hooks/useInputStyles'
 import { FileFieldView } from './file'
@@ -23,11 +23,13 @@ const DefaultFieldView = ({
   style,
   size: sizeProp,
   inEditable,
+  textStyle,
 }: {
   field: Field
   value: any
   noLabel?: boolean
   style?: ViewStyle
+  textStyle?: StyleProp<TextStyle>
   size?: InputSize
   inEditable?: boolean
 }) => {
@@ -48,7 +50,7 @@ const DefaultFieldView = ({
   return (
     <View style={[styles.container, containerStyles, { backgroundColor: 'transparent' }, style]}>
       {!noLabel && <Txt style={[inputViewStyles.label, text]}>{placeholder}</Txt>}
-      <Txt style={[text, { color: hasValue ? undefined : placeholderColor }]}>
+      <Txt style={[text, { color: hasValue ? text.color : placeholderColor }, textStyle]}>
         {hasValue ? formatted : 'None'}
       </Txt>
     </View>
@@ -60,6 +62,7 @@ export const FieldView = ({
   value,
   noLabel,
   style,
+  textStyle,
   size,
   inEditable,
 }: {
@@ -67,6 +70,7 @@ export const FieldView = ({
   value?: any
   noLabel?: boolean
   style?: ViewStyle
+  textStyle?: StyleProp<TextStyle>
   size?: InputSize
   inEditable?: boolean
 }) => {
@@ -75,6 +79,7 @@ export const FieldView = ({
       return (
         <SelectFieldView
           style={style}
+          textStyle={textStyle}
           field={field}
           value={value}
           noLabel={noLabel}
@@ -88,13 +93,21 @@ export const FieldView = ({
           style={style}
           field={field}
           value={value}
+          textStyle={textStyle}
           noLabel={noLabel}
           size={size}
         />
       )
     case 'file':
       return (
-        <FileFieldView style={style} field={field} value={value} noLabel={noLabel} size={size} />
+        <FileFieldView
+          textStyle={textStyle}
+          style={style}
+          field={field}
+          value={value}
+          noLabel={noLabel}
+          size={size}
+        />
       )
     default:
       return (
@@ -102,6 +115,7 @@ export const FieldView = ({
           style={style}
           field={field}
           value={value}
+          textStyle={textStyle}
           noLabel={noLabel}
           size={size}
           inEditable={inEditable}

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

@@ -1,7 +1,7 @@
-import { InputSize } from '@chem-po/core'
+import { BaseSelectOption, InputSize } from '@chem-po/core'
 import { MultipleSelectField, useColorMode, usePlaceholderColor } from '@chem-po/react'
 import { useMemo } from 'react'
-import React, { StyleSheet, Text, View, ViewStyle } from 'react-native'
+import React, { StyleProp, StyleSheet, Text, TextStyle, View, ViewStyle } from 'react-native'
 import { Txt } from '../../text/Txt'
 import { useInputStyles } from '../input/hooks/useInputStyles'
 import { SelectedOptionContainer } from '../input/multipleSelect'
@@ -31,16 +31,23 @@ const styles = StyleSheet.create({
   },
 })
 
-export const MultipleSelectFieldView = <F extends MultipleSelectField>({
+type NativeMultipleSelectField<
+  Value extends any[] = string[],
+  Option extends BaseSelectOption<Value[number]> = BaseSelectOption<Value[number]>,
+> = MultipleSelectField<Value, Option>
+
+export const MultipleSelectFieldView = <F extends NativeMultipleSelectField>({
   field,
   value,
   noLabel,
   size: sizeProp,
   style,
+  textStyle,
 }: {
   field: F
   value?: F['defaultValue']
   noLabel?: boolean
+  textStyle?: StyleProp<TextStyle>
   size?: InputSize
   style?: ViewStyle
 }) => {
@@ -49,12 +56,6 @@ export const MultipleSelectFieldView = <F extends MultipleSelectField>({
   const colorMode = useColorMode()
   const { size, text, container } = useInputStyles(true, field.size, sizeProp)
   const placeholderColor = usePlaceholderColor()
-  const selectedOptionStyle = useMemo<ViewStyle>(() => {
-    return {
-      paddingHorizontal: container.paddingHorizontal,
-      paddingVertical: container.paddingVertical,
-    }
-  }, [container])
   const RenderOption = useMemo(() => customRender ?? DefaultRenderOption, [customRender])
   return (
     <View style={[styles.container, style]}>
@@ -62,10 +63,11 @@ export const MultipleSelectFieldView = <F extends MultipleSelectField>({
       {value?.length ? (
         <View style={styles.optionsContainer}>
           {selectedOptions.map(o => (
-            <SelectedOptionContainer key={o.value} style={selectedOptionStyle}>
+            <SelectedOptionContainer key={o.value} style={[container, { width: 'auto' }]}>
               <RenderOption
                 option={o}
                 value={o.value}
+                textStyle={[text, textStyle]}
                 colorMode={colorMode}
                 isSelected
                 size={size}
@@ -75,7 +77,7 @@ export const MultipleSelectFieldView = <F extends MultipleSelectField>({
         </View>
       ) : (
         <View style={container}>
-          <Txt style={[text, { color: placeholderColor }]}>None</Txt>
+          <Txt style={[text, { color: placeholderColor }, textStyle]}>None</Txt>
         </View>
       )}
     </View>

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

@@ -1,7 +1,7 @@
-import { BaseSelectOption, InputSize, RenderSelectOptionProps } from '@chem-po/core'
+import { InputSize, RenderSelectOptionProps } from '@chem-po/core'
 import { SelectField, useColorMode, usePlaceholderColor } from '@chem-po/react'
-import React from 'react'
-import { StyleSheet, Text, View, ViewStyle } from 'react-native'
+import React, { useMemo } from 'react'
+import { StyleProp, StyleSheet, Text, TextStyle, View, ViewStyle } from 'react-native'
 import { Txt } from '../../text'
 import { useInputStyles } from '../input/hooks/useInputStyles'
 import { inputViewStyles } from './styles'
@@ -18,31 +18,35 @@ const styles = StyleSheet.create({
   },
 })
 
-export const DefaultRenderOption = <
-  Value = string,
-  Option extends BaseSelectOption<Value> = BaseSelectOption<Value>,
->({
+export const DefaultRenderOption = ({
   option,
-}: RenderSelectOptionProps<Value, Option>) => {
+  containerStyle,
+  textStyle,
+}: RenderSelectOptionProps & {
+  containerStyle?: StyleProp<ViewStyle>
+  textStyle?: StyleProp<TextStyle>
+}) => {
   return (
-    <View style={{ padding: 6 }}>
-      <Txt style={inputViewStyles.value}>{option.label}</Txt>
+    <View style={containerStyle}>
+      <Txt style={[inputViewStyles.value, textStyle]}>{option.label}</Txt>
     </View>
   )
 }
 
-export const SelectFieldView = ({
+export const SelectFieldView = <F extends SelectField>({
   field,
   value,
   noLabel,
   style,
   size: sizeProp,
   inEditable,
+  textStyle,
 }: {
-  field: SelectField
-  value: any
+  field: F
+  value: F['defaultValue']
   noLabel?: boolean
   style?: ViewStyle
+  textStyle?: StyleProp<TextStyle>
   size?: InputSize
   inEditable?: boolean
 }) => {
@@ -51,23 +55,27 @@ export const SelectFieldView = ({
   const placeholderColor = usePlaceholderColor()
   const { size, text, container } = useInputStyles(inEditable, field.size, sizeProp)
   const selectedOption = field.options.find(o => o.value === value)
-  const RenderOption = customRender ?? DefaultRenderOption
+  const RenderOption = useMemo(() => customRender ?? DefaultRenderOption, [customRender])
   return (
     <View style={[styles.container, style]}>
       {!noLabel && (
-        <Text style={[styles.label, text, { color: placeholderColor }]}>{placeholder}</Text>
+        <Text style={[styles.label, text, { color: placeholderColor }, textStyle]}>
+          {placeholder}
+        </Text>
       )}
       {selectedOption ? (
         <RenderOption
           value={selectedOption.value}
           option={selectedOption}
+          containerStyle={container}
+          textStyle={[text, textStyle]}
           colorMode={colorMode}
           isSelected={true}
           size={size}
         />
       ) : (
         <View style={container}>
-          <Txt style={[text, { color: placeholderColor }]}>None</Txt>
+          <Txt style={[text, { color: placeholderColor }, textStyle]}>None</Txt>
         </View>
       )}
     </View>

package/src/components/image/ImageViewModal.tsx

@@ -1,7 +1,7 @@
 import { useScreen, useToast } from '@chem-po/react'
 import { Ionicons } from '@expo/vector-icons'
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
-import { Image, Modal, Platform, SafeAreaView, StyleSheet, View } from 'react-native'
+import { Image, Modal, Platform, StyleSheet, View } from 'react-native'
 import {
   Gesture,
   GestureDetector,
@@ -9,6 +9,7 @@ import {
   Pressable,
 } from 'react-native-gesture-handler'
 import Animated, { useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated'
+import { SafeAreaView } from 'react-native-safe-area-context'
 import { downloadFile } from '../../utils/downloadFile'
 import { LoadingLogo } from '../loading/Loading'
 

package/src/components/loading/CircularProgress.tsx

@@ -1,4 +1,4 @@
-import { useColorModeValue } from '@chem-po/react'
+import { useBackgroundColor, useColorModeValue } from '@chem-po/react'
 import React, { useEffect, useRef } from 'react'
 import {
   ActivityIndicator,
@@ -24,6 +24,7 @@ export const CircularProgress = ({
   ...props
 }: CircularProgressProps) => {
   const defaultTrackColor = useColorModeValue('#959595', '#575757')
+  const defaultColor = useBackgroundColor(750)
   const opacity = useRef(new Animated.Value(visible ? 1 : 0)).current
 
   useEffect(() => {
@@ -42,7 +43,7 @@ export const CircularProgress = ({
         {...props}
       />
       {/* Spinning circle */}
-      <ActivityIndicator animating={animating} color={color ?? '#575757'} {...props} />
+      <ActivityIndicator animating={animating} color={color ?? defaultColor} {...props} />
     </Animated.View>
   )
 }

package/src/utils/downloadFile.ts

@@ -1,46 +1,61 @@
-import * as FileSystem from 'expo-file-system'
-import { downloadAsync } from 'expo-file-system'
+import { Directory, File, Paths } from 'expo-file-system'
+import { StorageAccessFramework } from 'expo-file-system/legacy'
 import { shareAsync } from 'expo-sharing'
 import { Platform } from 'react-native'
 
 export const downloadFile = async (uri: string, filename: string, fileType: string) => {
   if (Platform.OS === 'android') {
-    const permissions = await FileSystem.StorageAccessFramework.requestDirectoryPermissionsAsync()
+    const permissions = await StorageAccessFramework.requestDirectoryPermissionsAsync()
     if (!permissions.granted) {
       throw new Error('Permission not granted')
     }
 
-    // Download to temporary location first
-    const tempFileUri = `${FileSystem.cacheDirectory}${filename}`
+    // Create cache directory for temporary file
+    const cacheDir = new Directory(Paths.cache)
 
-    // Download the file to temporary location
-    await FileSystem.downloadAsync(uri, tempFileUri)
+    // Ensure cache directory exists
+    if (!cacheDir.exists) {
+      cacheDir.create()
+    }
 
-    // Read the temporary file as base64
-    const base64Content = await FileSystem.readAsStringAsync(tempFileUri, {
-      encoding: FileSystem.EncodingType.Base64,
-    })
+    // Download the file to cache directory using static method
+    const downloadedFile = await File.downloadFileAsync(uri, cacheDir)
+
+    // Read the downloaded file as bytes and convert to base64
+    const fileBytes = await downloadedFile.bytes()
+
+    // Convert Uint8Array to base64 safely (handles large files better than btoa)
+    const base64Content = Array.from(fileBytes, byte => String.fromCharCode(byte)).join('')
+    const encodedContent = btoa(base64Content)
 
     // Create a file within the selected directory using SAF
-    const fileUri = await FileSystem.StorageAccessFramework.createFileAsync(
+    const fileUri = await StorageAccessFramework.createFileAsync(
       permissions.directoryUri,
       filename,
       fileType,
     )
 
-    // Write the content to the SAF file
-    await FileSystem.StorageAccessFramework.writeAsStringAsync(fileUri, base64Content, {
-      encoding: FileSystem.EncodingType.Base64,
+    // Write the content to the SAF file using legacy method (as SAF might not have new API yet)
+    await StorageAccessFramework.writeAsStringAsync(fileUri, encodedContent, {
+      encoding: 'base64',
     })
 
     // Clean up temporary file
-    await FileSystem.deleteAsync(tempFileUri, { idempotent: true })
+    downloadedFile.delete()
 
     return { uri: fileUri }
   }
-  if (!FileSystem.documentDirectory) {
-    throw new Error('Document directory not found')
+
+  // For iOS and other platforms
+  const documentsDir = new Directory(Paths.document)
+
+  // Ensure documents directory exists
+  if (!documentsDir.exists) {
+    documentsDir.create()
   }
-  const result = await downloadAsync(uri, FileSystem.documentDirectory + filename)
-  return shareAsync(result.uri)
+
+  // Download file directly to documents directory
+  const downloadedFile = await File.downloadFileAsync(uri, documentsDir)
+
+  return shareAsync(downloadedFile.uri)
 }

package/src/utils/downloadFileLegacy.ts

@@ -0,0 +1,66 @@
+import {
+  cacheDirectory,
+  deleteAsync,
+  documentDirectory,
+  downloadAsync,
+  EncodingType,
+  readAsStringAsync,
+  StorageAccessFramework,
+} from 'expo-file-system/legacy'
+import { shareAsync } from 'expo-sharing'
+import { Platform } from 'react-native'
+
+export const downloadFileLegacy = async (uri: string, filename: string, fileType: string) => {
+  if (Platform.OS === 'android') {
+    const permissions = await StorageAccessFramework.requestDirectoryPermissionsAsync()
+    if (!permissions.granted) {
+      throw new Error('Permission not granted')
+    }
+
+    // Download to temporary location first
+    const tempFileUri = `${cacheDirectory}${filename}`
+
+    try {
+      // Download the file to temporary location
+      await downloadAsync(uri, tempFileUri)
+
+      // Read the temporary file as base64
+      const base64Content = await readAsStringAsync(tempFileUri, {
+        encoding: EncodingType.Base64,
+      })
+
+      // Create a file within the selected directory using SAF
+      const fileUri = await StorageAccessFramework.createFileAsync(
+        permissions.directoryUri,
+        filename,
+        fileType,
+      )
+
+      // Write the content to the SAF file
+      await StorageAccessFramework.writeAsStringAsync(fileUri, base64Content, {
+        encoding: EncodingType.Base64,
+      })
+
+      // Clean up temporary file
+      await deleteAsync(tempFileUri, { idempotent: true })
+
+      return { uri: fileUri }
+    } catch (error) {
+      // Clean up temporary file in case of error
+      try {
+        await deleteAsync(tempFileUri, { idempotent: true })
+      } catch {
+        // Ignore cleanup errors
+      }
+      throw error
+    }
+  }
+
+  // For iOS and other platforms
+  if (!documentDirectory) {
+    throw new Error('Document directory not found')
+  }
+
+  const result = await downloadAsync(uri, documentDirectory + filename)
+  return shareAsync(result.uri)
+}