@chem-po/react-native 0.0.24 → 0.0.26

package/lib/module/components/loading/ProgressBar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useColorModeValue","useThemeValue","React","useEffect","useRef","Animated","StyleSheet","Text","View","ProgressBar","progress","label","height","accentColor","animatedWidth","Value","current","backgroundColor","timing","toValue","duration","useNativeDriver","start","createElement","style","styles","progressContainer","progressBar","progressFill","width","interpolate","inputRange","outputRange","extrapolate","create","justifyContent","alignItems","borderRadius","padding","overflow","position","color","fontSize","fontWeight","textTransform","textShadowColor","textShadowOffset","textShadowRadius"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/loading/ProgressBar.tsx"],"mappings":"AAAA,SAASA,iBAAiB,EAAEC,aAAa,QAAQ,gBAAgB;AACjE,OAAOC,KAAK,IAAIC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAChD,SAASC,QAAQ,EAAEC,UAAU,EAAEC,IAAI,EAAEC,IAAI,QAAQ,cAAc;AAE/D,OAAO,MAAMC,WAAW,GAAGA,CAAC;EAC1BC,QAAQ;EACRC,KAAK;EACLC,MAAM,GAAG;AAKX,CAAC,KAAK;EACJ,MAAMC,WAAW,GAAGZ,aAAa,CAAC,mBAAmB,CAAC;EACtD,MAAMa,aAAa,GAAGV,MAAM,CAAC,IAAIC,QAAQ,CAACU,KAAK,CAAC,CAAC,CAAC,CAAC,CAACC,OAAO;EAC3D,MAAMC,eAAe,GAAGjB,iBAAiB,CAAC,oBAAoB,EAAE,0BAA0B,CAAC;EAE3FG,SAAS,CAAC,MAAM;IACdE,QAAQ,CAACa,MAAM,CAACJ,aAAa,EAAE;MAC7BK,OAAO,EAAET,QAAQ;MACjBU,QAAQ,EAAE,GAAG;MACbC,eAAe,EAAE,KAAK,CAAE;IAC1B,CAAC,CAAC,CAACC,KAAK,CAAC,CAAC;EACZ,CAAC,EAAE,CAACZ,QAAQ,EAAEI,aAAa,CAAC,CAAC;EAE7B,oBACEZ,KAAA,CAAAqB,aAAA,CAACf,IAAI;IAACgB,KAAK,EAAE,CAACC,MAAM,CAACC,iBAAiB,EAAE;MAAEd,MAAM;MAAEK;IAAgB,CAAC;EAAE,gBACnEf,KAAA,CAAAqB,aAAA,CAACf,IAAI;IAACgB,KAAK,EAAEC,MAAM,CAACE;EAAY,gBAC9BzB,KAAA,CAAAqB,aAAA,CAAClB,QAAQ,CAACG,IAAI;IACZgB,KAAK,EAAE,CACLC,MAAM,CAACG,YAAY,EACnB;MACEC,KAAK,EAAEf,aAAa,CAACgB,WAAW,CAAC;QAC/BC,UAAU,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;QAClBC,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC;QAC3BC,WAAW,EAAE;MACf,CAAC,CAAC;MACFhB,eAAe,EAAEJ;IACnB,CAAC;EACD,CACH,CACG,CAAC,eACPX,KAAA,CAAAqB,aAAA,CAAChB,IAAI;IAACiB,KAAK,EAAEC,MAAM,CAACd;EAAM,GAAEA,KAAY,CACpC,CAAC;AAEX,CAAC;AAED,MAAMc,MAAM,GAAGnB,UAAU,CAAC4B,MAAM,CAAC;EAC/BR,iBAAiB,EAAE;IACjBG,KAAK,EAAE,MAAM;IACbM,cAAc,EAAE,QAAQ;IACxBC,UAAU,EAAE,QAAQ;IACpBC,YAAY,EAAE,EAAE;IAChBC,OAAO,EAAE;EACX,CAAC;EACDX,WAAW,EAAE;IACXf,MAAM,EAAE,MAAM;IACdiB,KAAK,EAAE,MAAM;IACbQ,YAAY,EAAE,EAAE;IAChBE,QAAQ,EAAE;EACZ,CAAC;EACDX,YAAY,EAAE;IACZhB,MAAM,EAAE;EACV,CAAC;EACDD,KAAK,EAAE;IACL6B,QAAQ,EAAE,UAAU;IACpBC,KAAK,EAAE,OAAO;IACdC,QAAQ,EAAE,EAAE;IACZC,UAAU,EAAE,KAAK;IACjBC,aAAa,EAAE,WAAW;IAC1BC,eAAe,EAAE,qBAAqB;IACtCC,gBAAgB,EAAE;MAAEjB,KAAK,EAAE,CAAC;MAAEjB,MAAM,EAAE;IAAE,CAAC;IACzCmC,gBAAgB,EAAE;EACpB;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/module/components/loading/index.js

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

