@honeypathkar/react-native-predictive-back-gesture 1.0.0

package/src/PredectiveBack.js

@@ -0,0 +1,92 @@
+// src/native/PredictiveBack.js — New File (JS Bridge + Ownership Model)
+
+// Create at src/native/PredictiveBack.js (adapt path to your project).
+
+
+
+import { NativeEventEmitter, NativeModules, Platform } from 'react-native';
+
+const PredictiveBackModule =
+  Platform.OS === 'android' ? NativeModules.PredictiveBackModule : null;
+
+/** True when the native back-event bridge is present (Android only). */
+export const PREDICTIVE_BACK_SUPPORTED = PredictiveBackModule != null;
+
+/**
+ * True when the OS also reports live gesture progress (Android 14 / API 34+).
+ * Below that only the commit arrives — callers should play a timed animation.
+ */
+export const PREDICTIVE_BACK_HAS_PROGRESS =
+  PREDICTIVE_BACK_SUPPORTED && PredictiveBackModule.progressAvailable === true;
+
+export const EDGE_LEFT  = 0;
+export const EDGE_RIGHT = 1;
+
+/** Back is React Native's to handle (BackHandler + React Navigation). */
+export const BACK_MODE_DEFAULT = 'default';
+/**
+ * Nothing in the app claims back → Android plays its own back-to-home animation.
+ * Set this at the root of the stack (nothing to go back to).
+ */
+export const BACK_MODE_SYSTEM  = 'system';
+
+let owner       = null;
+let handlers    = null;
+let fallbackMode = BACK_MODE_DEFAULT;
+let appliedMode  = null;
+let subscriptions = null;
+
+const apply = () => {
+  const mode = owner ? 'app' : fallbackMode;
+  if (mode === appliedMode) return;
+  appliedMode = mode;
+  PredictiveBackModule.setMode(mode);
+};
+
+const dispatch = (name, event) => {
+  const handler = handlers && handlers[name];
+  if (handler) handler(event);
+};
+
+const ensureSubscribed = () => {
+  if (subscriptions || !PredictiveBackModule) return;
+  const emitter = new NativeEventEmitter(PredictiveBackModule);
+  subscriptions = [
+    emitter.addListener('predictiveBackStart',    e => dispatch('onStart',    e)),
+    emitter.addListener('predictiveBackProgress', e => dispatch('onProgress', e)),
+    emitter.addListener('predictiveBackCancel',   () => dispatch('onCancel')),
+    emitter.addListener('predictiveBackCommit',   () => dispatch('onCommit')),
+  ];
+};
+
+/**
+ * What happens when no screen has claimed back.
+ * Call from navigator on state change.
+ */
+export const setFallbackBackMode = mode => {
+  if (!PredictiveBackModule || fallbackMode === mode) return;
+  fallbackMode = mode;
+  apply();
+};
+
+/**
+ * Route back events to `nextHandlers` and enable the native callback.
+ * `token` is any stable object (e.g. useRef({}).current) that identifies the caller.
+ */
+export const acquirePredictiveBack = (token, nextHandlers) => {
+  if (!PredictiveBackModule) return;
+  ensureSubscribed();
+  owner = token;
+  handlers = nextHandlers;
+  appliedMode = null;   // force re-apply even if mode string unchanged
+  apply();
+};
+
+/** Give back control, but only if `token` still holds it. */
+export const releasePredictiveBack = token => {
+  if (!PredictiveBackModule || owner !== token) return;
+  owner = null;
+  handlers = null;
+  apply();
+};
+

package/src/SwipableScreen.jsx

