@honeypathkar/react-native-predictive-back-gesture 1.0.4 → 1.0.5

package/lib/commonjs/AppNavigator.js

@@ -9,4 +9,4 @@ const syncBackMode = React.useCallback(() => {
         : PredictiveBack_1.BACK_MODE_SYSTEM);
 }, []);
 // On the NavigationContainer:
-<NavigationContainer ref={navigationRef} onReady={syncBackMode} onStateChange={syncBackMode}></NavigationContainer>;
+React.createElement(NavigationContainer, { ref: navigationRef, onReady: syncBackMode, onStateChange: syncBackMode });

package/lib/commonjs/SwipableScreen.js

@@ -38,7 +38,6 @@ const react_native_1 = require("react-native");
 const react_native_gesture_handler_1 = require("react-native-gesture-handler");
 const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
 const native_1 = require("@react-navigation/native");
-const react_native_paper_1 = require("react-native-paper");
 const PredectiveBack_1 = require("./PredectiveBack");
 const { width, height } = react_native_1.Dimensions.get("window");
 // Material predictive-back peek: the card shrinks and drifts a little way to the right
@@ -63,9 +62,14 @@ 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 = (0, native_1.useNavigation)();
-    const theme = (0, react_native_paper_1.useTheme)();
+const SwipeableScreen = ({ children, enabled = true, style, onHaptic, backgroundColor = '#000000', onGoBack }) => {
+    let navigation = null;
+    try {
+        navigation = (0, native_1.useNavigation)();
+    }
+    catch (e) {
+        // Component rendered outside React Navigation container
+    }
     // Gesture progress (0…1) — drives the peek: shrink, drift right, rounded corners.
     const peek = (0, react_native_reanimated_1.useSharedValue)(0);
     // Dismissal progress (0…1) — slides the card clear to the right. Also runs in
@@ -97,18 +101,22 @@ const SwipeableScreen = ({ children, enabled = true, style, onHaptic }) => {
         exit.value = (0, react_native_reanimated_1.withTiming)(0, { duration: 200, easing: EASING });
     }, [peek, exit, nativeActive]);
     const goBack = (0, react_1.useCallback)(() => {
-        if (!navigation.canGoBack()) {
+        if (onGoBack) {
+            onGoBack();
+            return;
+        }
+        if (!navigation || !navigation.canGoBack()) {
             settle();
             return;
         }
         navigation.goBack();
         // goBack dispatches through `beforeRemove`, so it may not actually pop.
         requestAnimationFrame(() => {
-            if (navigation.isFocused()) {
+            if (navigation && navigation.isFocused && navigation.isFocused()) {
                 settle();
             }
         });
-    }, [navigation, settle]);
+    }, [navigation, settle, onGoBack]);
     // ─── Commit / cancel ─────────────────────────────────────────────────────
     const commit = (0, react_1.useCallback)((duration = EXIT_DURATION) => {
         if (isDismissing.current) {
@@ -131,8 +139,9 @@ const SwipeableScreen = ({ children, enabled = true, style, onHaptic }) => {
     }, [peek, nativeActive]);
     // ─── System back gesture (Android) ───────────────────────────────────────
     const token = (0, react_1.useRef)({}).current;
-    const isActive = enabled && navigation.canGoBack();
-    (0, native_1.useFocusEffect)((0, react_1.useCallback)(() => {
+    const canGoBackInNav = navigation && navigation.canGoBack ? navigation.canGoBack() : false;
+    const isActive = enabled && (canGoBackInNav || !!onGoBack);
+    const focusEffectCallback = (0, react_1.useCallback)(() => {
         if (!PredectiveBack_1.PREDICTIVE_BACK_SUPPORTED || !isActive) {
             return undefined;
         }
@@ -160,7 +169,15 @@ const SwipeableScreen = ({ children, enabled = true, style, onHaptic }) => {
             onCommit: () => commit(PredectiveBack_1.PREDICTIVE_BACK_HAS_PROGRESS ? EXIT_DURATION : ENTER_DURATION),
         });
         return () => (0, PredectiveBack_1.releasePredictiveBack)(token);
-    }, [token, isActive, peek, pivot, nativeActive, cancel, commit]));
+    }, [token, isActive, peek, pivot, nativeActive, cancel, commit]);
+    if (navigation) {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        (0, native_1.useFocusEffect)(focusEffectCallback);
+    }
+    else {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        (0, react_1.useEffect)(focusEffectCallback, [focusEffectCallback]);
+    }
     // ─── 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
@@ -222,20 +239,15 @@ const SwipeableScreen = ({ children, enabled = true, style, onHaptic }) => {
             opacity: (0, react_native_reanimated_1.interpolate)(revealed, [0, 1], [MAX_DIM, 0], react_native_reanimated_1.Extrapolation.CLAMP),
         };
     });