package/lib/module/components/loading/index.js.map

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

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,14 @@
-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, }: {
     value?: FileValue | null;
     hasUpload?: boolean;
-    imageOptions?: any;
+    imageOptions?: ImageViewOptions;
     withFullView?: boolean;
+    nonImageContainerStyle?: StyleProp<ViewStyle>;
 }) => 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,EAOV,MAAM,gBAAgB,CAAA;AAIvB,OAAO,KAA0E,MAAM,OAAO,CAAA;AAC9F,OAAO,EAAE,SAAS,EAA4C,SAAS,EAAE,MAAM,cAAc,CAAA;AAE7F,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AA+BxC,eAAO,MAAM,QAAQ,GAAI,2EAMtB;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;CAC9C,sBAuCA,CAAA;AAED,eAAO,MAAM,aAAa,wFA2FzB,CAAA"}

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

@@ -0,0 +1,9 @@
+import React from 'react';
+interface ImageViewModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    src: string | null;
+}
+export declare const ImageViewModal: React.FC<ImageViewModalProps>;
+export {};
+//# sourceMappingURL=ImageViewModal.backup.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImageViewModal.backup.d.ts","sourceRoot":"","sources":["../../../../src/components/image/ImageViewModal.backup.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiD,MAAM,OAAO,CAAA;AAKrE,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,CA4MxD,CAAA"}

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,KAAiD,MAAM,OAAO,CAAA;AAKrE,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,CA4MxD,CAAA"}
+{"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"}

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

@@ -0,0 +1,9 @@
+import React from 'react';
+interface ImageViewModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    src: string | null;
+}
+export declare const ImageViewModal: React.FC<ImageViewModalProps>;
+export {};
+//# sourceMappingURL=ImageViewModal.old.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImageViewModal.old.d.ts","sourceRoot":"","sources":["../../../../src/components/image/ImageViewModal.old.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiD,MAAM,OAAO,CAAA;AAKrE,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,CA4MxD,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/package.json

@@ -2,7 +2,7 @@
   "name": "@chem-po/react-native",
   "author": "Elan Canfield",
   "license": "MIT",
-  "version": "0.0.24",
+  "version": "0.0.26",
   "main": "lib/commonjs/index.js",
   "types": "lib/typescript/index.d.ts",
   "source": "src/index.ts",
@@ -34,23 +34,24 @@
     "@lottiefiles/dotlottie-react": "^0.13.5",
     "@react-native-async-storage/async-storage": "2.1.2",
     "@react-native-community/slider": "4.5.6",
-    "expo-constants": "~17.1.6",
-    "expo-document-picker": "~13.1.5",
+    "expo-constants": "~17.1.7",
+    "expo-document-picker": "~13.1.6",
     "expo-image-picker": "~16.1.4",
     "lottie-react-native": "7.2.2",
     "nested-property": "^4.0.0",
-    "react": "^19.0.0",
+    "react": "19.0.0",
     "react-hook-form": "^7.55.0",
-    "react-native": "0.79.3",
+    "react-native": "0.79.5",
     "react-native-element-dropdown": "^2.12.4",
     "react-native-gesture-handler": "~2.24.0",
+    "react-native-reanimated": "~3.17.4",
     "react-native-notifier": "^2.0.0",
     "react-native-paper": "^5.14.3",
     "react-native-paper-dates": "^0.22.42",
     "react-native-svg": "15.11.2",
     "zustand": "^4.3.3",
