@chem-po/react-native 0.0.30 → 0.0.31

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, 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(() => {
@@ -203,53 +210,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 +308,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>
   )
 }