Custom media swiper with pinch-to-zoom and custom video player

keystone-app/app.json

@@ -27,8 +27,9 @@
       "expo-video"
     ],
     "extra": {
+      "router": {},
       "eas": {
-        "projectId": "8267e9d9-6b78-41b2-a1af-2c779a8c4f97"
+        "projectId": "1d22c3df-76f0-4fc1-baf6-5132dfcef14b"
       }
     },
     "android": {
@@ -36,7 +37,16 @@
       "adaptiveIcon": {
         "foregroundImage": "./assets/android-icon-foreground.png",
         "backgroundColor": "#f0ebe3"
-      }
-    }
+      },
+      "permissions": [
+        "android.permission.READ_EXTERNAL_STORAGE",
+        "android.permission.WRITE_EXTERNAL_STORAGE",
+        "android.permission.READ_MEDIA_VISUAL_USER_SELECTED",
+        "android.permission.ACCESS_MEDIA_LOCATION",
+        "android.permission.READ_MEDIA_IMAGES",
+        "android.permission.READ_MEDIA_VIDEO"
+      ]
+    },
+    "owner": "dpv007"
   }
 }

keystone-app/components/FullScreenSwiper.tsx

@@ -4,11 +4,11 @@ import {
   StyleSheet, 
   FlatList, 
   Platform,
-  PanResponder, 
   Animated,
   useWindowDimensions,
 } from 'react-native';
 import { Image } from 'expo-image';
