Add pull-down gesture dismissal for mobile modals

projects/app/src/client/ui/PageSheetModal.tsx

@@ -2,6 +2,7 @@ import type { ReactNode } from "react";
 import { useEffect, useMemo, useState } from "react";
 import type { PressableProps } from "react-native";
 import { Modal, Platform, View } from "react-native";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
 import Reanimated, {
   Easing,
   Extrapolation,
@@ -13,8 +14,10 @@ import Reanimated, {
   withSpring,
   withTiming,
 } from "react-native-reanimated";
+import { runOnJS } from "react-native-worklets";
 
 import { useEventCallback } from "../hooks/useEventCallback";
+import { hapticImpactIfMobile } from "../hooks/hapticImpactIfMobile";
 import { ReanimatedPressable } from "./ReanimatedPressable";
 
 export type PageSheetChild = (options: { dismiss: () => void }) => ReactNode;
@@ -214,6 +217,8 @@ const IosImpl = ({ onDismiss, children }: ImplProps) => {
     [onDismiss],
   );
 
+  // iOS pageSheet already supports native pull-to-dismiss,
+  // so we rely on that instead of adding custom gestures
   return (
     <Modal
       animationType="slide"
@@ -243,20 +248,80 @@ const IosImpl = ({ onDismiss, children }: ImplProps) => {
 };
 
 const DefaultImpl = ({ children, onDismiss }: ImplProps) => {
+  const translateY = useSharedValue(0);
+  const [dismissing, setDismissing] = useState(false);
+
   const api = useMemo(
     () => ({
-      dismiss: onDismiss,
+      dismiss: () => {
+        setDismissing(true);
+      },
     }),
-    [onDismiss],
+    [],
   );
 
+  const handleDismiss = useEventCallback(() => {
+    hapticImpactIfMobile();
+    onDismiss();
+  });
+
+  // Pan gesture for pull-to-dismiss
+  const panGesture = Gesture.Pan()
+    .activeOffsetY(10) // Only activate when dragging down more than 10px
+    .onUpdate((event) => {
+      // Only allow downward movement
+      if (event.translationY > 0) {
+        // Add resistance effect - movement becomes harder as you drag further
+        const resistance = Math.min(event.translationY / 3, 200);
+        translateY.set(resistance);
+      }
+    })
+    .onEnd((event) => {
+      const shouldDismiss =
+        event.translationY > 100 || // Dragged far enough
+        (event.translationY > 40 && event.velocityY > 800); // Or sufficient velocity
+
+      if (shouldDismiss) {
+        // Animate off screen (screen height + padding)
+        translateY.set(
+          withTiming(600, { duration: 250 }, () => {
+            runOnJS(handleDismiss)();
+          }),
+        );
+      } else {
+        // Snap back to original position
+        translateY.set(withSpring(0, { damping: 15, stiffness: 400 }));
+      }
+    });
+
+  // Handle dismissing state
+  useEffect(() => {
+    if (dismissing) {
+      translateY.set(
+        withTiming(600, { duration: 250 }, () => {
+          runOnJS(handleDismiss)();
+        }),
+      );
+    }
+  }, [dismissing, handleDismiss, translateY]);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{ translateY: translateY.get() }],
+    };
+  });
+
   return (
     <Modal
       animationType="slide"
       presentationStyle="pageSheet"
       onRequestClose={api.dismiss}
     >
-      <View className={`flex-1 bg-bg`}>{children(api)}</View>
+      <GestureDetector gesture={panGesture}>
+        <Reanimated.View className={`flex-1 bg-bg`} style={animatedStyle}>
+          {children(api)}
+        </Reanimated.View>
+      </GestureDetector>
     </Modal>
   );
 };

projects/app/src/client/ui/WikiHanziWordModal.demo.tsx

@@ -1,11 +1,30 @@
 import { WikiHanziWordModal } from "@/client/ui/WikiHanziWordModal";
+import { useState } from "react";
+import { RectButton } from "./RectButton";
 
 export default () => {
+  const [showModal, setShowModal] = useState(false);
+
   return (
-    <WikiHanziWordModal
-      devUiSnapshotMode
-      hanziWord={`你好:hello`}
-      onDismiss={() => null}
-    />
+    <>
+      <RectButton
+        variant="filled"
+        onPress={() => {
+          setShowModal(true);
+        }}
+      >
+        Open Wiki Modal (Test Pull-Down Gesture)
+      </RectButton>
+
+      {showModal && (
+        <WikiHanziWordModal
+          devUiSnapshotMode={false}
+          hanziWord={`你好:hello`}
+          onDismiss={() => {
+            setShowModal(false);
+          }}
+        />
+      )}
+    </>
   );
 };