-    return (<react_native_1.View style={styles.outerWrapper}>
-      <react_native_reanimated_1.default.View pointerEvents="none" style={[styles.backdrop, backdropStyle]}/>
-
-      <react_native_gesture_handler_1.GestureDetector gesture={panGesture}>
-        <react_native_reanimated_1.default.View style={[
-            styles.screen,
-            { backgroundColor: theme.colors.background },
-            screenStyle,
-            style,
-        ]}>
-          {children}
-        </react_native_reanimated_1.default.View>
-      </react_native_gesture_handler_1.GestureDetector>
-    </react_native_1.View>);
+    return (react_1.default.createElement(react_native_1.View, { style: styles.outerWrapper },
+        react_1.default.createElement(react_native_reanimated_1.default.View, { pointerEvents: "none", style: [styles.backdrop, backdropStyle] }),
+        react_1.default.createElement(react_native_gesture_handler_1.GestureDetector, { gesture: panGesture },
+            react_1.default.createElement(react_native_reanimated_1.default.View, { style: [
+                    styles.screen,
+                    { backgroundColor },
+                    screenStyle,
+                    style,
+                ] }, children))));
 };
 exports.default = SwipeableScreen;
 const styles = react_native_1.StyleSheet.create({

package/lib/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["../src/appnavigator.jsx","../src/predectiveback.js","../src/swipablescreen.jsx","../src/index.js"],"version":"5.9.3"}

package/lib/typescript/SwipableScreen.d.ts

@@ -1,8 +1,10 @@
 export default SwipeableScreen;
-declare function SwipeableScreen({ children, enabled, style, onHaptic }: {
+declare function SwipeableScreen({ children, enabled, style, onHaptic, backgroundColor, onGoBack }: {
     children: any;
     enabled?: boolean;
     style: any;
     onHaptic: any;
+    backgroundColor?: string;
+    onGoBack: any;
 }): React.JSX.Element;
 import React from "react";

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@honeypathkar/react-native-predictive-back-gesture",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "Android 14+ Predictive Back gesture animations and swipeable screen component for React Native.",
   "publishConfig": {
     "access": "public"
   },
-  "main": "src/index.js",
-  "module": "src/index.js",
+  "main": "lib/commonjs/index.js",
+  "module": "lib/module/index.js",
   "types": "lib/typescript/index.d.ts",
   "files": [
     "src",
@@ -34,13 +34,12 @@
     "react": "*",
     "react-native": "*",
     "react-native-gesture-handler": "*",
-    "react-native-reanimated": "*",
-    "react-native-paper": "*"
+    "react-native-reanimated": "*"
   },
   "devDependencies": {
     "@types/react": "^18.3.31",
     "react": "^18.2.0",
-    "react-native": "^0.72.0",
+    "react-native": "^0.72.17",
     "react-native-gesture-handler": "^2.12.0",
     "react-native-reanimated": "^3.3.0",
     "typescript": "^5.9.3"

package/src/SwipableScreen.jsx

@@ -13,7 +13,6 @@ import Animated, {
   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,
@@ -48,9 +47,13 @@ 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();
+const SwipeableScreen = ({ children, enabled = true, style, onHaptic, backgroundColor = '#000000', onGoBack }) => {
+  let navigation = null;
+  try {
+    navigation = useNavigation();
+  } catch (e) {
+    // Component rendered outside React Navigation container
+  }
 
   // Gesture progress (0…1) — drives the peek: shrink, drift right, rounded corners.
   const peek = useSharedValue(0);
@@ -86,18 +89,22 @@ const SwipeableScreen = ({ children, enabled = true, style, onHaptic }) => {
   }, [peek, exit, nativeActive]);
 
   const goBack = useCallback(() => {
-    if (!navigation.canGoBack()) {
+    if (onGoBack) {
+      onGoBack();
+      return;
+    }
+    if (!navigation || !navigation.canGoBack()) {
       settle();
       return;
     }
     navigation.goBack();
     // goBack dispatches through `beforeRemove`, so it may not actually pop.
     requestAnimationFrame(() => {
-      if (navigation.isFocused()) {
+      if (navigation && navigation.isFocused && navigation.isFocused()) {
         settle();
       }
     });
-  }, [navigation, settle]);
+  }, [navigation, settle, onGoBack]);
 
   // ─── Commit / cancel ─────────────────────────────────────────────────────
   const commit = useCallback(
@@ -126,43 +133,50 @@ const SwipeableScreen = ({ children, enabled = true, style, onHaptic }) => {
 
   // ─── System back gesture (Android) ───────────────────────────────────────
   const token = useRef({}).current;
-  const isActive = enabled && navigation.canGoBack();
+  const canGoBackInNav = navigation && navigation.canGoBack ? navigation.canGoBack() : false;
+  const isActive = enabled && (canGoBackInNav || !!onGoBack);
 
-  useFocusEffect(
-    useCallback(() => {
-      if (!PREDICTIVE_BACK_SUPPORTED || !isActive) {
-        return undefined;
-      }
+  const focusEffectCallback = useCallback(() => {
+    if (!PREDICTIVE_BACK_SUPPORTED || !isActive) {
+      return undefined;
+    }
 
-      const track = (event) => {
-        peek.value = event.progress;
-        pivot.value = (event.touchY / height) * 2 - 1;
-      };
+    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);
+    acquirePredictiveBack(token, {
+      onStart: (event) => {
+        if (isDismissing.current) {
+          return;
+        }
+        nativeActive.value = 1;
+        cancelAnimation(peek);
+        track(event);
+      },
+      onProgress: (event) => {
+        if (!isDismissing.current) {
           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),
-      });
+        }
+      },
+      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]),
-  );
+    return () => releasePredictiveBack(token);
+  }, [token, isActive, peek, pivot, nativeActive, cancel, commit]);
+
+  if (navigation) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useFocusEffect(focusEffectCallback);
+  } else {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEffect(focusEffectCallback, [focusEffectCallback]);
+  }
 
   // ─── Drag-to-close from the left edge ────────────────────────────────────
   // On Android this covers the strip just inside the system gesture zone; on iOS it
@@ -246,7 +260,7 @@ const SwipeableScreen = ({ children, enabled = true, style, onHaptic }) => {
         <Animated.View
           style={[
             styles.screen,
-            { backgroundColor: theme.colors.background },
+            { backgroundColor },
             screenStyle,
             style,
           ]}

package/lib/commonjs/tsconfig.tsbuildinfo

@@ -1 +0,0 @@
-{"root":["../../src/appnavigator.jsx","../../src/predectiveback.js","../../src/swipablescreen.jsx","../../src/index.js"],"version":"5.9.3"}