@@ -0,0 +1,276 @@
+import React, { useCallback, useEffect, useRef } from "react";
+import { StyleSheet, Dimensions, View } from "react-native";
+import { GestureDetector, Gesture } from "react-native-gesture-handler";
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+  withSpring,
+  runOnJS,
+  interpolate,
+  Extrapolation,
+  Easing,
+  cancelAnimation,
+} from "react-native-reanimated";
+import { useNavigation, useFocusEffect } from "@react-navigation/native";
+import { useTheme } from "react-native-paper";
+import {
+  PREDICTIVE_BACK_HAS_PROGRESS,
+  PREDICTIVE_BACK_SUPPORTED,
+  acquirePredictiveBack,
+  releasePredictiveBack,
+} from "./PredectiveBack";
+
+const { width, height } = Dimensions.get("window");
+
+// Material predictive-back peek: the card shrinks and drifts a little way to the right
+// while the gesture is in flight, revealing the screen underneath. It only leaves the
+// screen once the user commits.
+const MAX_SCALE_DOWN = 0.13;
+const MAX_PEEK_X = width * 0.12;
+const MAX_PEEK_Y = height * 0.03;
+const CORNER_RADIUS = 32;
+const MAX_DIM = 0.5;
+
+// Screens enter from the right and leave back to the right — the exit always mirrors
+// the entry, whichever edge the gesture came from.
+const ENTER_DURATION = 280;
+const EXIT_DURATION = 240;
+const EASING = Easing.out(Easing.bezierFn(0.25, 0.46, 0.45, 0.94));
+const SPRING = { damping: 28, stiffness: 260, mass: 0.85 };
+
+// Drag gesture: how far the finger travels for a full peek, and what commits it.
+const EDGE_WIDTH = 60;
+// Keeps the strip clear of the header, so the back button stays tappable.
+const HEADER_INSET = 75;
+const DRAG_RANGE = width * 0.6;
+const PEEK_THRESHOLD = 0.35;
+const VELOCITY_THRESHOLD = 900;
+const MIN_VELOCITY_DISTANCE = 50;
+
+const SwipeableScreen = ({ children, enabled = true, style, onHaptic }) => {
+  const navigation = useNavigation();
+  const theme = useTheme();
+
+  // Gesture progress (0…1) — drives the peek: shrink, drift right, rounded corners.
+  const peek = useSharedValue(0);
+  // Dismissal progress (0…1) — slides the card clear to the right. Also runs in
+  // reverse on mount so the entry mirrors the exit.
+  const exit = useSharedValue(1);
+  // -1…1, how far the touch sits above/below centre; tilts the peek vertically.
+  const pivot = useSharedValue(0);
+  // Set while the OS gesture owns the animation, so the pan cannot drive it too.
+  const nativeActive = useSharedValue(0);
+
+  // Guards against a second back event landing while the exit animation is running.
+  const isDismissing = useRef(false);
+
+  // ─── Mount: slide in from the right ─────────────────────────────────────
+  useEffect(() => {
+    exit.value = withTiming(0, { duration: ENTER_DURATION, easing: EASING });
+  }, [exit]);
+
+  // ─── JS-thread helpers ───────────────────────────────────────────────────
+  const fireHaptic = useCallback(() => {
+    try {
+      if (onHaptic) onHaptic();
+    } catch (e) {}
+  }, [onHaptic]);
+
+  const settle = useCallback(() => {
+    // Put the card back at rest — used when a pop is refused or cancelled.
+    isDismissing.current = false;
+    nativeActive.value = 0;
+    peek.value = withTiming(0, { duration: 160, easing: EASING });
+    exit.value = withTiming(0, { duration: 200, easing: EASING });
+  }, [peek, exit, nativeActive]);
+
+  const goBack = useCallback(() => {
+    if (!navigation.canGoBack()) {
+      settle();
+      return;
+    }
+    navigation.goBack();
+    // goBack dispatches through `beforeRemove`, so it may not actually pop.
+    requestAnimationFrame(() => {
+      if (navigation.isFocused()) {
+        settle();
+      }
+    });
+  }, [navigation, settle]);
+
+  // ─── Commit / cancel ─────────────────────────────────────────────────────
+  const commit = useCallback(
+    (duration = EXIT_DURATION) => {
+      if (isDismissing.current) {
+        return;
+      }
+      isDismissing.current = true;
+      fireHaptic();
+      cancelAnimation(exit);
+      exit.value = withTiming(1, { duration, easing: EASING }, (finished) => {
+        "worklet";
+        if (finished) {
+          runOnJS(goBack)();
+        }
+      });
+    },
+    [exit, fireHaptic, goBack],
+  );
+
+  const cancel = useCallback(() => {
+    nativeActive.value = 0;
+    cancelAnimation(peek);
+    peek.value = withSpring(0, SPRING);
+  }, [peek, nativeActive]);
+
+  // ─── System back gesture (Android) ───────────────────────────────────────
+  const token = useRef({}).current;
+  const isActive = enabled && navigation.canGoBack();
+
+  useFocusEffect(
+    useCallback(() => {
+      if (!PREDICTIVE_BACK_SUPPORTED || !isActive) {
+        return undefined;
+      }
+
+      const track = (event) => {
+        peek.value = event.progress;
+        pivot.value = (event.touchY / height) * 2 - 1;
+      };
+
+      acquirePredictiveBack(token, {
+        onStart: (event) => {
+          if (isDismissing.current) {
+            return;
+          }
+          nativeActive.value = 1;
+          cancelAnimation(peek);
+          track(event);
+        },
+        onProgress: (event) => {
+          if (!isDismissing.current) {
+            track(event);
+          }
+        },
+        onCancel: cancel,
+        // Without live progress (pre-Android 14, or a 3-button back press) the card
+        // has not moved yet, so give the slide-out a little more room to breathe.
+        onCommit: () =>
+          commit(PREDICTIVE_BACK_HAS_PROGRESS ? EXIT_DURATION : ENTER_DURATION),
+      });
+
+      return () => releasePredictiveBack(token);
+    }, [token, isActive, peek, pivot, nativeActive, cancel, commit]),
+  );
+
+  // ─── Drag-to-close from the left edge ────────────────────────────────────
+  // On Android this covers the strip just inside the system gesture zone; on iOS it
+  // is the only way back. Both drive the same peek, so the card looks identical
+  // however the gesture arrived.
+  const panGesture = Gesture.Pan()
+    .enabled(isActive)
+    .hitSlop({ left: 0, width: EDGE_WIDTH, top: -HEADER_INSET })
+    .activeOffsetX([10, 500])
+    .failOffsetY([-18, 18])
+    .onBegin(() => {
+      "worklet";
+      if (nativeActive.value) {
+        return;
+      }
+      cancelAnimation(peek);
+    })
+    .onUpdate((event) => {
+      "worklet";
+      if (nativeActive.value || event.translationX <= 0) {
+        return;
+      }
+      peek.value = Math.min(event.translationX / DRAG_RANGE, 1);
+      pivot.value = (event.y / height) * 2 - 1;
+    })
+    .onEnd((event) => {
+      "worklet";
+      if (nativeActive.value) {
+        return;
+      }
+      const { translationX, velocityX } = event;
+      const shouldCommit =
+        peek.value > PEEK_THRESHOLD ||
+        (velocityX > VELOCITY_THRESHOLD &&
+          translationX > MIN_VELOCITY_DISTANCE);
+
+      if (shouldCommit) {
+        runOnJS(commit)(velocityX > VELOCITY_THRESHOLD ? 160 : EXIT_DURATION);
+      } else {
+        peek.value = withSpring(0, SPRING);
+      }
+    });
+
+  // ─── Card ────────────────────────────────────────────────────────────────
+  const screenStyle = useAnimatedStyle(() => {
+    const p = peek.value;
+
+    return {
+      transform: [
+        { translateX: p * MAX_PEEK_X + exit.value * width },
+        { translateY: pivot.value * p * MAX_PEEK_Y },
+        { scale: 1 - MAX_SCALE_DOWN * p },
+      ],
+      borderRadius: interpolate(
+        p,
+        [0, 0.05, 1],
+        [0, CORNER_RADIUS, CORNER_RADIUS],
+        Extrapolation.CLAMP,
+      ),
+      overflow: "hidden",
+    };
+  });
+
+  // Dims the screen underneath (visible because the navigator presents screens as
+  // transparent modals) and clears as this card moves out of the way.
+  const backdropStyle = useAnimatedStyle(() => {
+    const revealed = Math.max(peek.value, exit.value);
+    return {
+      opacity: interpolate(revealed, [0, 1], [MAX_DIM, 0], Extrapolation.CLAMP),
+    };
+  });
+
+  return (
+    <View style={styles.outerWrapper}>
+      <Animated.View
+        pointerEvents="none"
+        style={[styles.backdrop, backdropStyle]}
+      />
+
+      <GestureDetector gesture={panGesture}>
+        <Animated.View
+          style={[
+            styles.screen,
+            { backgroundColor: theme.colors.background },
+            screenStyle,
+            style,
+          ]}
+        >
+          {children}
+        </Animated.View>
+      </GestureDetector>
+    </View>
+  );
+};
+
+export default SwipeableScreen;
+
+const styles = StyleSheet.create({
+  outerWrapper: {
+    flex: 1,
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: "#000000",
+    zIndex: 0,
+  },
+  screen: {
+    flex: 1,
+    zIndex: 1,
+  },
+});

package/src/index.js

@@ -0,0 +1,27 @@
+import SwipeableScreen from './SwipableScreen';
+import {
+  PREDICTIVE_BACK_SUPPORTED,
+  PREDICTIVE_BACK_HAS_PROGRESS,
+  EDGE_LEFT,
+  EDGE_RIGHT,
+  BACK_MODE_DEFAULT,
+  BACK_MODE_SYSTEM,
+  setFallbackBackMode,
+  acquirePredictiveBack,
+  releasePredictiveBack,
+} from './PredectiveBack';
+
+export {
+  SwipeableScreen,
+  PREDICTIVE_BACK_SUPPORTED,
+  PREDICTIVE_BACK_HAS_PROGRESS,
+  EDGE_LEFT,
+  EDGE_RIGHT,
+  BACK_MODE_DEFAULT,
+  BACK_MODE_SYSTEM,
+  setFallbackBackMode,
+  acquirePredictiveBack,
+  releasePredictiveBack,
+};
+
+export default SwipeableScreen;