@momo-kits/foundation 0.164.1-beta.3 → 0.164.1-beta.5

package/Application/utils.tsx

@@ -335,11 +335,20 @@ const useNativeCanGoBack = () => {
 };
 
 /**
- * finger travel that reads as "swipe back recognised". flat px on purpose:
- * scaling it by screen width would move the tick to a different physical
- * thumb distance on every device
+ * fraction of screen width at which releasing commits the pop. deliberately
+ * pinned to react-navigation's own rule: Card.tsx (GestureState.END,
+ * @react-navigation/stack 7.4.2) closes the card when
+ * `(translation + velocity * gestureVelocityImpact) * inverted > distance / 2`
+ * with `distance = layout.width` for a horizontal gesture, and exposes no
+ * option to override it. so the tick means "release now and you go back"
+ * instead of marking a distance of its own — keep the two in sync.
+ *
+ * mid drag only translation is known, velocity exists solely at release, so a
+ * short fast flick can commit without ever crossing this and pops with no
+ * tick. that asymmetry is intended: modelling velocity per frame would tick
+ * on swipes that then do not commit, which is the worse error
  */
-const SWIPE_BACK_HAPTIC_THRESHOLD = 100;
+const SWIPE_BACK_HAPTIC_COMMIT_RATIO = 0.5;
 
 const readAnimatedValue = (node: unknown, fallback: number): number => {
   const getValue = (node as { __getValue?: () => unknown } | undefined)
@@ -371,8 +380,8 @@ const getSwipeGestureValue = (
 };
 
 /**
- * one light tick once the swipe back has travelled far enough to read as
- * recognised. iOS only, mirroring `gestureEnabled` in getStackOptions.
+ * one light tick once the swipe back passes the point where releasing commits
+ * the pop. iOS only, mirroring `gestureEnabled` in getStackOptions.
  *
  * both listeners are installed on mount and never lazily inside the gesture:
  * on the New Architecture `addListener` queues `startListeningToAnimatedNodeValue`
@@ -389,12 +398,19 @@ const useSwipeBackHaptic = () => {
   const { navigator } = useContext<any>(ApplicationContext);
   const animation = useContext(CardAnimationContext);
 
+  /**
+   * the latch has to outlive the effect. `animation` identity changes on every
+   * navigator render, so a `hasFired` local re-arms several times per drag and
+   * the tick then repeats on every frame past the threshold
+   */
+  const hasFired = useRef(false);
+
   useEffect(() => {
     if (Platform.OS !== 'ios' || !animation) {
       return;
     }
 
-    const { swiping, inverted, current } = animation;
+    const { swiping, inverted, current, layouts } = animation;
     const gesture = getSwipeGestureValue(current?.progress);
     if (!gesture || typeof swiping?.addListener !== 'function') {
       return;
@@ -406,7 +422,6 @@ const useSwipeBackHaptic = () => {
      * has already been missed
      */
     let isSwiping = readAnimatedValue(swiping, 0) === 1;
-    let hasFired = false;
 
     /**
      * sign, not magnitude: a leftward overdrag reports a negative
@@ -414,25 +429,33 @@ const useSwipeBackHaptic = () => {
      */
     const direction = readAnimatedValue(inverted, 1);
 
+    /**
+     * plain JS numbers, not animated nodes (`StackCardInterpolationProps`).
+     * screen layout can still be unmeasured on an early render, and a zero
+     * width would put the threshold at 0 and tick the moment the finger moves
+     */
+    const commitThreshold =
+      (layouts?.screen?.width ?? 0) * SWIPE_BACK_HAPTIC_COMMIT_RATIO;
+
     const swipingListener = swiping.addListener(({ value }) => {
       isSwiping = value === 1;
       if (!isSwiping) {
-        hasFired = false;
+        hasFired.current = false;
       }
     });
 
     const gestureListener = gesture.addListener(({ value: translation }) => {
-      if (!isSwiping) {
+      if (!isSwiping || commitThreshold <= 0) {
         return;
       }
 
-      if (translation * direction < SWIPE_BACK_HAPTIC_THRESHOLD) {
-        hasFired = false;
+      if (translation * direction < commitThreshold) {
+        hasFired.current = false;
         return;
       }
 
-      if (!hasFired) {
-        hasFired = true;
+      if (!hasFired.current) {
+        hasFired.current = true;
         navigator?.maxApi?.triggerEventVibration?.('light');
       }
     });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.164.1-beta.3",
+    "version": "0.164.1-beta.5",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},