react-native-screen-transitions 1.0.2 → 1.0.3

package/dist/index.js

@@ -221,89 +221,18 @@ var ElasticCard = (config = { elasticFactor: 0.5 }) => {
 };
 
 // src/hooks/use-screen-animation.tsx
-var import_native2 = require("@react-navigation/native");
-var import_react3 = require("react");
+var import_native3 = require("@react-navigation/native");
+var import_react2 = require("react");
 var import_react_native = require("react-native");
 var import_react_native_reanimated5 = require("react-native-reanimated");
 var import_react_native_safe_area_context = require("react-native-safe-area-context");
 
-// src/store/utils/use-shallow.tsx
-var import_react = __toESM(require("react"));
-
-// src/store/utils/shallow.ts
-var isIterable = (obj) => Symbol.iterator in obj;
-var hasIterableEntries = (value) => (
-  // HACK: avoid checking entries type
-  "entries" in value
-);
-var compareEntries = (valueA, valueB) => {
-  const mapA = valueA instanceof Map ? valueA : new Map(valueA.entries());
-  const mapB = valueB instanceof Map ? valueB : new Map(valueB.entries());
-  if (mapA.size !== mapB.size) {
-    return false;
-  }
-  for (const [key, value] of mapA) {
-    if (!Object.is(value, mapB.get(key))) {
-      return false;
-    }
-  }
-  return true;
-};
-var compareIterables = (valueA, valueB) => {
-  const iteratorA = valueA[Symbol.iterator]();
-  const iteratorB = valueB[Symbol.iterator]();
-  let nextA = iteratorA.next();
-  let nextB = iteratorB.next();
-  while (!nextA.done && !nextB.done) {
-    if (!Object.is(nextA.value, nextB.value)) {
-      return false;
-    }
-    nextA = iteratorA.next();
-    nextB = iteratorB.next();
-  }
-  return !!nextA.done && !!nextB.done;
-};
-function shallow(valueA, valueB) {
-  if (Object.is(valueA, valueB)) {
-    return true;
-  }
-  if (typeof valueA !== "object" || valueA === null || typeof valueB !== "object" || valueB === null) {
-    return false;
-  }
-  if (Object.getPrototypeOf(valueA) !== Object.getPrototypeOf(valueB)) {
-    return false;
-  }
-  if (isIterable(valueA) && isIterable(valueB)) {
-    if (hasIterableEntries(valueA) && hasIterableEntries(valueB)) {
-      return compareEntries(valueA, valueB);
-    }
-    return compareIterables(valueA, valueB);
-  }
-  return compareEntries(
-    { entries: () => Object.entries(valueA) },
-    { entries: () => Object.entries(valueB) }
-  );
-}
-
-// src/store/utils/use-shallow.tsx
-function useShallow(selector) {
-  const prev = import_react.default.useRef(void 0);
-  return (state) => {
-    const next = selector(state);
-    if (shallow(prev.current, next)) {
-      return prev.current;
-    }
-    prev.current = next;
-    return next;
-  };
-}
-
 // src/animation-engine.ts
 var import_react_native_reanimated3 = require("react-native-reanimated");
 
 // src/store/utils/create-vanilla-store.ts
 var import_immer = require("immer");
