@honeypathkar/react-native-predictive-back-gesture 1.0.7 → 1.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 honeypathkar
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/lib/commonjs/SwipableScreen.js

@@ -33,6 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.ANIMATION_SLIDE = exports.ANIMATION_CARD = void 0;
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const react_native_gesture_handler_1 = require("react-native-gesture-handler");
@@ -40,6 +41,19 @@ const react_native_reanimated_1 = __importStar(require("react-native-reanimated"
 const native_1 = require("@react-navigation/native");
 const PredectiveBack_1 = require("./PredectiveBack");
 const { width, height } = react_native_1.Dimensions.get("window");
+/**
+ * How the screen moves while the gesture is in flight.
+ *
+ * `card` is Material's predictive back: the screen shrinks and drifts a little,
+ * staying on screen so the user can see what they are about to go back to, and
+ * only leaves once they commit. `slide` is the older, flatter idea — the screen
+ * tracks the finger across the full width and walks off the edge, which is what
+ * most stock apps still do.
+ *
+ * The default stays `card`, so nothing changes for anything already using this.
+ */
+exports.ANIMATION_CARD = "card";
+exports.ANIMATION_SLIDE = "slide";
 // 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.
@@ -48,6 +62,17 @@ const MAX_PEEK_X = width * 0.12;
 const MAX_PEEK_Y = height * 0.03;
 const CORNER_RADIUS = 32;
 const MAX_DIM = 0.5;
+/**
+ * How far a full drag carries a sliding screen, as a fraction of the width.
+ *
+ * Not 1. Dragging the screen all the way off under the finger leaves nothing on
+ * screen before the gesture is even released, so a cancel has to haul the whole
+ * width back and a commit has nothing left to animate — the transition is over
+ * before the decision is made. Stopping the drag short keeps a piece of the
+ * outgoing screen in view the whole time and leaves the commit something to do,
+ * which is what makes the release read as a release.
+ */
+const SLIDE_PEEK_TRAVEL = 0.6;
 // 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;
@@ -62,7 +87,15 @@ 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, backgroundColor = '#000000', onGoBack }) => {
+const SwipeableScreen = ({ children, enabled = true, style, onHaptic, backgroundColor = '#000000', onGoBack, animation = exports.ANIMATION_CARD, peekTravel = SLIDE_PEEK_TRAVEL, }) => {
+    const isSlide = animation === exports.ANIMATION_SLIDE;
+    // Clamped rather than trusted: a value above 1 would push the screen past the
+    // edge mid-drag and then have the commit animate it back inwards.
+    const slideTravel = Math.min(Math.max(peekTravel, 0), 1);
+    // A peek only has to travel far enough to read as a peek, so the card
+    // completes in well under a screen width. A slide is the screen itself under
+    // the finger, and anything other than one-to-one feels like lag.
+    const dragRange = isSlide ? width : DRAG_RANGE;
     let navigation = null;
     try {
         navigation = (0, native_1.useNavigation)();
@@ -199,7 +232,7 @@ const SwipeableScreen = ({ children, enabled = true, style, onHaptic, background
         if (nativeActive.value || event.translationX <= 0) {
             return;
         }
-        peek.value = Math.min(event.translationX / DRAG_RANGE, 1);
+        peek.value = Math.min(event.translationX / dragRange, 1);
         pivot.value = (event.y / height) * 2 - 1;
     })
         .onEnd((event) => {
@@ -221,9 +254,22 @@ const SwipeableScreen = ({ children, enabled = true, style, onHaptic, background
     // ─── Card ────────────────────────────────────────────────────────────────
     const screenStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
         const p = peek.value;
+        const e = exit.value;
+        if (isSlide) {
+            // One expression for both halves of the journey. The gesture carries the
+            // screen as far as slideTravel allows; the commit takes it from wherever
+            // that left off out to the full width. Written as a single blend so there
+            // is no jump at the hand-off — a release at 40% of the drag continues
+            // from exactly where the finger left it, rather than snapping to a fresh
+            // starting point.
+            const travelled = p * slideTravel * width;
+            return {
+                transform: [{ translateX: travelled + (width - travelled) * e }],
+            };
+        }
         return {
             transform: [
-                { translateX: p * MAX_PEEK_X + exit.value * width },
+                { translateX: p * MAX_PEEK_X + e * width },
                 { translateY: pivot.value * p * MAX_PEEK_Y },
                 { scale: 1 - MAX_SCALE_DOWN * p },
             ],

package/lib/commonjs/index.js

@@ -1,11 +1,43 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.releasePredictiveBack = exports.acquirePredictiveBack = exports.setFallbackBackMode = exports.BACK_MODE_SYSTEM = exports.BACK_MODE_DEFAULT = exports.EDGE_RIGHT = exports.EDGE_LEFT = exports.PREDICTIVE_BACK_HAS_PROGRESS = exports.PREDICTIVE_BACK_SUPPORTED = exports.SwipeableScreen = void 0;
-const SwipableScreen_1 = __importDefault(require("./SwipableScreen"));
+exports.releasePredictiveBack = exports.acquirePredictiveBack = exports.setFallbackBackMode = exports.BACK_MODE_SYSTEM = exports.BACK_MODE_DEFAULT = exports.EDGE_RIGHT = exports.EDGE_LEFT = exports.PREDICTIVE_BACK_HAS_PROGRESS = exports.PREDICTIVE_BACK_SUPPORTED = exports.ANIMATION_SLIDE = exports.ANIMATION_CARD = exports.SwipeableScreen = void 0;
+const SwipableScreen_1 = __importStar(require("./SwipableScreen"));
 exports.SwipeableScreen = SwipableScreen_1.default;
+Object.defineProperty(exports, "ANIMATION_CARD", { enumerable: true, get: function () { return SwipableScreen_1.ANIMATION_CARD; } });
+Object.defineProperty(exports, "ANIMATION_SLIDE", { enumerable: true, get: function () { return SwipableScreen_1.ANIMATION_SLIDE; } });
 const PredectiveBack_1 = require("./PredectiveBack");
 Object.defineProperty(exports, "PREDICTIVE_BACK_SUPPORTED", { enumerable: true, get: function () { return PredectiveBack_1.PREDICTIVE_BACK_SUPPORTED; } });
 Object.defineProperty(exports, "PREDICTIVE_BACK_HAS_PROGRESS", { enumerable: true, get: function () { return PredectiveBack_1.PREDICTIVE_BACK_HAS_PROGRESS; } });

package/lib/typescript/SwipableScreen.d.ts

@@ -1,10 +1,25 @@
+/**
+ * How the screen moves while the gesture is in flight.
+ *
+ * `card` is Material's predictive back: the screen shrinks and drifts a little,
+ * staying on screen so the user can see what they are about to go back to, and
+ * only leaves once they commit. `slide` is the older, flatter idea — the screen
+ * tracks the finger across the full width and walks off the edge, which is what
+ * most stock apps still do.
+ *
+ * The default stays `card`, so nothing changes for anything already using this.
+ */
+export const ANIMATION_CARD: "card";
+export const ANIMATION_SLIDE: "slide";
 export default SwipeableScreen;
-declare function SwipeableScreen({ children, enabled, style, onHaptic, backgroundColor, onGoBack }: {
+declare function SwipeableScreen({ children, enabled, style, onHaptic, backgroundColor, onGoBack, animation, peekTravel, }: {
     children: any;
     enabled?: boolean;
     style: any;
     onHaptic: any;
     backgroundColor?: string;
     onGoBack: any;
+    animation?: string;
+    peekTravel?: number;
 }): React.JSX.Element;
 import React from "react";

package/lib/typescript/index.d.ts

@@ -1,5 +1,7 @@
 export default SwipeableScreen;
 import SwipeableScreen from './SwipableScreen';
+import { ANIMATION_CARD } from './SwipableScreen';
+import { ANIMATION_SLIDE } from './SwipableScreen';
 import { PREDICTIVE_BACK_SUPPORTED } from './PredectiveBack';
 import { PREDICTIVE_BACK_HAS_PROGRESS } from './PredectiveBack';
 import { EDGE_LEFT } from './PredectiveBack';
@@ -9,4 +11,4 @@ import { BACK_MODE_SYSTEM } from './PredectiveBack';
 import { setFallbackBackMode } from './PredectiveBack';
 import { acquirePredictiveBack } from './PredectiveBack';
 import { 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 { SwipeableScreen, ANIMATION_CARD, ANIMATION_SLIDE, PREDICTIVE_BACK_SUPPORTED, PREDICTIVE_BACK_HAS_PROGRESS, EDGE_LEFT, EDGE_RIGHT, BACK_MODE_DEFAULT, BACK_MODE_SYSTEM, setFallbackBackMode, acquirePredictiveBack, releasePredictiveBack };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@honeypathkar/react-native-predictive-back-gesture",
-  "version": "1.0.7",
+  "version": "1.1.0",
   "description": "Android 14+ Predictive Back gesture animations and swipeable screen component for React Native.",
   "publishConfig": {
     "access": "public"
@@ -28,6 +28,15 @@
     "swipeable-screen",
     "reanimated"
   ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/honeypathkar/react-native-components.git",
+    "directory": "react-native-predective-back-gesture"
+  },
+  "homepage": "https://github.com/honeypathkar/react-native-components/tree/master/react-native-predective-back-gesture#readme",
+  "bugs": {
+    "url": "https://github.com/honeypathkar/react-native-components/issues"
+  },
   "author": "honeypathkar",
   "license": "MIT",
   "peerDependencies": {

package/src/SwipableScreen.jsx

@@ -22,6 +22,20 @@ import {
 
 const { width, height } = Dimensions.get("window");
 
+/**
+ * How the screen moves while the gesture is in flight.
+ *
+ * `card` is Material's predictive back: the screen shrinks and drifts a little,
+ * staying on screen so the user can see what they are about to go back to, and
+ * only leaves once they commit. `slide` is the older, flatter idea — the screen
+ * tracks the finger across the full width and walks off the edge, which is what
+ * most stock apps still do.
+ *
+ * The default stays `card`, so nothing changes for anything already using this.
+ */
+export const ANIMATION_CARD = "card";
+export const ANIMATION_SLIDE = "slide";
+
 // 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.
@@ -31,6 +45,18 @@ const MAX_PEEK_Y = height * 0.03;
 const CORNER_RADIUS = 32;
 const MAX_DIM = 0.5;
 
+/**
+ * How far a full drag carries a sliding screen, as a fraction of the width.
+ *
+ * Not 1. Dragging the screen all the way off under the finger leaves nothing on
+ * screen before the gesture is even released, so a cancel has to haul the whole
+ * width back and a commit has nothing left to animate — the transition is over
+ * before the decision is made. Stopping the drag short keeps a piece of the
+ * outgoing screen in view the whole time and leaves the commit something to do,
+ * which is what makes the release read as a release.
+ */
+const SLIDE_PEEK_TRAVEL = 0.6;
+
 // 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;
@@ -47,7 +73,27 @@ const PEEK_THRESHOLD = 0.35;
 const VELOCITY_THRESHOLD = 900;
 const MIN_VELOCITY_DISTANCE = 50;
 
-const SwipeableScreen = ({ children, enabled = true, style, onHaptic, backgroundColor = '#000000', onGoBack }) => {
+const SwipeableScreen = ({
+  children,
+  enabled = true,
+  style,
+  onHaptic,
+  backgroundColor = '#000000',
+  onGoBack,
+  animation = ANIMATION_CARD,
+  peekTravel = SLIDE_PEEK_TRAVEL,
+}) => {
+  const isSlide = animation === ANIMATION_SLIDE;
+
+  // Clamped rather than trusted: a value above 1 would push the screen past the
+  // edge mid-drag and then have the commit animate it back inwards.
+  const slideTravel = Math.min(Math.max(peekTravel, 0), 1);
+
+  // A peek only has to travel far enough to read as a peek, so the card
+  // completes in well under a screen width. A slide is the screen itself under
+  // the finger, and anything other than one-to-one feels like lag.
+  const dragRange = isSlide ? width : DRAG_RANGE;
+
   let navigation = null;
   try {
     navigation = useNavigation();
@@ -199,7 +245,7 @@ const SwipeableScreen = ({ children, enabled = true, style, onHaptic, background
       if (nativeActive.value || event.translationX <= 0) {
         return;
       }
-      peek.value = Math.min(event.translationX / DRAG_RANGE, 1);
+      peek.value = Math.min(event.translationX / dragRange, 1);
       pivot.value = (event.y / height) * 2 - 1;
     })
     .onEnd((event) => {
@@ -223,10 +269,24 @@ const SwipeableScreen = ({ children, enabled = true, style, onHaptic, background
   // ─── Card ────────────────────────────────────────────────────────────────
   const screenStyle = useAnimatedStyle(() => {
     const p = peek.value;
+    const e = exit.value;
+
+    if (isSlide) {
+      // One expression for both halves of the journey. The gesture carries the
+      // screen as far as slideTravel allows; the commit takes it from wherever
+      // that left off out to the full width. Written as a single blend so there
+      // is no jump at the hand-off — a release at 40% of the drag continues
+      // from exactly where the finger left it, rather than snapping to a fresh
+      // starting point.
+      const travelled = p * slideTravel * width;
+      return {
+        transform: [{ translateX: travelled + (width - travelled) * e }],
+      };
+    }
 
     return {
       transform: [
-        { translateX: p * MAX_PEEK_X + exit.value * width },
+        { translateX: p * MAX_PEEK_X + e * width },
         { translateY: pivot.value * p * MAX_PEEK_Y },
         { scale: 1 - MAX_SCALE_DOWN * p },
       ],

package/src/index.js

@@ -1,4 +1,7 @@
-import SwipeableScreen from './SwipableScreen';
+import SwipeableScreen, {
+  ANIMATION_CARD,
+  ANIMATION_SLIDE,
+} from './SwipableScreen';
 import {
   PREDICTIVE_BACK_SUPPORTED,
   PREDICTIVE_BACK_HAS_PROGRESS,
@@ -13,6 +16,8 @@ import {
 
 export {
   SwipeableScreen,
+  ANIMATION_CARD,
+  ANIMATION_SLIDE,
   PREDICTIVE_BACK_SUPPORTED,
   PREDICTIVE_BACK_HAS_PROGRESS,
   EDGE_LEFT,