+import { PinchGestureHandler, PanGestureHandler, State } from 'react-native-gesture-handler';
 import CustomVideoPlayer from './CustomVideoPlayer';
 
 interface FullScreenSwiperProps {
@@ -18,134 +18,138 @@ interface FullScreenSwiperProps {
   onIndexChange: (index: number) => void;
 }
 
-/* ── ZoomableImage with Pinch-to-Zoom & Swipe-Down-to-Close ── */
+/* ─────────────────────────────────────────────────────────────
+   ZoomableImage
+   • Pinch-to-zoom via PinchGestureHandler (native multi-touch)
+   • Swipe-down-to-close via PanGestureHandler (vertical only)
+   • Both run on the native thread for 60 fps
+   ───────────────────────────────────────────────────────────── */
 function ZoomableImage({ 
   uri, thumbUri, width, height, onSwipeDown, onZoomChange 
 }: { 
   uri: string; thumbUri?: string; width: number; height: number; 
   onSwipeDown: () => void; onZoomChange: (zooming: boolean) => void;
 }) {
-  const scale = useRef(new Animated.Value(1)).current;
+  /* ── Pinch zoom state ── */
+  const baseScaleAnim = useRef(new Animated.Value(1)).current;
+  const pinchScaleAnim = useRef(new Animated.Value(1)).current;
+  const baseScaleRef = useRef(1);
+  // displayScale = baseScale × pinchScale — computed on native thread
+  const displayScale = Animated.multiply(baseScaleAnim, pinchScaleAnim);
+
+  /* ── Swipe-down state ── */
   const translateY = useRef(new Animated.Value(0)).current;
-  const baseDistance = useRef(0);
-  const currentScale = useRef(1);
-  const lastComputedScale = useRef(1);
 
-  // Refs so PanResponder always sees latest callbacks
+  /* ── Handler refs for simultaneousHandlers ── */
+  const pinchRef = useRef(null);
+  const panRef = useRef(null);
+
+  /* ── Callback refs (prevent stale closures) ── */
   const onSwipeDownRef = useRef(onSwipeDown);
   const onZoomChangeRef = useRef(onZoomChange);
   useEffect(() => { onSwipeDownRef.current = onSwipeDown; }, [onSwipeDown]);
   useEffect(() => { onZoomChangeRef.current = onZoomChange; }, [onZoomChange]);
 
-  const panResponder = useRef(PanResponder.create({
-    onStartShouldSetPanResponder: (e) => e.nativeEvent.touches.length >= 2,
-
-    onMoveShouldSetPanResponder: (e, gs) => {
-      if (e.nativeEvent.touches.length >= 2) return true;
-      return Math.abs(gs.dy) > 12 && Math.abs(gs.dy) > Math.abs(gs.dx) * 1.5;
-    },
-
-    // Capture BEFORE FlatList gets it
-    onMoveShouldSetPanResponderCapture: (e, gs) => {
-      if (e.nativeEvent.touches.length >= 2) return true;
-      return Math.abs(gs.dy) > 12 && Math.abs(gs.dy) > Math.abs(gs.dx) * 1.5;
-    },
-
-    onPanResponderGrant: (e) => {
-      const { touches } = e.nativeEvent;
-      if (touches.length >= 2) {
-        const dx = touches[0].pageX - touches[1].pageX;
-        const dy = touches[0].pageY - touches[1].pageY;
-        baseDistance.current = Math.sqrt(dx * dx + dy * dy);
-        onZoomChangeRef.current(true);
-      }
-    },
-
-    onPanResponderMove: (e, gs) => {
-      const { touches } = e.nativeEvent;
-      if (touches.length >= 2) {
-        if (baseDistance.current === 0) {
-          // Second finger just appeared mid-gesture — init pinch
-          const dx = touches[0].pageX - touches[1].pageX;
-          const dy = touches[0].pageY - touches[1].pageY;
-          baseDistance.current = Math.sqrt(dx * dx + dy * dy);
-          onZoomChangeRef.current(true);
-          Animated.timing(translateY, { toValue: 0, duration: 80, useNativeDriver: true }).start();
-        } else {
-          const dx = touches[0].pageX - touches[1].pageX;
-          const dy = touches[0].pageY - touches[1].pageY;
-          const dist = Math.sqrt(dx * dx + dy * dy);
-          const newScale = Math.max(0.5, Math.min(5, currentScale.current * (dist / baseDistance.current)));
-          scale.setValue(newScale);
-          lastComputedScale.current = newScale;
-        }
-      } else if (touches.length <= 1 && baseDistance.current === 0) {
-        // Single-finger vertical drag → swipe-down-to-close
-        translateY.setValue(gs.dy);
-      }
-    },
-
-    onPanResponderRelease: (_, gs) => {
-      if (baseDistance.current > 0) {
-        // Was pinch-zooming
-        const finalScale = lastComputedScale.current;
-        baseDistance.current = 0;
-        if (finalScale < 1.15) {
-          Animated.spring(scale, { toValue: 1, useNativeDriver: true, bounciness: 0 }).start();
-          currentScale.current = 1;
-          lastComputedScale.current = 1;
-        } else {
-          currentScale.current = finalScale;
-        }
-        onZoomChangeRef.current(false);
+  /* ── Pinch handlers ── */
+  const onPinchEvent = Animated.event(
+    [{ nativeEvent: { scale: pinchScaleAnim } }],
+    { useNativeDriver: true }
+  );
+
+  const onPinchStateChange = (e: any) => {
+    if (e.nativeEvent.state === State.ACTIVE) {
+      onZoomChangeRef.current(true); // disable FlatList scroll
+    }
+    if (e.nativeEvent.oldState === State.ACTIVE) {
+      onZoomChangeRef.current(false); // re-enable FlatList scroll
+      const newBase = baseScaleRef.current * e.nativeEvent.scale;
+      if (newBase < 1.15) {
+        // Snap back to 1×
+        baseScaleRef.current = 1;
+        baseScaleAnim.setValue(1);
+        Animated.spring(pinchScaleAnim, {
+          toValue: 1, useNativeDriver: true, bounciness: 0,
+        }).start();
       } else {
-        // Was swiping down
-        if (gs.dy > 100) {
-          onSwipeDownRef.current();
-        } else {
-          Animated.spring(translateY, { toValue: 0, useNativeDriver: true, bounciness: 0 }).start();
-        }
+        // Keep the zoom level
+        const clamped = Math.min(5, newBase);
+        baseScaleRef.current = clamped;
+        baseScaleAnim.setValue(clamped);
+        pinchScaleAnim.setValue(1);
       }
-    },
-
-    onPanResponderTerminate: () => {
-      baseDistance.current = 0;
-      Animated.parallel([
-        Animated.spring(scale, { toValue: 1, useNativeDriver: true, bounciness: 0 }),
-        Animated.spring(translateY, { toValue: 0, useNativeDriver: true, bounciness: 0 }),
-      ]).start();
-      currentScale.current = 1;
-      lastComputedScale.current = 1;
+    }
+  };
+
+  /* ── Pan (swipe-down) handlers ── */
+  const onPanEvent = Animated.event(
+    [{ nativeEvent: { translationY: translateY } }],
+    { useNativeDriver: true }
+  );
+
+  const onPanStateChange = (e: any) => {
+    if (e.nativeEvent.state === State.ACTIVE) {
+      onZoomChangeRef.current(true);
+    }
+    if (e.nativeEvent.oldState === State.ACTIVE) {
       onZoomChangeRef.current(false);
-    },
-  })).current;
+      if (e.nativeEvent.translationY > 100) {
+        onSwipeDownRef.current();
+      } else {
+        Animated.spring(translateY, {
+          toValue: 0, useNativeDriver: true, bounciness: 0,
+        }).start();
+      }
+    }
+  };
 
   return (
-    <Animated.View
-      style={{
-        width, height,
-        justifyContent: 'center',
-        alignItems: 'center',
-        transform: [{ scale }, { translateY }],
-      }}
-      {...panResponder.panHandlers}
+    <PanGestureHandler
+      ref={panRef}
+      simultaneousHandlers={pinchRef}
+      minPointers={1}
+      maxPointers={1}
+      activeOffsetY={20}
+      failOffsetX={[-15, 15]}
+      onGestureEvent={onPanEvent}
+      onHandlerStateChange={onPanStateChange}
     >
-      <Image
-        source={{ uri }}
-        placeholder={thumbUri ? { uri: thumbUri } : undefined}
-        style={{ width: '100%', height: '100%' }}
-        contentFit="contain"
-        cachePolicy="memory-disk"
-        transition={200}
-        backgroundColor="transparent"
-        allowDownscaling={false}
-      />
-    </Animated.View>
+      <Animated.View style={{ flex: 1 }}>
+        <PinchGestureHandler
+          ref={pinchRef}
+          simultaneousHandlers={panRef}
+          onGestureEvent={onPinchEvent}
+          onHandlerStateChange={onPinchStateChange}
+        >
+          <Animated.View
+            style={{
+              width,
+              height,
+              justifyContent: 'center',
+              alignItems: 'center',
+              transform: [{ scale: displayScale }, { translateY }],
+            }}
+          >
+            <Image
+              source={{ uri }}
+              placeholder={thumbUri ? { uri: thumbUri } : undefined}
+              style={{ width: '100%', height: '100%' }}
+              contentFit="contain"
+              cachePolicy="memory-disk"
+              transition={200}
+              backgroundColor="transparent"
+              allowDownscaling={false}
+            />
+          </Animated.View>
+        </PinchGestureHandler>
+      </Animated.View>
+    </PanGestureHandler>
   );
 }
 
 
-/* ── FullScreenSwiper ──────────────────────────────────────── */
+/* ─────────────────────────────────────────────────────────────
+   FullScreenSwiper
+   ───────────────────────────────────────────────────────────── */
 export default function FullScreenSwiper({ 
   assets, initialIndex, onClose, onIndexChange 
 }: FullScreenSwiperProps) {
@@ -153,7 +157,6 @@ export default function FullScreenSwiper({
   const [activeIndex, setActiveIndex] = useState(initialIndex);
   const [scrollEnabled, setScrollEnabled] = useState(true);
 
-  // Keep onIndexChange ref fresh for the viewability callback
   const onIndexChangeRef = useRef(onIndexChange);
   useEffect(() => { onIndexChangeRef.current = onIndexChange; }, [onIndexChange]);