-var import_react2 = require("react");
+var import_react = require("react");
 function createVanillaStore(initialState) {
   let state = initialState;
   const listeners = /* @__PURE__ */ new Set();
@@ -333,7 +262,7 @@ function createVanillaStore(initialState) {
     return unsubscribe;
   };
   function useStore(selector) {
-    return (0, import_react2.useSyncExternalStore)(subscribe, () => selector(getState()));
+    return (0, import_react.useSyncExternalStore)(subscribe, () => selector(getState()));
   }
   Object.assign(useStore, {
     setState,
@@ -344,54 +273,93 @@ function createVanillaStore(initialState) {
   return useStore;
 }
 
-// src/store/index.ts
-var useRouteStore = createVanillaStore({
-  routes: {},
-  routeKeys: []
-});
-var RouteStore = {
-  use: useRouteStore,
-  updateRoute: (key, value) => {
-    if (!key) return;
-    useRouteStore.setState(({ routeKeys, routes }) => {
-      const currentRoute = routes[key];
-      if (currentRoute) {
-        routes[key] = {
-          ...currentRoute,
-          ...value
-        };
-      } else {
-        const { name = "", status = 0, closing = false, ...rest } = value;
-        const newIndex = routeKeys.length;
-        routes[key] = {
-          id: key,
-          index: newIndex,
-          name,
-          status,
-          closing,
-          ...rest
-        };
-        routeKeys.push(key);
-      }
-    });
-  },
-  removeRoute: (key) => {
-    if (!key) return;
-    useRouteStore.setState(({ routes, routeKeys }) => {
-      delete routes[key];
-      const indexToRemove = routeKeys.indexOf(key);
-      if (indexToRemove > -1) {
-        routeKeys.splice(indexToRemove, 1);
-      }
+// src/store/utils/handle-screen-dismiss.tsx
+var import_native = require("@react-navigation/native");
+var handleScreenDismiss = (screenBeingDismissed, navigation) => {
+  const { screens } = ScreenStore.use.getState();
+  const dismissedScreen = screens[screenBeingDismissed];
+  if (!dismissedScreen) {
+    navigation.goBack();
+    return;
+  }
+  const childScreens = Object.values(screens).filter(
+    (screen) => screen.parentNavigatorKey === dismissedScreen.navigatorKey
+  );
+  if (childScreens.length > 0) {
+    ScreenStore.updateScreen(dismissedScreen.id, {
+      closing: true
     });
-  },
-  getPreviousRoute: (key) => {
-    if (!key) return null;
-    const index = useRouteStore.getState().routeKeys.indexOf(key);
-    return index > -1 ? useRouteStore.getState().routes[useRouteStore.getState().routeKeys[index - 1]] : null;
+    navigation.dispatch(import_native.StackActions.pop(childScreens.length));
+  } else {
+    navigation.goBack();
   }
 };
 
+// src/store/utils/remove-screen.tsx
+var removeScreen = (key) => {
+  if (!key) return;
+  ScreenStore.use.setState(({ screens, screenKeys }) => {
+    delete screens[key];
+    const indexToRemove = screenKeys.indexOf(key);
+    if (indexToRemove > -1) {
+      screenKeys.splice(indexToRemove, 1);
+    }
+  });
+};
+
+// src/store/utils/should-skip-prevent-default.tsx
+var shouldSkipPreventDefault = (key, navigatorState) => {
+  if (!key) return false;
+  const { screens } = ScreenStore.use.getState();
+  const currentScreen = screens[key];
+  const isLastScreenInStack = navigatorState.routes.length === 1 && navigatorState.routes[0].key === key;
+  const isParentNavigatorExiting = Boolean(
+    currentScreen?.parentNavigatorKey && Object.values(screens).some(
+      (screen) => screen.navigatorKey === currentScreen.parentNavigatorKey && screen.closing
+    )
+  );
+  return isLastScreenInStack || isParentNavigatorExiting;
+};
+
+// src/store/utils/update-screen.tsx
+var updateScreen = (key, value) => {
+  if (!key) return;
+  ScreenStore.use.setState(({ screenKeys, screens }) => {
+    const currentScreen = screens[key];
+    if (currentScreen) {
+      screens[key] = {
+        ...currentScreen,
+        ...value
+      };
+    } else {
+      const { name = "", status = 0, closing = false, ...rest } = value;
+      const newIndex = screenKeys.length;
+      screens[key] = {
+        id: key,
+        index: newIndex,
+        name,
+        status,
+        closing,
+        ...rest
+      };
+      screenKeys.push(key);
+    }
+  });
+};
+
+// src/store/index.ts
+var useScreenStore = createVanillaStore({
+  screens: {},
+  screenKeys: []
+});
+var ScreenStore = {
+  use: useScreenStore,
+  updateScreen,
+  removeScreen,
+  handleScreenDismiss,
+  shouldSkipPreventDefault
+};
+
 // src/utils/animate.ts
 var import_react_native_reanimated2 = require("react-native-reanimated");
 var animate = (toValue, config, callback) => {
@@ -412,12 +380,12 @@ var animationValues = {
   normalizedGestureY: {},
   gestureDragging: {}
 };
-var triggerAnimation = (route) => {
+var triggerAnimation = (screen) => {
   "worklet";
-  const { id, closing, status, transitionSpec, onAnimationFinish } = route;
+  const { id, closing, status, transitionSpec, onAnimationFinish } = screen;
   const progressValue = animationValues.screenProgress[id];
   if (!progressValue && __DEV__) {
-    console.warn(`Animation values not found for route: ${id}`);
+    console.warn(`Animation values not found for screen: ${id}`);
     return;
   }
   const animationConfig = closing ? transitionSpec?.close : transitionSpec?.open;
@@ -429,14 +397,16 @@ var triggerAnimation = (route) => {
     }
   });
 };
-RouteStore.use.subscribeWithSelector(
-  (state) => state.routes,
-  (currRoutes, prevRoutes) => {
-    const currKeys = Object.keys(currRoutes);
-    const prevKeys = Object.keys(prevRoutes);
+ScreenStore.use.subscribeWithSelector(
+  (state) => state.screens,
+  (currScreens, prevScreens) => {
+    const currKeys = Object.keys(currScreens);
+    const prevKeys = Object.keys(prevScreens);
     const incomingKeys = currKeys.filter((k) => !prevKeys.includes(k));
     const removedKeys = prevKeys.filter((k) => !currKeys.includes(k));
-    const changedKeys = currKeys.filter((k) => currRoutes[k] !== prevRoutes[k]);
+    const changedKeys = currKeys.filter(
+      (k) => currScreens[k] !== prevScreens[k]
+    );
     const animatableValues = Object.values(animationValues);
     for (const incomingKey of incomingKeys) {
       for (const value of animatableValues) {
@@ -450,9 +420,9 @@ RouteStore.use.subscribeWithSelector(
       }
     }
     for (const changedKey of changedKeys) {
-      const currentRoute = currRoutes[changedKey];
-      if (currentRoute) {
-        triggerAnimation(currentRoute);
+      const currentScreen = currScreens[changedKey];
+      if (currentScreen) {
+        triggerAnimation(currentScreen);
       }
     }
   }
@@ -462,10 +432,11 @@ RouteStore.use.subscribeWithSelector(
 var import_react_native_gesture_handler = require("react-native-gesture-handler");
 var import_react_native_reanimated4 = require("react-native-reanimated");
 
-// src/utils/gesture/create-gesture-activation-criteria.ts
-var createGestureActivationCriteria = ({
+// src/utils/gesture/apply-gesture-activation-criteria.ts
+var applyGestureActivationCriteria = ({
   gestureDirection,
-  gestureResponseDistance
+  gestureResponseDistance,
+  panGesture
 }) => {
   const directions = Array.isArray(gestureDirection) ? gestureDirection : [gestureDirection];
   if (directions.includes("bidirectional")) {
@@ -522,7 +493,20 @@ var createGestureActivationCriteria = ({
   } else {
     result.failOffsetY = [-toleranceY, toleranceY];
   }
-  return result;
+  if (result?.activeOffsetX) {
+    panGesture.activeOffsetX(result.activeOffsetX);
+  }
+  if (result?.activeOffsetY) {
+    panGesture.activeOffsetY(result.activeOffsetY);
+  }
+  if (result?.failOffsetX) {
+    panGesture.failOffsetX(result.failOffsetX);
+  }
+  if (result?.failOffsetY) {
+    panGesture.failOffsetY(result.failOffsetY);
+  }
+  panGesture.enableTrackpadTwoFingerGesture(true);
+  return panGesture;
 };
 
 // src/utils/gesture/map-gesture-to-progress.ts
@@ -538,10 +522,10 @@ var DEFAULT_GESTURE_RESPONSE_DISTANCE = 50;
 var buildGestureDetector = ({
   key,
   progress,
-  config,
+  screenState,
   width,
   height,
-  goBack
+  handleDismiss
 }) => {
   const _translateX = animationValues.gestureX[key];
   const _translateY = animationValues.gestureY[key];
@@ -554,7 +538,7 @@ var buildGestureDetector = ({
     transitionSpec,
     gestureVelocityImpact = GESTURE_VELOCITY_IMPACT,
     gestureResponseDistance = DEFAULT_GESTURE_RESPONSE_DISTANCE
-  } = config;
+  } = screenState;
   const directions = Array.isArray(gestureDirection) ? gestureDirection : [gestureDirection];
   const panGesture = import_react_native_gesture_handler.Gesture.Pan().enabled(gestureEnabled).onStart(() => {
     "worklet";
@@ -633,7 +617,7 @@ var buildGestureDetector = ({
     const spec = shouldDismiss ? transitionSpec?.close : transitionSpec?.open;
     const onFinish = shouldDismiss ? (isFinished) => {
       "worklet";
-      if (isFinished) (0, import_react_native_reanimated4.runOnJS)(goBack)();
+      if (isFinished) (0, import_react_native_reanimated4.runOnJS)(handleDismiss)(screenState.id);
     } : void 0;
     progress.value = animate(finalProgress, spec, onFinish);
     _translateX.value = animate(0, spec);
@@ -641,25 +625,12 @@ var buildGestureDetector = ({
     _normalizedGestureX.value = animate(0, spec);
     _normalizedGestureY.value = animate(0, spec);
   });
-  const criteria = createGestureActivationCriteria({
+  applyGestureActivationCriteria({
     gestureDirection,
-    gestureResponseDistance
+    gestureResponseDistance,
+    panGesture
   });
-  if (criteria?.activeOffsetX) {
-    panGesture.activeOffsetX(criteria.activeOffsetX);
-  }
-  if (criteria?.activeOffsetY) {
-    panGesture.activeOffsetY(criteria.activeOffsetY);
-  }
-  if (criteria?.failOffsetX) {
-    panGesture.failOffsetX(criteria.failOffsetX);
-  }
-  if (criteria?.failOffsetY) {
-    panGesture.failOffsetY(criteria.failOffsetY);
-  }
-  panGesture.enableTrackpadTwoFingerGesture(true);
-  const nativeGesture = import_react_native_gesture_handler.Gesture.Native().shouldCancelWhenOutside(false);
-  return import_react_native_gesture_handler.Gesture.Race(panGesture, nativeGesture);
+  return panGesture;
 };
 
 // src/utils/noop-interpolator.ts
@@ -672,42 +643,42 @@ var noopinterpolator = () => {
 };
 
 // src/hooks/use-key.tsx
-var import_native = require("@react-navigation/native");
-var useKey = () => (0, import_native.useRoute)().key;
+var import_native2 = require("@react-navigation/native");
+var useKey = () => (0, import_native2.useRoute)().key;
 
 // src/hooks/use-screen-animation.tsx
 var useAnimationBuilder = () => {
   const key = useKey();
   const dimensions = (0, import_react_native.useWindowDimensions)();
   const insets = (0, import_react_native_safe_area_context.useSafeAreaInsets)();
-  const navigation = (0, import_native2.useNavigation)();
-  const { currentRoute, nextRoute } = RouteStore.use(
-    useShallow(({ routes, routeKeys }) => {
-      const current = routes[key];
-      if (!current) {
-        return { currentRoute: void 0, nextRoute: void 0 };
-      }
-      const currentScreenIndex = current.index;
-      const nextKey = routeKeys[currentScreenIndex + 1];
-      const next = nextKey ? routes[nextKey] : void 0;
-      const isSameNavigator = next?.navigatorKey === current.navigatorKey;
-      if (!isSameNavigator) {
-        return {
-          currentRoute: current,
-          nextRoute: void 0
-        };
-      }
-      return {
-        currentRoute: current,
-        nextRoute: next
-      };
-    })
+  const navigation = (0, import_native3.useNavigation)();
+  const progressFallback = (0, import_react_native_reanimated5.useSharedValue)(0);
+  const gestureDraggingFallback = (0, import_react_native_reanimated5.useSharedValue)(0);
+  const gestureXFallback = (0, import_react_native_reanimated5.useSharedValue)(0);
+  const gestureYFallback = (0, import_react_native_reanimated5.useSharedValue)(0);
+  const normalizedGestureXFallback = (0, import_react_native_reanimated5.useSharedValue)(0);
+  const normalizedGestureYFallback = (0, import_react_native_reanimated5.useSharedValue)(0);
+  const currentScreen = ScreenStore.use(
+    (0, import_react2.useCallback)((state) => state.screens[key], [key])
+  );
+  const actualNextScreen = ScreenStore.use(
+    (0, import_react2.useCallback)(
+      (state) => {
+        const current = state.screens[key];
+        if (!current) return void 0;
+        const nextKey = state.screenKeys[current.index + 1];
+        const nextScreen = nextKey ? state.screens[nextKey] : void 0;
+        const shouldUseNext = nextScreen?.navigatorKey === current?.navigatorKey;
+        return shouldUseNext ? nextScreen : void 0;
+      },
+      [key]
+    )
   );
-  const panGesture = (0, import_react3.useMemo)(
+  const panGesture = (0, import_react2.useMemo)(
     () => buildGestureDetector({
       key,
       progress: animationValues.screenProgress[key],
-      config: currentRoute || {
+      screenState: currentScreen || {
         id: key,
         name: key,
         index: 0,
@@ -716,57 +687,50 @@ var useAnimationBuilder = () => {
       },
       width: dimensions.width,
       height: dimensions.height,
-      goBack: navigation.goBack
+      handleDismiss: (screenBeingDismissed) => {
+        ScreenStore.handleScreenDismiss(screenBeingDismissed, navigation);
+      }
     }),
-    [key, currentRoute, dimensions.width, dimensions.height, navigation.goBack]
+    [key, currentScreen, dimensions, navigation]
   );
-  const progressFallback = (0, import_react_native_reanimated5.useSharedValue)(0);
-  const gestureDraggingFallback = (0, import_react_native_reanimated5.useSharedValue)(0);
-  const gestureXFallback = (0, import_react_native_reanimated5.useSharedValue)(0);
-  const gestureYFallback = (0, import_react_native_reanimated5.useSharedValue)(0);
-  const normalizedGestureXFallback = (0, import_react_native_reanimated5.useSharedValue)(0);
-  const normalizedGestureYFallback = (0, import_react_native_reanimated5.useSharedValue)(0);
-  return (0, import_react3.useMemo)(() => {
+  const getAnimationValuesForScreen = (0, import_react2.useCallback)(
+    (screenId) => ({
+      progress: animationValues.screenProgress[screenId] || progressFallback,
+      gesture: {
+        isDragging: animationValues.gestureDragging[screenId] || gestureDraggingFallback,
+        x: animationValues.gestureX[screenId] || gestureXFallback,
+        y: animationValues.gestureY[screenId] || gestureYFallback,
+        normalizedX: animationValues.normalizedGestureX[screenId] || normalizedGestureXFallback,
+        normalizedY: animationValues.normalizedGestureY[screenId] || normalizedGestureYFallback
+      }
+    }),
+    [
+      progressFallback,
+      gestureDraggingFallback,
+      gestureXFallback,
+      gestureYFallback,
+      normalizedGestureXFallback,
+      normalizedGestureYFallback
+    ]
+  );
+  return (0, import_react2.useMemo)(() => {
     return {
-      current: {
-        progress: animationValues.screenProgress[key] || progressFallback,
-        gesture: {
-          isDragging: animationValues.gestureDragging[key] || gestureDraggingFallback,
-          x: animationValues.gestureX[key] || gestureXFallback,
-          y: animationValues.gestureY[key] || gestureYFallback,
-          normalizedX: animationValues.normalizedGestureX[key] || normalizedGestureXFallback,
-          normalizedY: animationValues.normalizedGestureY[key] || normalizedGestureYFallback
-        }
-      },
-      next: nextRoute && animationValues.screenProgress[nextRoute.id] ? {
-        progress: animationValues.screenProgress[nextRoute.id],
-        gesture: {
-          isDragging: animationValues.gestureDragging[nextRoute.id] || gestureDraggingFallback,
-          x: animationValues.gestureX[nextRoute.id] || gestureXFallback,
-          y: animationValues.gestureY[nextRoute.id] || gestureYFallback,
-          normalizedX: animationValues.normalizedGestureX[nextRoute.id] || normalizedGestureXFallback,
-          normalizedY: animationValues.normalizedGestureY[nextRoute.id] || normalizedGestureYFallback
-        }
-      } : void 0,
+      current: getAnimationValuesForScreen(key),
+      next: actualNextScreen ? getAnimationValuesForScreen(actualNextScreen.id) : void 0,
       layouts: { screen: dimensions },
       insets,
-      closing: currentRoute?.closing || false,
-      screenStyleInterpolator: nextRoute?.screenStyleInterpolator || currentRoute?.screenStyleInterpolator || noopinterpolator,
+      closing: currentScreen?.closing || false,
+      screenStyleInterpolator: actualNextScreen?.screenStyleInterpolator || currentScreen?.screenStyleInterpolator || noopinterpolator,
       gestureDetector: panGesture
     };
   }, [
     key,
-    currentRoute,
-    nextRoute,
+    currentScreen,
+    actualNextScreen,
     dimensions,
     insets,
     panGesture,
-    progressFallback,
-    gestureDraggingFallback,
-    gestureXFallback,
-    gestureYFallback,
-    normalizedGestureXFallback,
-    normalizedGestureYFallback
+    getAnimationValuesForScreen
   ]);
 };
 var _useScreenAnimation = () => {
@@ -789,21 +753,25 @@ var createConfig = ({
 }) => {
   return {
     focus: (e) => {
+      const parentNavigatorKey = reactNavigation.getParent()?.getState?.()?.key;
       const navigatorKey = reactNavigation.getState().key;
-      RouteStore.updateRoute(e.target, {
+      ScreenStore.updateScreen(e.target, {
         id: e.target,
         name: route.name,
         status: 1,
         closing: false,
         navigatorKey,
+        parentNavigatorKey,
         ...config
       });
     },
     beforeRemove: (e) => {
-      const navigatorState = reactNavigation.getState();
-      const isLastScreenInStack = navigatorState.routes.length === 1 && navigatorState.routes[0].key === e.target;
-      if (isLastScreenInStack) {
-        RouteStore.removeRoute(e.target);
+      const shouldSkipPreventDefault2 = ScreenStore.shouldSkipPreventDefault(
+        e.target,
+        reactNavigation.getState()
+      );
+      if (shouldSkipPreventDefault2) {
+        ScreenStore.removeScreen(e.target);
         return;
       }
       e.preventDefault();
@@ -811,10 +779,10 @@ var createConfig = ({
         if (!finished) return;
         if (reactNavigation.canGoBack()) {
           reactNavigation.dispatch(e.data?.action);
-          RouteStore.removeRoute(e.target);
+          ScreenStore.removeScreen(e.target);
         }
       };
-      RouteStore.updateRoute(e.target, {
+      ScreenStore.updateScreen(e.target, {
         status: 0,
         closing: true,
         onAnimationFinish: handleFinish
@@ -824,13 +792,13 @@ var createConfig = ({
 };
 
 // src/utils/create-transition-component.tsx
-var import_react5 = require("react");
+var import_react4 = require("react");
 var import_react_native2 = require("react-native");
 var import_react_native_gesture_handler2 = require("react-native-gesture-handler");
 var import_react_native_reanimated7 = __toESM(require("react-native-reanimated"));
 
 // src/hooks/use-skip-first-frame.tsx
-var import_react4 = require("react");
+var import_react3 = require("react");
 var import_react_native_reanimated6 = require("react-native-reanimated");
 var useSkipFirstFrame = () => {
   const opacity = (0, import_react_native_reanimated6.useSharedValue)(0);
@@ -840,7 +808,7 @@ var useSkipFirstFrame = () => {
       opacity: opacity.value
     };
   });
-  (0, import_react4.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     requestAnimationFrame(() => {
       opacity.value = 1;
     });
@@ -852,7 +820,7 @@ var useSkipFirstFrame = () => {
 var import_jsx_runtime = require("react/jsx-runtime");
 function createTransitionComponent(Wrapped) {
   const AnimatedComponent = import_react_native_reanimated7.default.createAnimatedComponent(Wrapped);
-  const Inner = (0, import_react5.forwardRef)(
+  const Inner = (0, import_react4.forwardRef)(
     (props, ref) => {
       const { children, style, ...rest } = props;
       const {
@@ -898,7 +866,7 @@ function createTransitionComponent(Wrapped) {
     }
   );
   Inner.displayName = `Transition(${Wrapped.displayName || Wrapped.name || "Component"})`;
-  return (0, import_react5.memo)(Inner);
+  return (0, import_react4.memo)(Inner);
 }
 
 // src/utils/default-screen-options.ts