-    "@chem-po/core": "0.0.24",
-    "@chem-po/react": "0.0.24"
+    "@chem-po/react": "0.0.26",
+    "@chem-po/core": "0.0.26"
   },
   "devDependencies": {
     "@babel/core": "^7.26.0",
@@ -67,9 +68,9 @@
   },
   "peerDependencies": {
     "expo": "~53.0.11",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "react-native": "0.79.3"
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "react-native": "0.79.4"
   },
   "react-native-builder-bob": {
     "source": "src",

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,6 +1,7 @@
-import { FileValue, InputRef, LocalFileValue } from '@chem-po/core'
+import { FileValue, ImageViewOptions, InputRef, LocalFileValue } from '@chem-po/core'
 import {
   FileField,
+  useBackgroundColor,
   useBorderColor,
   useIconColor,
   useObjectUrl,
@@ -11,7 +12,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, useState } from 'react'
-import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+import { StyleProp, StyleSheet, Text, TouchableOpacity, View, ViewStyle } from 'react-native'
 import { LoadingImage } from '../../../loading/LoadingImage'
 import { FieldProps } from '../../types'
 
@@ -49,11 +50,13 @@ export const FileView = ({
   hasUpload,
   imageOptions,
   withFullView,
+  nonImageContainerStyle,
 }: {
   value?: FileValue | null
   hasUpload?: boolean
-  imageOptions?: any
+  imageOptions?: ImageViewOptions
   withFullView?: boolean
+  nonImageContainerStyle?: StyleProp<ViewStyle>
 }) => {
   const { storagePath, dataUrl } = value ?? {}
   const missingFile = !dataUrl && !storagePath
@@ -63,6 +66,7 @@ export const FileView = ({
   const iconColor = useIconColor()
   const fileNameColor = useTextColor()
   const borderColor = useBorderColor()
+  const backgroundColor = useBackgroundColor(100)
   if (!value || missingFile) {
     return <NoFileView hasUpload={hasUpload} />
   }
@@ -81,9 +85,15 @@ 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>
     </View>
   )
 }
@@ -220,13 +230,23 @@ const styles = StyleSheet.create({
   fileContainer: {
     flexDirection: 'row',
     alignItems: 'center',
-    padding: 8,
     borderWidth: 1,
     borderRadius: 4,
+    maxWidth: '100%',
+    overflow: 'hidden',
+  },
+  filenameContainer: {
+    flex: 1,
+    paddingRight: 4,
+    alignItems: 'center',
   },
   filename: {
     fontSize: 14,
-    marginLeft: 8,
+    lineHeight: 30,
+    flex: 1,
+  },
+  iconContainer: {
+    padding: 4,
   },
   image: {
     borderRadius: 4,

package/src/components/image/ImageViewModal.backup.tsx

@@ -0,0 +1,261 @@
+import { useScreen } from '@chem-po/react'
+import { Ionicons } from '@expo/vector-icons'
+import React, { useCallback, useMemo, useRef, useState } from 'react'
+import { Animated, Image, Modal, StyleSheet, TouchableOpacity, View } from 'react-native'
+import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler'
+import { LoadingLogo } from '../loading/Loading'
+
+interface ImageViewModalProps {
+  isOpen: boolean
+  onClose: () => void
+  src: string | null
+}
+
+export const ImageViewModal: React.FC<ImageViewModalProps> = ({ isOpen, onClose, src }) => {
+  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 })
+
+  // Animated values for zoom and pan
+  const scale = useRef(new Animated.Value(1)).current
+  const translateX = useRef(new Animated.Value(0)).current
+  const translateY = useRef(new Animated.Value(0)).current
+
+  // Gesture state
+  const savedScale = useRef(1)
+  const savedTranslateX = useRef(0)
+  const savedTranslateY = useRef(0)
+  const currentScale = useRef(1)
+  const currentTranslateX = useRef(0)
+  const currentTranslateY = useRef(0)
+
+  const { height, width } = useMemo(() => {
+    if (loading) return imageSize
+    const ratio = imageSize.width / imageSize.height
+    let h = Math.min(imageSize.height, screenHeight * 0.9)
+    let w = h * ratio
+    if (w > screenWidth * 0.9) {
+      w = Math.min(imageSize.width, screenWidth * 0.9)
+      h = w / ratio
+    }
+    return { height: h, width: w }
+  }, [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)
+  }, [])
+
+  // Reset zoom and pan when modal opens/closes
+  const resetTransform = useCallback(() => {
+    scale.setValue(1)
+    translateX.setValue(0)
+    translateY.setValue(0)
+    savedScale.current = 1
+    savedTranslateX.current = 0
+    savedTranslateY.current = 0
+    currentScale.current = 1
+    currentTranslateX.current = 0
+    currentTranslateY.current = 0
+  }, [scale, translateX, translateY])
+
+  // Reset when modal closes or src changes
+  React.useEffect(() => {
+    if (!isOpen || !src) {
+      resetTransform()
+    }
+  }, [isOpen, src, resetTransform])
+
+  // Pan gesture
+  const panGesture = Gesture.Pan()
+    .onUpdate(event => {
+      // Only allow panning if zoomed in
+      if (savedScale.current > 1) {
+        const newTranslateX = savedTranslateX.current + event.translationX
+        const newTranslateY = savedTranslateY.current + event.translationY
+
+        // Calculate bounds to prevent panning too far
+        const maxTranslateX = (width * savedScale.current - width) / 2
+        const maxTranslateY = (height * savedScale.current - height) / 2
+
+        const boundedTranslateX = Math.max(-maxTranslateX, Math.min(maxTranslateX, newTranslateX))
+        const boundedTranslateY = Math.max(-maxTranslateY, Math.min(maxTranslateY, newTranslateY))
+
+        translateX.setValue(boundedTranslateX)
+        translateY.setValue(boundedTranslateY)
+        currentTranslateX.current = boundedTranslateX
+        currentTranslateY.current = boundedTranslateY
+      }
+    })
+    .onEnd(() => {
+      savedTranslateX.current = currentTranslateX.current
+      savedTranslateY.current = currentTranslateY.current
+    })
+
+  // Pinch gesture
+  const pinchGesture = Gesture.Pinch()
+    .onUpdate(event => {
+      const newScale = savedScale.current * event.scale
+      // Limit zoom between 1x and 5x
+      const boundedScale = Math.max(1, Math.min(5, newScale))
+      scale.setValue(boundedScale)
+      currentScale.current = boundedScale
+
+      // If zooming out to 1x, reset position
+      if (boundedScale <= 1) {
+        translateX.setValue(0)
+        translateY.setValue(0)
+        currentTranslateX.current = 0
+        currentTranslateY.current = 0
+      }
+    })
+    .onEnd(() => {
+      savedScale.current = currentScale.current
+      // If scale is close to 1, snap back to 1
+      if (savedScale.current < 1.1) {
+        Animated.parallel([
+          Animated.spring(scale, { toValue: 1, useNativeDriver: true }),
+          Animated.spring(translateX, { toValue: 0, useNativeDriver: true }),
+          Animated.spring(translateY, { toValue: 0, useNativeDriver: true }),
+        ]).start()
+        savedScale.current = 1
+        savedTranslateX.current = 0
+        savedTranslateY.current = 0
+        currentScale.current = 1
+        currentTranslateX.current = 0
+        currentTranslateY.current = 0
+      } else {
+        savedTranslateX.current = currentTranslateX.current
+        savedTranslateY.current = currentTranslateY.current
+      }
+    })
+
+  // Double tap to zoom
+  const doubleTapGesture = Gesture.Tap()
+    .numberOfTaps(2)
+    .onEnd(() => {
+      if (savedScale.current > 1) {
+        // Zoom out
+        Animated.parallel([
+          Animated.spring(scale, { toValue: 1, useNativeDriver: true }),
+          Animated.spring(translateX, { toValue: 0, useNativeDriver: true }),
+          Animated.spring(translateY, { toValue: 0, useNativeDriver: true }),
+        ]).start()
+        savedScale.current = 1
+        savedTranslateX.current = 0
+        savedTranslateY.current = 0
+        currentScale.current = 1
+        currentTranslateX.current = 0
+        currentTranslateY.current = 0
+      } else {
+        // Zoom in to 2x
+        Animated.spring(scale, { toValue: 2, useNativeDriver: true }).start()
+        savedScale.current = 2
+        currentScale.current = 2
+      }
+    })
+
+  // Test simple single tap gesture
+
+  // Combine gestures - simplified approach
+  const combinedGestures = Gesture.Race(
+    doubleTapGesture,
+    Gesture.Simultaneous(panGesture, pinchGesture),
+  )
+
+  if (!isOpen) {
+    return null
+  }
+
+  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,
+                    transform: [{ scale }, { translateX }, { translateY }],
+                  },
+                ]}>
+                <Image
+                  source={src ? { uri: src } : undefined}
+                  style={styles.image}
+                  onLoadStart={onLoadStart}
+                  onLoad={onLoad}
+                  resizeMode="contain"
+                />
+              </Animated.View>
+            </GestureDetector>
+
+            <TouchableOpacity style={styles.closeButton} onPress={onClose}>
+              <Ionicons name="close" size={24} color="white" />
+            </TouchableOpacity>
+
+            {loading || !src ? (
+              <View style={styles.loadingContainer}>
+                <LoadingLogo isLoading={loading} size={70} />
+              </View>
+            ) : null}
+          </View>
+        </View>
+      </GestureHandlerRootView>
+    </Modal>
+  )
+}
+
+const styles = StyleSheet.create({
+  gestureRoot: {
+    flex: 1,
+  },
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.7)',
+  },
+  backgroundTouchable: {
+    ...StyleSheet.absoluteFillObject,
+  },
+  contentContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 16,
+  },
+  imageContainer: {
+    overflow: 'hidden',
+    borderRadius: 4,
+  },
+  image: {
+    width: '100%',
+    height: '100%',
+  },
+  closeButton: {
+    position: 'absolute',
+    top: 16,
+    right: 16,
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  loadingContainer: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+})