@chem-po/react-native 0.0.25 → 0.0.27

package/lib/typescript/components/form/UploadProgress/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/UploadProgress/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAE5C,OAAO,KAAkB,MAAM,OAAO,CAAA;AAqCtC,eAAO,MAAM,cAAc,GAAI,aAAa;IAAE,OAAO,EAAE,YAAY,CAAA;CAAE,sBAwBpE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/UploadProgress/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAC5C,OAAO,KAAkB,MAAM,OAAO,CAAA;AAsCtC,eAAO,MAAM,cAAc,GAAI,aAAa;IAAE,OAAO,EAAE,YAAY,CAAA;CAAE,sBAUpE,CAAA"}

package/lib/typescript/components/form/input/file/index.d.ts

@@ -1,12 +1,15 @@
-import { FileValue, InputRef } from '@chem-po/core';
+import { FileValue, ImageViewOptions, InputRef } from '@chem-po/core';
 import { FileField } from '@chem-po/react';
 import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
 import { FieldProps } from '../../types';
-export declare const FileView: ({ value, hasUpload, imageOptions, withFullView, }: {
+export declare const FileView: ({ value, hasUpload, imageOptions, withFullView, nonImageContainerStyle, withDownload, }: {
     value?: FileValue | null;
     hasUpload?: boolean;
-    imageOptions?: any;
+    imageOptions?: ImageViewOptions;
     withFullView?: boolean;
+    nonImageContainerStyle?: StyleProp<ViewStyle>;
+    withDownload?: boolean;
 }) => React.JSX.Element;
 export declare const FileComponent: React.ForwardRefExoticComponent<FieldProps<FileField> & React.RefAttributes<InputRef>>;
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/components/form/input/file/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/input/file/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAkB,MAAM,eAAe,CAAA;AACnE,OAAO,EACL,SAAS,EAMV,MAAM,gBAAgB,CAAA;AAIvB,OAAO,KAA0E,MAAM,OAAO,CAAA;AAG9F,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AA+BxC,eAAO,MAAM,QAAQ,GAAI,mDAKtB;IACD,KAAK,CAAC,EAAE,SAAS,GAAG,IAAI,CAAA;IACxB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,YAAY,CAAC,EAAE,GAAG,CAAA;IAClB,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB,sBAgCA,CAAA;AAED,eAAO,MAAM,aAAa,wFA2FzB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/input/file/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,QAAQ,EAAkB,MAAM,eAAe,CAAA;AACrF,OAAO,EACL,SAAS,EAQV,MAAM,gBAAgB,CAAA;AAIvB,OAAO,KAA0E,MAAM,OAAO,CAAA;AAC9F,OAAO,EAAE,SAAS,EAA4C,SAAS,EAAE,MAAM,cAAc,CAAA;AAG7F,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AA+BxC,eAAO,MAAM,QAAQ,GAAI,yFAOtB;IACD,KAAK,CAAC,EAAE,SAAS,GAAG,IAAI,CAAA;IACxB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,YAAY,CAAC,EAAE,gBAAgB,CAAA;IAC/B,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,sBAAsB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAC7C,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB,sBAkFA,CAAA;AAED,eAAO,MAAM,aAAa,wFA2FzB,CAAA"}

package/lib/typescript/components/image/ImageViewModal.d.ts

@@ -3,6 +3,9 @@ interface ImageViewModalProps {
     isOpen: boolean;
     onClose: () => void;
     src: string | null;
+    filename?: string;
+    fileType?: string;
+    withDownload?: boolean;
 }
 export declare const ImageViewModal: React.FC<ImageViewModalProps>;
 export {};

package/lib/typescript/components/image/ImageViewModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageViewModal.d.ts","sourceRoot":"","sources":["../../../../src/components/image/ImageViewModal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoD,MAAM,OAAO,CAAA;AAMxE,UAAU,mBAAmB;IAC3B,MAAM,EAAE,OAAO,CAAA;IACf,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAA;CACnB;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAoMxD,CAAA"}
+{"version":3,"file":"ImageViewModal.d.ts","sourceRoot":"","sources":["../../../../src/components/image/ImageViewModal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoD,MAAM,OAAO,CAAA;AAOxE,UAAU,mBAAmB;IAC3B,MAAM,EAAE,OAAO,CAAA;IACf,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA4OxD,CAAA"}

package/lib/typescript/components/loading/LoadingImage.d.ts

@@ -4,11 +4,14 @@ export interface LoadingImageProps {
     src?: string | null;
     loadingOverride?: boolean;
     onLoad?: (e: any) => void;
+    filename?: string;
+    fileType?: string;
     withFullView?: boolean;
     buttonFullView?: boolean;
     style?: ViewStyle;
     width?: DimensionValue;
     height?: DimensionValue;
+    withDownload?: boolean;
 }
-export declare const LoadingImage: ({ src, loadingOverride, onLoad, width, height, withFullView, buttonFullView, style, }: LoadingImageProps) => React.JSX.Element;
+export declare const LoadingImage: ({ src, loadingOverride, onLoad, filename, fileType, width, height, withFullView, buttonFullView, withDownload, style, }: LoadingImageProps) => React.JSX.Element;
 //# sourceMappingURL=LoadingImage.d.ts.map

package/lib/typescript/components/loading/LoadingImage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingImage.d.ts","sourceRoot":"","sources":["../../../../src/components/loading/LoadingImage.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4D,MAAM,OAAO,CAAA;AAChF,OAAO,EAAE,cAAc,EAA6C,SAAS,EAAE,MAAM,cAAc,CAAA;AAInG,MAAM,WAAW,iBAAiB;IAChC,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAA;IACzB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,KAAK,CAAC,EAAE,cAAc,CAAA;IACtB,MAAM,CAAC,EAAE,cAAc,CAAA;CACxB;AAKD,eAAO,MAAM,YAAY,GAAI,uFAS1B,iBAAiB,sBAmFnB,CAAA"}
+{"version":3,"file":"LoadingImage.d.ts","sourceRoot":"","sources":["../../../../src/components/loading/LoadingImage.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4D,MAAM,OAAO,CAAA;AAChF,OAAO,EAAE,cAAc,EAA6C,SAAS,EAAE,MAAM,cAAc,CAAA;AAInG,MAAM,WAAW,iBAAiB;IAChC,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAA;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,KAAK,CAAC,EAAE,cAAc,CAAA;IACtB,MAAM,CAAC,EAAE,cAAc,CAAA;IACvB,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB;AAKD,eAAO,MAAM,YAAY,GAAI,yHAY1B,iBAAiB,sBA4FnB,CAAA"}

package/lib/typescript/components/loading/ProgressBar.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare const ProgressBar: ({ progress, label, height, }: {
+    progress: number;
+    label?: string;
+    height?: number;
+}) => React.JSX.Element;
+//# sourceMappingURL=ProgressBar.d.ts.map

package/lib/typescript/components/loading/ProgressBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../../src/components/loading/ProgressBar.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAGhD,eAAO,MAAM,WAAW,GAAI,8BAIzB;IACD,QAAQ,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,sBAiCA,CAAA"}

package/lib/typescript/components/loading/index.d.ts

@@ -3,4 +3,5 @@ export * from './Loading';
 export * from './LoadingImage';
 export * from './LoadingOverlay';
 export * from './LoadingSwitch';
+export * from './ProgressBar';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/components/loading/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/loading/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA;AAClC,cAAc,WAAW,CAAA;AACzB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,kBAAkB,CAAA;AAChC,cAAc,iBAAiB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/loading/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA;AAClC,cAAc,WAAW,CAAA;AACzB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,kBAAkB,CAAA;AAChC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,eAAe,CAAA"}

package/lib/typescript/utils/downloadFile.d.ts

@@ -0,0 +1,4 @@
+export declare const downloadFile: (uri: string, filename: string, fileType: string) => Promise<{
+    uri: string;
+} | undefined>;
+//# sourceMappingURL=downloadFile.d.ts.map

package/lib/typescript/utils/downloadFile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"downloadFile.d.ts","sourceRoot":"","sources":["../../../src/utils/downloadFile.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,GAAU,KAAK,MAAM,EAAE,UAAU,MAAM,EAAE,UAAU,MAAM;;cAiCjF,CAAA"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@chem-po/react-native",
   "author": "Elan Canfield",
   "license": "MIT",
-  "version": "0.0.25",
+  "version": "0.0.27",
   "main": "lib/commonjs/index.js",
   "types": "lib/typescript/index.d.ts",
   "source": "src/index.ts",
@@ -36,6 +36,7 @@
     "@react-native-community/slider": "4.5.6",
     "expo-constants": "~17.1.7",
     "expo-document-picker": "~13.1.6",
+    "expo-file-system": "~18.1.11",
     "expo-image-picker": "~16.1.4",
     "lottie-react-native": "7.2.2",
     "nested-property": "^4.0.0",
@@ -50,8 +51,8 @@
     "react-native-paper-dates": "^0.22.42",
     "react-native-svg": "15.11.2",
     "zustand": "^4.3.3",
-    "@chem-po/core": "0.0.25",
-    "@chem-po/react": "0.0.25"
+    "@chem-po/core": "0.0.27",
+    "@chem-po/react": "0.0.27"
   },
   "devDependencies": {
     "@babel/core": "^7.26.0",

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

@@ -1,7 +1,7 @@
 import { UploadsState } from '@chem-po/core'
-import { useThemeValue } from '@chem-po/react'
 import React, { useMemo } from 'react'
-import { Animated, StyleSheet, Text, View } from 'react-native'
+import { StyleSheet, View } from 'react-native'
+import { ProgressBar } from '../../loading/ProgressBar'
 
 const styles = StyleSheet.create({
   container: {
@@ -40,24 +40,10 @@ const styles = StyleSheet.create({
 export const UploadProgress = ({ uploads }: { uploads: UploadsState }) => {
   const asArr = useMemo(() => Object.values(uploads), [uploads])
 
-  const accentColor = useThemeValue('colors.accent.300')
   return (
     <View style={styles.container}>
       {asArr.map(upload => (
-        <Animated.View key={upload.label} style={styles.progressContainer}>
-          <View style={styles.progressBar}>
-            <Animated.View
-              style={[
-                styles.progressFill,
-                {
-                  width: `${upload.percent * 100}%`,
-                  backgroundColor: accentColor,
-                },
-              ]}
-            />
-          </View>
-          <Text style={styles.label}>{upload.label}</Text>
-        </Animated.View>
+        <ProgressBar key={upload.label} progress={upload.percent} label={upload.label} />
       ))}
     </View>
   )

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

@@ -1,17 +1,20 @@
-import { FileValue, InputRef, LocalFileValue } from '@chem-po/core'
+import { FileValue, ImageViewOptions, InputRef, LocalFileValue } from '@chem-po/core'
 import {
   FileField,
+  useBackgroundColor,
   useBorderColor,
   useIconColor,
   useObjectUrl,
   usePlaceholderColor,
   useTextColor,
+  useToast,
 } from '@chem-po/react'
 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 { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+import { StyleProp, StyleSheet, Text, TouchableOpacity, View, ViewStyle } from 'react-native'
+import { downloadFile } from '../../../../utils/downloadFile'
 import { LoadingImage } from '../../../loading/LoadingImage'
 import { FieldProps } from '../../types'
 
@@ -49,20 +52,57 @@ export const FileView = ({
   hasUpload,
   imageOptions,
   withFullView,
+  nonImageContainerStyle,
+  withDownload,
 }: {
   value?: FileValue | null
   hasUpload?: boolean
-  imageOptions?: any
+  imageOptions?: ImageViewOptions
   withFullView?: boolean
+  nonImageContainerStyle?: StyleProp<ViewStyle>
+  withDownload?: boolean
 }) => {
   const { storagePath, dataUrl } = value ?? {}
   const missingFile = !dataUrl && !storagePath
 
   const { url, loading } = useObjectUrl(value)
+  const { showError, showSuccess } = useToast()
 
   const iconColor = useIconColor()
   const fileNameColor = useTextColor()
   const borderColor = useBorderColor()
+  const backgroundColor = useBackgroundColor(100)
+
+  const handleDownload = useCallback(async () => {
+    if (!url) {
+      showError('File URL is not available')
+      return
+    }
+
+    const filename = value?.filename?.split('/').pop()?.replace(/\s+/g, '_')
+    if (!filename) {
+      showError('Filename is not available')
+      return
+    }
+
+    const fileType = value?.type
+    if (!fileType) {
+      showError('File type is not available')
+      return
+    }
+
+    try {
+      await downloadFile(url, filename, fileType)
+      showSuccess('File downloaded successfully')
+    } catch (error: unknown) {
+      if (error instanceof Error) {
+        console.error('Error downloading file:', error.message)
+      } else {
+        console.error('Error downloading file:', String(error))
+      }
+      showError('Failed to download file')
+    }
+  }, [url, value, showError, showSuccess])
   if (!value || missingFile) {
     return <NoFileView hasUpload={hasUpload} />
   }
@@ -70,7 +110,10 @@ export const FileView = ({
   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}
@@ -81,9 +124,23 @@ export const FileView = ({
   }
 
   return (
-    <View style={[styles.fileContainer, { borderColor }]}>
-      <Ionicons name="document" size={24} color={iconColor} />
-      <Text style={[styles.filename, { color: fileNameColor }]}>{value.filename}</Text>
+    <View style={[styles.fileContainer, { borderColor, backgroundColor }, nonImageContainerStyle]}>
+      <View style={styles.iconContainer}>
+        <Ionicons name="document" size={24} color={iconColor} />
+      </View>
+      <View style={styles.filenameContainer}>
+        <Text numberOfLines={1} style={[styles.filename, { color: fileNameColor }]}>
+          {value.filename}
+        </Text>
+      </View>
+      {withDownload && (
+        <TouchableOpacity
+          style={styles.downloadButton}
+          onPress={() => void handleDownload()}
+          disabled={loading}>
+          <Ionicons name="download" size={20} color={iconColor} />
+        </TouchableOpacity>
+      )}
     </View>
   )
 }
@@ -220,13 +277,25 @@ const styles = StyleSheet.create({
   fileContainer: {
     flexDirection: 'row',
     alignItems: 'center',
-    padding: 8,
     borderWidth: 1,
     borderRadius: 4,
+    maxWidth: '100%',
+    overflow: 'hidden',
+  },
+  filenameContainer: {
+    flex: 1,
+    paddingRight: 4,
+    justifyContent: 'center',
   },
   filename: {
     fontSize: 14,
-    marginLeft: 8,
+  },
+  iconContainer: {
+    padding: 4,
+  },
+  downloadButton: {
+    padding: 8,
+    marginLeft: 4,
   },
   image: {
     borderRadius: 4,

package/src/components/image/ImageViewModal.tsx

@@ -1,22 +1,34 @@
-import { useScreen } from '@chem-po/react'
+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 Animated, { useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated'
+import { downloadFile } from '../../utils/downloadFile'
 import { LoadingLogo } from '../loading/Loading'
 
 interface ImageViewModalProps {
   isOpen: boolean
   onClose: () => void
   src: string | null
+  filename?: string
+  fileType?: string
+  withDownload?: boolean
 }
 
-export const ImageViewModal: React.FC<ImageViewModalProps> = ({ isOpen, onClose, src }) => {
+export const ImageViewModal: React.FC<ImageViewModalProps> = ({
+  isOpen,
+  onClose,
+  src,
+  filename,
+  fileType,
+  withDownload,
+}) => {
   const [loading, setLoading] = useState(true)
   const screenWidth = useScreen(s => s.width)
   const screenHeight = useScreen(s => s.height)
   const [imageSize, setImageSize] = useState({ width: screenWidth / 2, height: screenHeight / 2 })
+  const { showError, showSuccess } = useToast()
 
   // Shared values for zoom and pan (reanimated)
   const scale = useSharedValue(1)
@@ -64,6 +76,32 @@ export const ImageViewModal: React.FC<ImageViewModalProps> = ({ isOpen, onClose,
     }
   }, [isOpen, src, resetTransform])
 
+  // Download functionality
+  const handleDownload = useCallback(async () => {
+    if (!src) {
+      showError('Image URL is not available')
+      return
+    }
+    if (!fileType) {
+      showError('File type is not available')
+      return
+    }
+
+    try {
+      const usedName = filename ?? `image_${Date.now()}.jpg`
+
+      await downloadFile(src, usedName, fileType)
+      showSuccess('Image downloaded successfully')
+    } catch (error: unknown) {
+      if (error instanceof Error) {
+        console.error('Error downloading image:', error.message)
+      } else {
+        console.error('Error downloading image:', String(error))
+      }
+      showError('Failed to download image')
+    }
+  }, [src, showError, showSuccess, filename, fileType])
+
   // Pan gesture with worklet
   const panGesture = Gesture.Pan()
     .onUpdate(event => {
@@ -194,6 +232,12 @@ export const ImageViewModal: React.FC<ImageViewModalProps> = ({ isOpen, onClose,
               </Animated.View>
             </GestureDetector>
 
+            {withDownload && (
+              <TouchableOpacity style={styles.downloadButton} onPress={() => void handleDownload()}>
+                <Ionicons name="download" size={24} color="white" />
+              </TouchableOpacity>
+            )}
+
             <TouchableOpacity style={styles.closeButton} onPress={onClose}>
               <Ionicons name="close" size={24} color="white" />
             </TouchableOpacity>
@@ -235,6 +279,17 @@ const styles = StyleSheet.create({
     width: '100%',
     height: '100%',
   },
+  downloadButton: {
+    position: 'absolute',
+    top: 16,
+    right: 64,
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
   closeButton: {
     position: 'absolute',
     top: 16,

package/src/components/loading/LoadingImage.tsx

@@ -9,11 +9,14 @@ export interface LoadingImageProps {
   src?: string | null
   loadingOverride?: boolean
   onLoad?: (e: any) => void
+  filename?: string
+  fileType?: string
   withFullView?: boolean
   buttonFullView?: boolean
   style?: ViewStyle
   width?: DimensionValue
   height?: DimensionValue
+  withDownload?: boolean
 }
 
 const emptyPng =
@@ -23,10 +26,13 @@ export const LoadingImage = ({
   src,
   loadingOverride,
   onLoad,
+  filename,
+  fileType,
   width,
   height,
   withFullView,
   buttonFullView,
+  withDownload,
   style,
 }: LoadingImageProps) => {
   const [imageLoading, setImageLoading] = useState(!!src)
@@ -108,7 +114,16 @@ export const LoadingImage = ({
         ]}>
         <LoadingLogo isLoading={loading} size={10} />
       </View>
-      {viewing && <ImageViewModal isOpen src={src ?? emptyPng} onClose={() => setViewing(false)} />}
+      {viewing ? (
+        <ImageViewModal
+          withDownload={withDownload}
+          filename={filename}
+          fileType={fileType}
+          isOpen
+          src={src ?? emptyPng}
+          onClose={() => setViewing(false)}
+        />
+      ) : null}
     </View>
   )
 }

package/src/components/loading/ProgressBar.tsx

@@ -0,0 +1,75 @@
+import { useColorModeValue, useThemeValue } from '@chem-po/react'
+import React, { useEffect, useRef } from 'react'
+import { Animated, StyleSheet, Text, View } from 'react-native'
+
+export const ProgressBar = ({
+  progress,
+  label,
+  height = 26,
+}: {
+  progress: number
+  label?: string
+  height?: number
+}) => {
+  const accentColor = useThemeValue('colors.accent.300')
+  const animatedWidth = useRef(new Animated.Value(0)).current
+  const backgroundColor = useColorModeValue('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.2)')
+
+  useEffect(() => {
+    Animated.timing(animatedWidth, {
+      toValue: progress,
+      duration: 300,
+      useNativeDriver: false, // width animations require layout driver
+    }).start()
+  }, [progress, animatedWidth])
+
+  return (
+    <View style={[styles.progressContainer, { height, backgroundColor }]}>
+      <View style={styles.progressBar}>
+        <Animated.View
+          style={[
+            styles.progressFill,
+            {
+              width: animatedWidth.interpolate({
+                inputRange: [0, 1],
+                outputRange: ['0%', '100%'],
+                extrapolate: 'clamp',
+              }),
+              backgroundColor: accentColor,
+            },
+          ]}
+        />
+      </View>
+      <Text style={styles.label}>{label}</Text>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  progressContainer: {
+    width: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 20,
+    padding: 3,
+  },
+  progressBar: {
+    height: '100%',
+    width: '100%',
+    borderRadius: 20,
+    overflow: 'hidden',
+  },
+  progressFill: {
+    height: '100%',
+  },
+  label: {
+    position: 'absolute',
+    color: 'white',
+    fontSize: 12,
+    fontWeight: '500',
+    textTransform: 'uppercase',
+    textShadowColor: 'rgba(0, 0, 0, 0.67)',
+    textShadowOffset: { width: 1, height: 1 },
+    textShadowRadius: 3,
+  },
+})

package/src/components/loading/index.ts

@@ -3,3 +3,4 @@ export * from './Loading'
 export * from './LoadingImage'
 export * from './LoadingOverlay'
 export * from './LoadingSwitch'
+export * from './ProgressBar'

package/src/utils/downloadFile.ts

@@ -0,0 +1,36 @@
+import * as FileSystem from 'expo-file-system'
+
+export const downloadFile = async (uri: string, filename: string, fileType: string) => {
+  const permissions = await FileSystem.StorageAccessFramework.requestDirectoryPermissionsAsync()
+  if (!permissions.granted) {
+    return
+  }
+
+  // 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 }
+}