Use modern Gesture API v2 + reanimated for pinch zoom and scrubber

keystone-app/components/CustomVideoPlayer.tsx

@@ -1,14 +1,15 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { 
-  View, 
-  StyleSheet, 
-  TouchableOpacity, 
-  Text, 
+import {
+  View,
+  StyleSheet,
+  TouchableOpacity,
+  Text,
   TouchableWithoutFeedback,
 } from 'react-native';
 import { useVideoPlayer, VideoView } from 'expo-video';
 import { MaterialIcons } from '@expo/vector-icons';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 
 interface CustomVideoPlayerProps {
   uri: string;
@@ -17,8 +18,8 @@ interface CustomVideoPlayerProps {
   onScrubEnd?: () => void;
 }
 
-export default function CustomVideoPlayer({ 
-  uri, shouldPlay, onScrubStart, onScrubEnd 
+export default function CustomVideoPlayer({
+  uri, shouldPlay, onScrubStart, onScrubEnd,
 }: CustomVideoPlayerProps) {
   const insets = useSafeAreaInsets();
   const [isPlaying, setIsPlaying] = useState(shouldPlay);
@@ -27,7 +28,6 @@ export default function CustomVideoPlayer({
   const [showControls, setShowControls] = useState(true);
   const [scrubberWidth, setScrubberWidth] = useState(0);
 
-  const scrubberViewRef = useRef<View>(null);
   const scrubberPageXRef = useRef(0);
   const controlsTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
@@ -36,7 +36,6 @@ export default function CustomVideoPlayer({
     if (shouldPlay) p.play();
   });
 
-  // Sync external shouldPlay
   useEffect(() => {
     if (shouldPlay) {
       player.play();
@@ -47,7 +46,6 @@ export default function CustomVideoPlayer({
     }
   }, [shouldPlay, player]);
 
-  // Poll for time updates
   useEffect(() => {
     const interval = setInterval(() => {
       if (player) {
@@ -58,7 +56,6 @@ export default function CustomVideoPlayer({
     return () => clearInterval(interval);
   }, [player]);
 
-  // Auto-hide controls
   const resetControlsTimeout = () => {
     setShowControls(true);
     if (controlsTimeoutRef.current) clearTimeout(controlsTimeoutRef.current);
@@ -98,17 +95,15 @@ export default function CustomVideoPlayer({
     }
   };
 
-  // Seek using absolute pageX — reliable across nested views
-  const seekFromPageX = (pageX: number) => {
+  const seekFromAbsoluteX = (absX: number) => {
     if (duration <= 0 || scrubberWidth <= 0) return;
-    const relX = pageX - scrubberPageXRef.current;
+    const relX = absX - scrubberPageXRef.current;
     const pct = Math.max(0, Math.min(1, relX / scrubberWidth));
     const seekTime = pct * duration;
     player.currentTime = seekTime;
     setCurrentTime(seekTime);
   };
 
-  // Measure scrubber's absolute screen position
   const handleScrubberLayout = () => {
     scrubberViewRef.current?.measureInWindow((x, _y, w, _h) => {
       scrubberPageXRef.current = x;
@@ -116,6 +111,29 @@ export default function CustomVideoPlayer({
     });
   };
 
+  const scrubberViewRef = useRef<View>(null);
+
+  /* ── Scrubber gesture ──
+     .runOnJS(true) → callbacks run on JS thread (no worklet needed)
+     .minDistance(0) → activates immediately on touch (tap-to-seek works)
+     This gesture is inside the FlatList item, and RNGH's FlatList
+     properly yields to nested gesture handlers.
+  */
+  const scrubGesture = Gesture.Pan()
+    .runOnJS(true)
+    .minDistance(0)
+    .onStart((e) => {
+      onScrubStart?.();
+      seekFromAbsoluteX(e.absoluteX);
+    })
+    .onUpdate((e) => {
+      seekFromAbsoluteX(e.absoluteX);
+    })
+    .onEnd(() => {
+      onScrubEnd?.();
+      resetControlsTimeout();
+    });
+
   const formatTime = (secs: number) => {
     const m = Math.floor(secs / 60);
     const s = Math.floor(secs % 60);
@@ -127,7 +145,7 @@ export default function CustomVideoPlayer({
   return (
     <TouchableWithoutFeedback onPress={handleScreenTap}>
       <View style={styles.container}>
-        <VideoView 
+        <VideoView
           style={styles.video}
           player={player}
           allowsFullscreen={false}
@@ -135,62 +153,37 @@ export default function CustomVideoPlayer({
           nativeControls={false}
         />
 
-        {/* Custom Controls Overlay */}
         {showControls && (
           <View style={styles.overlay} pointerEvents="box-none">
-            
-            {/* Center Play/Pause */}
-            <TouchableOpacity 
-              style={styles.playPauseBtn} 
+            <TouchableOpacity
+              style={styles.playPauseBtn}
               onPress={togglePlayPause}
               activeOpacity={0.7}
             >
-              <MaterialIcons 
-                name={isPlaying ? "pause" : "play-arrow"} 
-                size={48} 
-                color="#fff" 
+              <MaterialIcons
+                name={isPlaying ? 'pause' : 'play-arrow'}
+                size={48}
+                color="#fff"
               />
             </TouchableOpacity>
 
-            {/* Bottom Scrubber Bar */}
             <View style={[styles.bottomBar, { paddingBottom: insets.bottom + 120 }]}>
               <Text style={styles.timeText}>{formatTime(currentTime)}</Text>
-              
-              {/* 
-                Scrubber uses the Responder System with Capture phase
-                to intercept ALL touches before FlatList can steal them.
-                onResponderTerminationRequest={false} prevents FlatList
-                from reclaiming the gesture mid-drag.
-              */}
-              <View 
-                ref={scrubberViewRef}
-                style={styles.scrubberContainer}
-                onLayout={handleScrubberLayout}
-                onStartShouldSetResponder={() => true}
-                onStartShouldSetResponderCapture={() => true}
-                onMoveShouldSetResponder={() => true}
-                onMoveShouldSetResponderCapture={() => true}
-                onResponderTerminationRequest={() => false}
-                onResponderGrant={(e) => {
-                  onScrubStart?.();
-                  seekFromPageX(e.nativeEvent.pageX);
-                }}
-                onResponderMove={(e) => {
-                  seekFromPageX(e.nativeEvent.pageX);
-                }}
-                onResponderRelease={() => {
-                  onScrubEnd?.();
-                  resetControlsTimeout();
-                }}
-                onResponderTerminate={() => {
-                  onScrubEnd?.();
-                }}
-              >
-                <View style={styles.scrubberTrack}>
-                  <View style={[styles.scrubberFill, { width: `${progressPercent}%` }]} />
-                  <View style={[styles.scrubberThumb, { left: `${progressPercent}%` }]} />
+
+              {/* Scrubber — wrapped in GestureDetector so RNGH handles
+                  touch negotiation with the parent FlatList */}
+              <GestureDetector gesture={scrubGesture}>
+                <View
+                  ref={scrubberViewRef}
+                  style={styles.scrubberContainer}
+                  onLayout={handleScrubberLayout}
+                >
+                  <View style={styles.scrubberTrack}>
+                    <View style={[styles.scrubberFill, { width: `${progressPercent}%` }]} />
+                    <View style={[styles.scrubberThumb, { left: `${progressPercent}%` }]} />
+                  </View>
                 </View>
-              </View>
+              </GestureDetector>
 
               <Text style={styles.timeText}>{formatTime(duration)}</Text>
             </View>

keystone-app/components/FullScreenSwiper.tsx

@@ -1,14 +1,14 @@
 import React, { useRef, useState, useEffect } from 'react';
-import { 
-  View, 
-  StyleSheet, 
-  FlatList, 
-  Platform,
-  Animated,
-  useWindowDimensions,
-} from 'react-native';
+import { View, StyleSheet, Platform, useWindowDimensions } from 'react-native';
 import { Image } from 'expo-image';
-import { PinchGestureHandler, PanGestureHandler, State } from 'react-native-gesture-handler';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import { FlatList } from 'react-native-gesture-handler';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withSpring,
+  runOnJS,
+} from 'react-native-reanimated';
 import CustomVideoPlayer from './CustomVideoPlayer';
 
 interface FullScreenSwiperProps {
@@ -20,138 +20,102 @@ interface FullScreenSwiperProps {
 
 /* ─────────────────────────────────────────────────────────────
    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
+   • Gesture.Pinch() — native multi-touch pinch-to-zoom
+   • Gesture.Pan()   — single-finger swipe-down-to-close
+   • Both run on the UI thread via reanimated worklets
    ───────────────────────────────────────────────────────────── */
-function ZoomableImage({ 
-  uri, thumbUri, width, height, onSwipeDown, onZoomChange 
-}: { 
-  uri: string; thumbUri?: string; width: number; height: number; 
+function ZoomableImage({
+  uri, thumbUri, width, height, onSwipeDown, onZoomChange,
+}: {
+  uri: string; thumbUri?: string; width: number; height: number;
   onSwipeDown: () => void; onZoomChange: (zooming: boolean) => void;
 }) {
-  /* ── 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;
-
-  /* ── 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]);
-
-  /* ── 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();
+  const scale = useSharedValue(1);
+  const savedScale = useSharedValue(1);
+  const translateY = useSharedValue(0);
+
+  const pinchGesture = Gesture.Pinch()
+    .onStart(() => {
+      'worklet';
+      runOnJS(onZoomChange)(true);
+    })
+    .onUpdate((e) => {
+      'worklet';
+      scale.value = Math.max(0.5, Math.min(5, savedScale.value * e.scale));
+    })
+    .onEnd(() => {
+      'worklet';
+      runOnJS(onZoomChange)(false);
+      if (scale.value < 1.15) {
+        scale.value = withSpring(1, { damping: 15, stiffness: 150 });
+        savedScale.value = 1;
       } else {
-        // Keep the zoom level
-        const clamped = Math.min(5, newBase);
-        baseScaleRef.current = clamped;
-        baseScaleAnim.setValue(clamped);
-        pinchScaleAnim.setValue(1);
+        savedScale.value = Math.min(5, scale.value);
       }
-    }
-  };
-
-  /* ── 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);
-      if (e.nativeEvent.translationY > 100) {
-        onSwipeDownRef.current();
+    });
+
+  const panGesture = Gesture.Pan()
+    .minPointers(1)
+    .maxPointers(1)
+    .activeOffsetY(20)
+    .failOffsetX([-15, 15])
+    .onStart(() => {
+      'worklet';
+      runOnJS(onZoomChange)(true);
+    })
+    .onUpdate((e) => {
+      'worklet';
+      translateY.value = e.translationY;
+    })
+    .onEnd((e) => {
+      'worklet';
+      runOnJS(onZoomChange)(false);
+      if (e.translationY > 100) {
+        runOnJS(onSwipeDown)();
       } else {
-        Animated.spring(translateY, {
-          toValue: 0, useNativeDriver: true, bounciness: 0,
-        }).start();
+        translateY.value = withSpring(0, { damping: 15, stiffness: 150 });
       }
-    }
-  };
+    });
+
+  const composedGesture = Gesture.Simultaneous(pinchGesture, panGesture);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [
+      { scale: scale.value },
+      { translateY: translateY.value },
+    ],
+  }));
 
   return (
-    <PanGestureHandler
-      ref={panRef}
-      simultaneousHandlers={pinchRef}
-      minPointers={1}
-      maxPointers={1}
-      activeOffsetY={20}
-      failOffsetX={[-15, 15]}
-      onGestureEvent={onPanEvent}
-      onHandlerStateChange={onPanStateChange}
-    >
-      <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>
+    <GestureDetector gesture={composedGesture}>
+      <Animated.View
+        style={[
+          { width, height, justifyContent: 'center', alignItems: 'center' },
+          animatedStyle,
+        ]}
+      >
+        <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>
-    </PanGestureHandler>
+    </GestureDetector>
   );
 }
 
-
 /* ─────────────────────────────────────────────────────────────
    FullScreenSwiper
+   Uses RNGH's FlatList so gesture handlers inside items
+   properly negotiate with the scroll gesture on Android.
    ───────────────────────────────────────────────────────────── */
-export default function FullScreenSwiper({ 
-  assets, initialIndex, onClose, onIndexChange 
+export default function FullScreenSwiper({
+  assets, initialIndex, onClose, onIndexChange,
 }: FullScreenSwiperProps) {
   const { width, height } = useWindowDimensions();
   const [activeIndex, setActiveIndex] = useState(initialIndex);

keystone-app/package-lock.json

@@ -31,6 +31,7 @@
         "react-dom": "19.1.0",
         "react-native": "0.81.5",
         "react-native-gesture-handler": "~2.28.0",
+        "react-native-reanimated": "~4.1.1",
         "react-native-safe-area-context": "~5.6.0",
         "react-native-screens": "~4.16.0",
         "react-native-web": "^0.21.2"
@@ -1171,6 +1172,22 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/plugin-transform-template-literals": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.29.7.tgz",
+      "integrity": "sha512-NCSEJ4sLFU2gqAub45HYh4fus2yQ36rr6ei6vpU7NdoJqCpxvEG8E6eJpscGyXP3VHD2Ny+fSXr04k1hoUrFqA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
     "node_modules/@babel/plugin-transform-typescript": {
       "version": "7.29.7",
       "license": "MIT",
@@ -2999,6 +3016,556 @@
         "node": ">= 20.19.4"
       }
     },
+    "node_modules/@react-native/metro-babel-transformer": {
+      "version": "0.86.0",
+      "resolved": "https://registry.npmjs.org/@react-native/metro-babel-transformer/-/metro-babel-transformer-0.86.0.tgz",
+      "integrity": "sha512-SjKej3E5qIahqo/G+rSOrmJUQM44RyKtWtO+VfmKAAMoJWkBFomM22hTLKCIS5cdbIAJ9COAmU+KAi2wVSO0wQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/core": "^7.25.2",
+        "@react-native/babel-preset": "0.86.0",
+        "hermes-parser": "0.36.0",
+        "nullthrows": "^1.1.1"
+      },
+      "engines": {
+        "node": "^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "*"
+      }
+    },
+    "node_modules/@react-native/metro-babel-transformer/node_modules/@react-native/babel-plugin-codegen": {
+      "version": "0.86.0",
+      "resolved": "https://registry.npmjs.org/@react-native/babel-plugin-codegen/-/babel-plugin-codegen-0.86.0.tgz",
+      "integrity": "sha512-qdsABWNW7uTll90l4Vh03gjeyu3WVDi2CyiiyvYGMRDcoYbjbQi6df3BMAm9lQI2yslZ1T14LlDDAsgTwNxplA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/traverse": "^7.29.0",
+        "@react-native/codegen": "0.86.0"
+      },
+      "engines": {
+        "node": "^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0"
+      }
+    },
+    "node_modules/@react-native/metro-babel-transformer/node_modules/@react-native/babel-preset": {
+      "version": "0.86.0",
+      "resolved": "https://registry.npmjs.org/@react-native/babel-preset/-/babel-preset-0.86.0.tgz",
+      "integrity": "sha512-bYQcWiPySNvF4dns9Ls9gMmwgq66ohvM9Fwc/Kn8r85t66UNHxch3p1QwPiSorDelFauZwJbgo9+ReibTgvpbA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/core": "^7.25.2",
+        "@babel/plugin-proposal-export-default-from": "^7.24.7",
+        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+        "@babel/plugin-syntax-export-default-from": "^7.24.7",
+        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
+        "@babel/plugin-syntax-optional-chaining": "^7.8.3",
+        "@babel/plugin-transform-async-generator-functions": "^7.25.4",
+        "@babel/plugin-transform-async-to-generator": "^7.24.7",
+        "@babel/plugin-transform-block-scoping": "^7.25.0",
+        "@babel/plugin-transform-class-properties": "^7.25.4",
+        "@babel/plugin-transform-classes": "^7.25.4",
+        "@babel/plugin-transform-destructuring": "^7.24.8",
+        "@babel/plugin-transform-flow-strip-types": "^7.25.2",
+        "@babel/plugin-transform-for-of": "^7.24.7",
+        "@babel/plugin-transform-modules-commonjs": "^7.24.8",
+        "@babel/plugin-transform-named-capturing-groups-regex": "^7.24.7",
+        "@babel/plugin-transform-nullish-coalescing-operator": "^7.24.7",
+        "@babel/plugin-transform-optional-catch-binding": "^7.24.7",
+        "@babel/plugin-transform-optional-chaining": "^7.24.8",
+        "@babel/plugin-transform-private-methods": "^7.24.7",
+        "@babel/plugin-transform-private-property-in-object": "^7.24.7",
+        "@babel/plugin-transform-react-display-name": "^7.24.7",
+        "@babel/plugin-transform-react-jsx": "^7.25.2",
+        "@babel/plugin-transform-react-jsx-self": "^7.24.7",
+        "@babel/plugin-transform-react-jsx-source": "^7.24.7",
+        "@babel/plugin-transform-regenerator": "^7.24.7",
+        "@babel/plugin-transform-runtime": "^7.24.7",
+        "@babel/plugin-transform-typescript": "^7.25.2",
+        "@babel/plugin-transform-unicode-regex": "^7.24.7",
+        "@react-native/babel-plugin-codegen": "0.86.0",
+        "babel-plugin-syntax-hermes-parser": "0.36.0",
+        "babel-plugin-transform-flow-enums": "^0.0.2",
+        "react-refresh": "^0.14.0"
+      },
+      "engines": {
+        "node": "^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "*"
+      }
+    },
+    "node_modules/@react-native/metro-babel-transformer/node_modules/@react-native/codegen": {
+      "version": "0.86.0",
+      "resolved": "https://registry.npmjs.org/@react-native/codegen/-/codegen-0.86.0.tgz",
+      "integrity": "sha512-uTs9DBo3+/lUqinsGZK0FKJRBVClrwMXoZToaDxE1Q2SL2e55vs2GwyZfIKzPl5uJnbu4PfFMIp0/mLXLWUMuA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/core": "^7.25.2",
+        "@babel/parser": "^7.29.0",
+        "hermes-parser": "0.36.0",
+        "invariant": "^2.2.4",
+        "nullthrows": "^1.1.1",
+        "tinyglobby": "^0.2.15",
+        "yargs": "^17.6.2"
+      },
+      "engines": {
+        "node": "^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "*"
+      }
+    },
+    "node_modules/@react-native/metro-babel-transformer/node_modules/babel-plugin-syntax-hermes-parser": {
+      "version": "0.36.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-hermes-parser/-/babel-plugin-syntax-hermes-parser-0.36.0.tgz",
+      "integrity": "sha512-LhD0xdoedDw7ansQgXbB2DADLZIK/LRXuWNBPuVzMc5S2WK5GyT89tCM+cQzxFGO0mGyLK6D5TrVOJJzAoDy8Q==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "hermes-parser": "0.36.0"
+      }
+    },
+    "node_modules/@react-native/metro-babel-transformer/node_modules/hermes-estree": {
+      "version": "0.36.0",
+      "resolved": "https://registry.npmjs.org/hermes-estree/-/hermes-estree-0.36.0.tgz",
+      "integrity": "sha512-A1+8zn5oss2CFP7pKsOaxorQG6FNIz1WU1VDqruLPPZl3LVgeE2C5xfFg8Ow6/Ow4mSslLLtYP1J3n38eKyW9w==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@react-native/metro-babel-transformer/node_modules/hermes-parser": {
+      "version": "0.36.0",
+      "resolved": "https://registry.npmjs.org/hermes-parser/-/hermes-parser-0.36.0.tgz",
+      "integrity": "sha512-GdpwMmH5x6IpC1cijvcvYnlPB60Mh6kTSF/NFdYV/j56gYdi+0RIakYs+eqOV+bbO0SW7mgVVGSsTJxyPQfo3w==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "hermes-estree": "0.36.0"
+      }
+    },
+    "node_modules/@react-native/metro-config": {
+      "version": "0.86.0",
+      "resolved": "https://registry.npmjs.org/@react-native/metro-config/-/metro-config-0.86.0.tgz",
+      "integrity": "sha512-7v+xbTeEci9ZcQ/Z1OqI4RXcqN69wSMDYL5BAMvOReZ7U04+aDQ0/SQhClYPn6x2/RxM4WzMKSAuNyLKqvYVtw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@react-native/js-polyfills": "0.86.0",
+        "@react-native/metro-babel-transformer": "0.86.0",
+        "metro-config": "^0.84.3",
+        "metro-runtime": "^0.84.3"
+      },
+      "engines": {
+        "node": "^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0"
+      }
+    },
+    "node_modules/@react-native/metro-config/node_modules/@babel/code-frame": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.7.tgz",
+      "integrity": "sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.29.7",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@react-native/metro-config/node_modules/@react-native/js-polyfills": {
+      "version": "0.86.0",
+      "resolved": "https://registry.npmjs.org/@react-native/js-polyfills/-/js-polyfills-0.86.0.tgz",
+      "integrity": "sha512-zYy/Cjd1VTnZ2iCNaG9bDF9C3l2ntESiPRscjIlI5FKugu6aeTwsDSv1aI8Bc4Kp3vEdoVg+UQhLAhE4svREaQ==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": "^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0"
+      }
+    },
+    "node_modules/@react-native/metro-config/node_modules/accepts": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-2.0.0.tgz",
+      "integrity": "sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "mime-types": "^3.0.0",
+        "negotiator": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/@react-native/metro-config/node_modules/hermes-estree": {
+      "version": "0.35.0",
+      "resolved": "https://registry.npmjs.org/hermes-estree/-/hermes-estree-0.35.0.tgz",
+      "integrity": "sha512-xVx5Opwy8Oo1I5yGpVRhCvWL/iV3M+ylksSKVNlxxD90cpDpR/AR1jLYqK8HWihm065a6UI3HeyAmYzwS8NOOg==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@react-native/metro-config/node_modules/hermes-parser": {
+      "version": "0.35.0",
+      "resolved": "https://registry.npmjs.org/hermes-parser/-/hermes-parser-0.35.0.tgz",
+      "integrity": "sha512-9JLjeHxBx8T4CAsydZR49PNZUaix+WpQJwu9p2010lu+7Kwl6D/7wYFFJxoz+aXkaaClp9Zfg6W6/zVlSJORaA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "hermes-estree": "0.35.0"
+      }
+    },
+    "node_modules/@react-native/metro-config/node_modules/metro": {
+      "version": "0.84.4",
+      "resolved": "https://registry.npmjs.org/metro/-/metro-0.84.4.tgz",
+      "integrity": "sha512-8ETTubqfD6ornDy2zYDvRcKnVDOXdFJsjetYDBsY4oAsb6NJkiwFR+FaMESyGppFmQUyBQA4H4sFGxzcQSGtFA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.29.0",
+        "@babel/core": "^7.25.2",
+        "@babel/generator": "^7.29.1",
+        "@babel/parser": "^7.29.0",
+        "@babel/template": "^7.28.6",
+        "@babel/traverse": "^7.29.0",
+        "@babel/types": "^7.29.0",
+        "accepts": "^2.0.0",
+        "ci-info": "^2.0.0",
+        "connect": "^3.6.5",
+        "debug": "^4.4.0",
+        "error-stack-parser": "^2.0.6",
+        "flow-enums-runtime": "^0.0.6",
+        "graceful-fs": "^4.2.4",
+        "hermes-parser": "0.35.0",
+        "image-size": "^1.0.2",
+        "invariant": "^2.2.4",
+        "jest-worker": "^29.7.0",
+        "jsc-safe-url": "^0.2.2",
+        "lodash.throttle": "^4.1.1",
+        "metro-babel-transformer": "0.84.4",
+        "metro-cache": "0.84.4",
+        "metro-cache-key": "0.84.4",
+        "metro-config": "0.84.4",
+        "metro-core": "0.84.4",
+        "metro-file-map": "0.84.4",
+        "metro-resolver": "0.84.4",
+        "metro-runtime": "0.84.4",
+        "metro-source-map": "0.84.4",
+        "metro-symbolicate": "0.84.4",
+        "metro-transform-plugins": "0.84.4",
+        "metro-transform-worker": "0.84.4",
+        "mime-types": "^3.0.1",
+        "nullthrows": "^1.1.1",
+        "serialize-error": "^2.1.0",
+        "source-map": "^0.5.6",
+        "throat": "^5.0.0",
+        "ws": "^7.5.10",
+        "yargs": "^17.6.2"
+      },
+      "bin": {
+        "metro": "src/cli.js"
+      },
+      "engines": {
+        "node": "^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0"
+      }
+    },
+    "node_modules/@react-native/metro-config/node_modules/metro-babel-transformer": {
+      "version": "0.84.4",
+      "resolved": "https://registry.npmjs.org/metro-babel-transformer/-/metro-babel-transformer-0.84.4.tgz",
+      "integrity": "sha512-rvCfz8snl9h20VcvpOHxZuHP1SlAkv4HXbzw7nyyVwu6Eqo5PRerbakQ9XmUCOsRy70spJ37O+G1TK8oMzo48g==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/core": "^7.25.2",
+        "flow-enums-runtime": "^0.0.6",
+        "hermes-parser": "0.35.0",
+        "metro-cache-key": "0.84.4",
+        "nullthrows": "^1.1.1"
+      },
+      "engines": {
+        "node": "^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0"
+      }
+    },
+    "node_modules/@react-native/metro-config/node_modules/metro-cache": {
+      "version": "0.84.4",
+      "resolved": "https://registry.npmjs.org/metro-cache/-/metro-cache-0.84.4.tgz",
+      "integrity": "sha512-gpcFQdSLUwUCk71saKoE64jLFbx2nwTfVCcPSULMNT8QYq0p1eZZE29Jvd0HtT/UlhC3ZOutLxJME5xqD2JUZg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "exponential-backoff": "^3.1.1",
+        "flow-enums-runtime": "^0.0.6",
+        "https-proxy-agent": "^7.0.5",
+        "metro-core": "0.84.4"
+      },
+      "engines": {
+        "node": "^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0"
+      }
+    },
+    "node_modules/@react-native/metro-config/node_modules/metro-cache-key": {
+      "version": "0.84.4",
+      "resolved": "https://registry.npmjs.org/metro-cache-key/-/metro-cache-key-0.84.4.tgz",
+      "integrity": "sha512-wVO79aGrkYImpnaVS4+d5RrRBRPX31QtvKB3wKGBuiNSznduZTQHzsrJZRroFJSwnygrzdsGUtDQPuqqFjFdvw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "flow-enums-runtime": "^0.0.6"
+      },
+      "engines": {
+        "node": "^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0"
+      }
+    },
+    "node_modules/@react-native/metro-config/node_modules/metro-config": {
+      "version": "0.84.4",
+      "resolved": "https://registry.npmjs.org/metro-config/-/metro-config-0.84.4.tgz",
+      "integrity": "sha512-PMotGDjXcXLWo2TMRH+VR99phFNgYTwqh4OoieIKK3yTJa1Jmkl+fZJxDO0jfBvNF+WESHciHvpNuBtXaF3B0Q==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "connect": "^3.6.5",
+        "flow-enums-runtime": "^0.0.6",
+        "jest-validate": "^29.7.0",
+        "metro": "0.84.4",
+        "metro-cache": "0.84.4",
+        "metro-core": "0.84.4",
+        "metro-runtime": "0.84.4",
+        "yaml": "^2.6.1"
+      },
+      "engines": {
+        "node": "^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0"
+      }
+    },
+    "node_modules/@react-native/metro-config/node_modules/metro-core": {
+      "version": "0.84.4",
+      "resolved": "https://registry.npmjs.org/metro-core/-/metro-core-0.84.4.tgz",
+      "integrity": "sha512-HONpWC5LGXZn3ffkd4Hu6AIrfE7j4Z0g0wMo/goV24WOB3lhuFZ40KgvaDiSw8iyQHloMYay5N/wPX+z8oN/PQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "flow-enums-runtime": "^0.0.6",
+        "lodash.throttle": "^4.1.1",
+        "metro-resolver": "0.84.4"
+      },
+      "engines": {
+        "node": "^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0"
+      }
+    },
+    "node_modules/@react-native/metro-config/node_modules/metro-file-map": {
+      "version": "0.84.4",
+      "resolved": "https://registry.npmjs.org/metro-file-map/-/metro-file-map-0.84.4.tgz",
+      "integrity": "sha512-KSVDi/u60hKPx++NLu3MTIvyjzNoJnFAF8PQFxaj1jiSka/wjw+Ua6sNuJ0TDHQv+7AAoFQxeMgaRAe8Yic5wQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "debug": "^4.4.0",
+        "fb-watchman": "^2.0.0",
+        "flow-enums-runtime": "^0.0.6",
+        "graceful-fs": "^4.2.4",
+        "invariant": "^2.2.4",
+        "jest-worker": "^29.7.0",
+        "micromatch": "^4.0.4",
+        "nullthrows": "^1.1.1",
+        "walker": "^1.0.7"
+      },
+      "engines": {
+        "node": "^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0"
+      }
+    },
+    "node_modules/@react-native/metro-config/node_modules/metro-minify-terser": {
+      "version": "0.84.4",
+      "resolved": "https://registry.npmjs.org/metro-minify-terser/-/metro-minify-terser-0.84.4.tgz",
+      "integrity": "sha512-5qpbaVOMC7CPitIpuewzVeGw7E+C3ykbv2mqTjQLl85Z3annSVGlSCTcsZjqXZzjupfK4Ztj3dDc4kc44NZwtQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "flow-enums-runtime": "^0.0.6",
+        "terser": "^5.15.0"
+      },
+      "engines": {
+        "node": "^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0"
+      }
+    },
+    "node_modules/@react-native/metro-config/node_modules/metro-resolver": {
+      "version": "0.84.4",
+      "resolved": "https://registry.npmjs.org/metro-resolver/-/metro-resolver-0.84.4.tgz",
+      "integrity": "sha512-1qLgbxQ5ZGhhutuPot1Yp348ofDsATL2WkrHF65TobqTT9K3P9qJXw38bomk7ncp5B7OYMfWwtyBZo1lCV792A==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "flow-enums-runtime": "^0.0.6"
+      },
+      "engines": {
+        "node": "^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0"
+      }
+    },
+    "node_modules/@react-native/metro-config/node_modules/metro-runtime": {
+      "version": "0.84.4",
+      "resolved": "https://registry.npmjs.org/metro-runtime/-/metro-runtime-0.84.4.tgz",
+      "integrity": "sha512-Jibypds4g7AhzdRKY+kDoj51s5EXMwgyp5ddtlreDAsWefMdOx+agWqgm0H2XSZ/ueanHHVM89fnf5OJnlxa8Q==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/runtime": "^7.25.0",
+        "flow-enums-runtime": "^0.0.6"
+      },
+      "engines": {
+        "node": "^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0"
+      }
+    },
+    "node_modules/@react-native/metro-config/node_modules/metro-source-map": {
+      "version": "0.84.4",
+      "resolved": "https://registry.npmjs.org/metro-source-map/-/metro-source-map-0.84.4.tgz",
+      "integrity": "sha512-jbWkPxIesVuo1IWkvezmMJld6iu8nD62GsrZiV6jP37AOdbo4OBq1FJ+qkOg8sV05wAHB//jAbziuW0SlJfW4g==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/traverse": "^7.29.0",
+        "@babel/types": "^7.29.0",
+        "flow-enums-runtime": "^0.0.6",
+        "invariant": "^2.2.4",
+        "metro-symbolicate": "0.84.4",
+        "nullthrows": "^1.1.1",
+        "ob1": "0.84.4",
+        "source-map": "^0.5.6",
+        "vlq": "^1.0.0"
+      },
+      "engines": {
+        "node": "^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0"
+      }
+    },
+    "node_modules/@react-native/metro-config/node_modules/metro-symbolicate": {
+      "version": "0.84.4",
+      "resolved": "https://registry.npmjs.org/metro-symbolicate/-/metro-symbolicate-0.84.4.tgz",
+      "integrity": "sha512-OnfpacxUqGPZQ27t8qK9mFa7uqHIlVWeqRqkCbvMvreEBiamEeOn8krKtcwgP5M4cYDPwuSmCTopHMVthqG4zA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "flow-enums-runtime": "^0.0.6",
+        "invariant": "^2.2.4",
+        "metro-source-map": "0.84.4",
+        "nullthrows": "^1.1.1",
+        "source-map": "^0.5.6",
+        "vlq": "^1.0.0"
+      },
+      "bin": {
+        "metro-symbolicate": "src/index.js"
+      },
+      "engines": {
+        "node": "^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0"
+      }
+    },
+    "node_modules/@react-native/metro-config/node_modules/metro-transform-plugins": {
+      "version": "0.84.4",
+      "resolved": "https://registry.npmjs.org/metro-transform-plugins/-/metro-transform-plugins-0.84.4.tgz",
+      "integrity": "sha512-kehr6HbAecqD0/a3xLXobELdPaAmRAl8bel0qagPF4vhZtux93nS8S4eq2kgKt6J2GnQpVjSoW1PXdst04mwow==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/core": "^7.25.2",
+        "@babel/generator": "^7.29.1",
+        "@babel/template": "^7.28.6",
+        "@babel/traverse": "^7.29.0",
+        "flow-enums-runtime": "^0.0.6",
+        "nullthrows": "^1.1.1"
+      },
+      "engines": {
+        "node": "^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0"
+      }
+    },
+    "node_modules/@react-native/metro-config/node_modules/metro-transform-worker": {
+      "version": "0.84.4",
+      "resolved": "https://registry.npmjs.org/metro-transform-worker/-/metro-transform-worker-0.84.4.tgz",
+      "integrity": "sha512-W1IYMvvXTu4MxYr7d9h7CeG2vpIr3bmLLIavkPY4O1ilzDrvS8z/NEe6y+pC44Ff7raMXQgYSfdqDUwN/i39gg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/core": "^7.25.2",
+        "@babel/generator": "^7.29.1",
+        "@babel/parser": "^7.29.0",
+        "@babel/types": "^7.29.0",
+        "flow-enums-runtime": "^0.0.6",
+        "metro": "0.84.4",
+        "metro-babel-transformer": "0.84.4",
+        "metro-cache": "0.84.4",
+        "metro-cache-key": "0.84.4",
+        "metro-minify-terser": "0.84.4",
+        "metro-source-map": "0.84.4",
+        "metro-transform-plugins": "0.84.4",
+        "nullthrows": "^1.1.1"
+      },
+      "engines": {
+        "node": "^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0"
+      }
+    },
+    "node_modules/@react-native/metro-config/node_modules/mime-db": {
+      "version": "1.54.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.54.0.tgz",
+      "integrity": "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/@react-native/metro-config/node_modules/mime-types": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-3.0.2.tgz",
+      "integrity": "sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "mime-db": "^1.54.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/@react-native/metro-config/node_modules/negotiator": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-1.0.0.tgz",
+      "integrity": "sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/@react-native/metro-config/node_modules/ob1": {
+      "version": "0.84.4",
+      "resolved": "https://registry.npmjs.org/ob1/-/ob1-0.84.4.tgz",
+      "integrity": "sha512-eJXMpz4aQHXF/YBB9ddqZDIS+ooO91hObo9FoW/xBkr54/zCwYYCDqT/O54vNo8kOkWs5Ou/y28NgdrV0edQNA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "flow-enums-runtime": "^0.0.6"
+      },
+      "engines": {
+        "node": "^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0"
+      }
+    },
+    "node_modules/@react-native/metro-config/node_modules/yaml": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.9.0.tgz",
+      "integrity": "sha512-2AvhNX3mb8zd6Zy7INTtSpl1F15HW6Wnqj0srWlkKLcpYl/gMIMJiyuGq2KeI2YFxUPjdlB+3Lc10seMLtL4cA==",
+      "license": "ISC",
+      "peer": true,
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/eemeli"
+      }
+    },
     "node_modules/@react-native/normalize-colors": {
       "version": "0.81.5",
       "license": "MIT"
@@ -7888,6 +8455,21 @@
         "react-native": "*"
       }
     },
+    "node_modules/react-native-reanimated": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-4.1.7.tgz",
+      "integrity": "sha512-Q4H6xA3Tn7QL0/E/KjI86I1KK4tcf+ErRE04LH34Etka2oVQhW6oXQ+Q8ZcDCVxiWp5vgbBH6XcH8BOo4w/Rhg==",
+      "license": "MIT",
+      "dependencies": {
+        "react-native-is-edge-to-edge": "^1.2.1",
+        "semver": "^7.7.2"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "0.78 - 0.82",
+        "react-native-worklets": "0.5 - 0.8"
+      }
+    },
     "node_modules/react-native-safe-area-context": {
       "version": "5.6.2",
       "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-5.6.2.tgz",
@@ -7939,6 +8521,32 @@
       "version": "6.0.0",
       "license": "MIT"
     },
+    "node_modules/react-native-worklets": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/react-native-worklets/-/react-native-worklets-0.8.3.tgz",
+      "integrity": "sha512-oCBJROyLU7yG/1R8s0INMflygTH71bx+5XcYkH0CM938TlhSoVbiunE1WVW5FZa51vwYqfLie/IXMX2s1Kh3eg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/plugin-transform-arrow-functions": "^7.27.1",
+        "@babel/plugin-transform-class-properties": "^7.27.1",
+        "@babel/plugin-transform-classes": "^7.28.4",
+        "@babel/plugin-transform-nullish-coalescing-operator": "^7.27.1",
+        "@babel/plugin-transform-optional-chaining": "^7.27.1",
+        "@babel/plugin-transform-shorthand-properties": "^7.27.1",
+        "@babel/plugin-transform-template-literals": "^7.27.1",
+        "@babel/plugin-transform-unicode-regex": "^7.27.1",
+        "@babel/preset-typescript": "^7.27.1",
+        "convert-source-map": "^2.0.0",
+        "semver": "^7.7.3"
+      },
+      "peerDependencies": {
+        "@babel/core": "*",
+        "@react-native/metro-config": "*",
+        "react": "*",
+        "react-native": "0.81 - 0.85"
+      }
+    },
     "node_modules/react-native/node_modules/@react-native/virtualized-lists": {
       "version": "0.81.5",
       "license": "MIT",

keystone-app/package.json

@@ -26,6 +26,7 @@
     "react-dom": "19.1.0",
     "react-native": "0.81.5",
     "react-native-gesture-handler": "~2.28.0",
+    "react-native-reanimated": "~4.1.1",
     "react-native-safe-area-context": "~5.6.0",
     "react-native-screens": "~4.16.0",
     "react-native-web": "^0.21.2"