@react-navigation/stack 8.0.0-alpha.36 → 8.0.0-alpha.38

package/src/views/Stack/Card.tsx

@@ -9,6 +9,7 @@ import {
   View,
   type ViewStyle,
 } from 'react-native';
+import type { PanGestureConfig } from 'react-native-gesture-handler';
 import type { EdgeInsets } from 'react-native-safe-area-context';
 import useLatestCallback from 'use-latest-callback';
 
@@ -23,11 +24,7 @@ import { gestureActivationCriteria } from '../../utils/gestureActivationCriteria
 import { getDistanceForDirection } from '../../utils/getDistanceForDirection';
 import { getInvertedMultiplier } from '../../utils/getInvertedMultiplier';
 import { getShadowStyle } from '../../utils/getShadowStyle';
-import {
-  GestureState,
-  PanGestureHandler,
-  type PanGestureHandlerGestureEvent,
-} from '../GestureHandler';
+import { GestureDetector, usePanGesture } from '../GestureHandler';
 import { CardContent } from './CardContent';
 
 type Props = {
@@ -243,84 +240,6 @@ function Card({
     }
   );
 
-  const onGestureStateChange = useLatestCallback(
-    ({ nativeEvent }: PanGestureHandlerGestureEvent) => {
-      switch (nativeEvent.state) {
-        case GestureState.ACTIVE:
-          clearTimeout(pendingGestureCallbackRef.current);
-          clearTimeout(pendingOnCloseCallbackRef.current);
-          isSwiping.setValue(TRUE);
-          onGestureBegin?.();
-          break;
-        case GestureState.CANCELLED:
-        case GestureState.FAILED: {
-          isSwiping.setValue(FALSE);
-
-          const velocity =
-            gestureDirection === 'vertical' ||
-            gestureDirection === 'vertical-inverted'
-              ? nativeEvent.velocityY
-              : nativeEvent.velocityX;
-
-          animate({
-            closing,
-            velocity,
-          });
-
-          onGestureCanceled?.();
-          break;
-        }
-        case GestureState.END: {
-          isSwiping.setValue(FALSE);
-
-          let distance;
-          let translation;
-          let velocity;
-
-          if (
-            gestureDirection === 'vertical' ||
-            gestureDirection === 'vertical-inverted'
-          ) {
-            distance = layout.height;
-            translation = nativeEvent.translationY;
-            velocity = nativeEvent.velocityY;
-          } else {
-            distance = layout.width;
-            translation = nativeEvent.translationX;
-            velocity = nativeEvent.velocityX;
-          }
-
-          const shouldClose =
-            (translation + velocity * gestureVelocityImpact) *
-              getInvertedMultiplier(gestureDirection, direction === 'rtl') >
-            distance / 2
-              ? velocity !== 0 || translation !== 0
-              : closing;
-
-          animate({ closing: shouldClose, velocity });
-
-          if (shouldClose) {
-            // We call onClose with a delay to make sure that the animation has already started
-            // This will make sure that the state update caused by this doesn't affect start of animation
-            pendingGestureCallbackRef.current = setTimeout(() => {
-              onClose();
-
-              // Check if the screen is still closing with a delay
-              // So state update from onClose has a chance to go through
-              // If route wasn't removed after onClose, re-open it
-              pendingOnCloseCallbackRef.current = setTimeout(() => {
-                maybeAnimate();
-              }, 32);
-            }, 16);
-          }
-
-          onGestureEnd?.();
-          break;
-        }
-      }
-    }
-  );
-
   React.useLayoutEffect(() => {
     layoutAnim.width.setValue(layout.width);
     layoutAnim.height.setValue(layout.height);
@@ -478,17 +397,89 @@ function Card({
       [styleInterpolator, interpolationProps]
     );
 
-  const onGestureEvent = React.useMemo(
+  const onGestureActivate: PanGestureConfig['onActivate'] = useLatestCallback(
+    () => {
+      clearTimeout(pendingGestureCallbackRef.current);
+      clearTimeout(pendingOnCloseCallbackRef.current);
+      isSwiping.setValue(TRUE);
+      onGestureBegin?.();
+    }
+  );
+
+  const onGestureDeactivate: PanGestureConfig['onDeactivate'] =
+    useLatestCallback((event) => {
+      isSwiping.setValue(FALSE);
+
+      let distance;
+      let translation;
+      let velocity;
+
+      if (
+        gestureDirection === 'vertical' ||
+        gestureDirection === 'vertical-inverted'
+      ) {
+        distance = layout.height;
+        translation = event.translationY;
+        velocity = event.velocityY;
+      } else {
+        distance = layout.width;
+        translation = event.translationX;
+        velocity = event.velocityX;
+      }
+
+      gesture.setValue(translation);
+
+      if (event.canceled) {
+        animate({
+          closing,
+          velocity,
+        });
+
+        onGestureCanceled?.();
+
+        return;
+      }
+
+      const shouldClose =
+        (translation + velocity * gestureVelocityImpact) *
+          getInvertedMultiplier(gestureDirection, direction === 'rtl') >
+        distance / 2
+          ? velocity !== 0 || translation !== 0
+          : closing;
+
+      animate({ closing: shouldClose, velocity });
+
+      if (shouldClose) {
+        // We call onClose with a delay to make sure that the animation has already started
+        // This will make sure that the state update caused by this doesn't affect start of animation
+        pendingGestureCallbackRef.current = setTimeout(() => {
+          onClose();
+
+          // Check if the screen is still closing with a delay
+          // So state update from onClose has a chance to go through
+          // If route wasn't removed after onClose, re-open it
+          pendingOnCloseCallbackRef.current = setTimeout(() => {
+            maybeAnimate();
+          }, 32);
+        }, 16);
+      }
+
+      onGestureEnd?.();
+    });
+
+  const onGestureEvent: PanGestureConfig['onUpdate'] = React.useMemo(
     () =>
       gestureEnabled
         ? Animated.event(
             [
               {
-                nativeEvent:
-                  gestureDirection === 'vertical' ||
-                  gestureDirection === 'vertical-inverted'
-                    ? { translationY: gesture }
-                    : { translationX: gesture },
+                nativeEvent: {
+                  handlerData:
+                    gestureDirection === 'vertical' ||
+                    gestureDirection === 'vertical-inverted'
+                      ? { translationY: gesture }
+                      : { translationX: gesture },
+                },
               },
             ],
             { useNativeDriver }
@@ -497,6 +488,35 @@ function Card({
     [gesture, gestureDirection, gestureEnabled]
   );
 
+  const panGestureConfig = React.useMemo(
+    (): PanGestureConfig => ({
+      enabled: layout.width !== 0 && gestureEnabled,
+      onActivate: onGestureActivate,
+      onDeactivate: onGestureDeactivate,
+      onUpdate: onGestureEvent,
+      disableReanimated: true,
+      useAnimated: true,
+      ...gestureActivationCriteria({
+        layout,
+        direction,
+        gestureDirection,
+        gestureResponseDistance,
+      }),
+    }),
+    [
+      direction,
+      gestureDirection,
+      gestureEnabled,
+      gestureResponseDistance,
+      layout,
+      onGestureActivate,
+      onGestureDeactivate,
+      onGestureEvent,
+    ]
+  );
+
+  const panGesture = usePanGesture(panGestureConfig);
+
   const { backgroundColor } = StyleSheet.flatten(contentStyle || {});
 
   const isTransparent =
@@ -528,17 +548,7 @@ function Card({
       <Animated.View
         style={[styles.container, containerStyle, customContainerStyle]}
       >
-        <PanGestureHandler
-          enabled={layout.width !== 0 && gestureEnabled}
-          onGestureEvent={onGestureEvent}
-          onHandlerStateChange={onGestureStateChange}
-          {...gestureActivationCriteria({
-            layout,
-            direction,
-            gestureDirection,
-            gestureResponseDistance,
-          })}
-        >
+        <GestureDetector gesture={panGesture}>
           <Animated.View
             needsOffscreenAlphaCompositing={hasOpacityStyle(cardStyle)}
             style={[styles.container, cardStyle]}
@@ -567,7 +577,7 @@ function Card({
               {children}
             </CardContent>
           </Animated.View>
-        </PanGestureHandler>
+        </GestureDetector>
       </Animated.View>
     </CardAnimationContext.Provider>
   );

package/src/views/Stack/CardStack.tsx

@@ -113,12 +113,16 @@ const NAMED_TRANSITIONS_PRESETS = {
   }),
 } as const satisfies Record<StackAnimationName, TransitionPreset>;
 
-const FALLBACK_DESCRIPTOR = Object.freeze({ options: {} });
-
 const HIDDEN_HEADER_HEIGHT = { measured: false, value: 0 };
 
 const getInterpolationIndex = (scenes: Scene[], index: number) => {
-  const { cardStyleInterpolator } = scenes[index].descriptor.options;
+  const scene = scenes[index];
+
+  if (scene == null) {
+    throw new Error(`Couldn't find a scene at index ${index}.`);
+  }
+
+  const { cardStyleInterpolator } = scene.descriptor.options;
 
   // Start from current card and count backwards the number of cards with same interpolation
   let interpolationIndex = 0;
@@ -347,27 +351,36 @@ export class CardStack extends React.Component<Props, State> {
       const oldScene = state.scenes[index];
 
       const currentGesture = gestures[route.key];
+
+      if (currentGesture == null) {
+        throw new Error(`Couldn't find a gesture for route '${route.key}'.`);
+      }
+
       const previousGesture = previousRoute
         ? gestures[previousRoute.key]
         : undefined;
       const nextGesture = nextRoute ? gestures[nextRoute.key] : undefined;
 
       const descriptor =
-        props.descriptors[route.key] ||
-        state.descriptors[route.key] ||
-        (oldScene ? oldScene.descriptor : FALLBACK_DESCRIPTOR);
-
-      const nextOptions =
-        nextRoute &&
-        (props.descriptors[nextRoute?.key] || state.descriptors[nextRoute?.key])
-          ?.options;
-
-      const previousOptions =
-        previousRoute &&
-        (
-          props.descriptors[previousRoute?.key] ||
-          state.descriptors[previousRoute?.key]
-        )?.options;
+        props.descriptors[route.key] ??
+        state.descriptors[route.key] ??
+        oldScene?.descriptor;
+
+      if (descriptor == null) {
+        throw new Error(`Couldn't find a descriptor for route '${route.key}'.`);
+      }
+
+      const nextOptions = nextRoute
+        ? (props.descriptors[nextRoute.key] ?? state.descriptors[nextRoute.key])
+            ?.options
+        : undefined;
+
+      const previousOptions = previousRoute
+        ? (
+            props.descriptors[previousRoute.key] ??
+            state.descriptors[previousRoute.key]
+          )?.options
+        : undefined;
 
       // When a screen is not the last, it should use next screen's transition config
       // Many transitions also animate the previous screen, so using 2 different transitions doesn't look right
@@ -582,7 +595,13 @@ export class CardStack extends React.Component<Props, State> {
   private getFocusedRoute = () => {
     const { state } = this.props;
 
-    return state.routes[state.index];
+    const route = state.routes[state.index];
+
+    if (route == null) {
+      throw new Error(`Couldn't find a route at index ${state.index}.`);
+    }
+
+    return route;
   };
 
   private getPreviousScene = ({ route }: { route: Route<string> }) => {
@@ -628,6 +647,10 @@ export class CardStack extends React.Component<Props, State> {
 
     const focusedRoute = state.routes[state.index];
 
+    if (focusedRoute == null) {
+      throw new Error(`Couldn't find a route at index ${state.index}.`);
+    }
+
     // Render only two top-most active headers as a workaround for
     // https://github.com/react-navigation/react-navigation/issues/12456.
     // If the header is persisted, it might be placed incorrectly when navigating back
@@ -682,6 +705,19 @@ export class CardStack extends React.Component<Props, State> {
             const gesture = gestures[route.key];
             const scene = scenes[index];
 
+            if (gesture == null) {
+              throw new Error(
+                `Couldn't find a gesture for route '${route.key}'.`
+              );
+            }
+
+            if (scene == null) {
+              throw new Error(`Couldn't find a scene at index ${index}.`);
+            }
+
+            const nextScene = scenes[index + 1];
+            const nextRoute = self[index + 1];
+
             const {
               inactiveBehavior = 'pause',
               animation,
@@ -712,15 +748,12 @@ export class CardStack extends React.Component<Props, State> {
               getAnimationEnabled(animation) ||
               // Also check next screen's animation,
               // As it will result in both screens being visible
-              (scenes[index + 1]
-                ? getAnimationEnabled(
-                    scenes[index + 1].descriptor.options.animation
-                  )
+              (nextScene
+                ? getAnimationEnabled(nextScene.descriptor.options.animation)
                 : false);
 
             const isNextScreenTransparent =
-              scenes[index + 1]?.descriptor.options.presentation ===
-              'transparentModal';
+              nextScene?.descriptor.options.presentation === 'transparentModal';
 
             const isRemoving =
               replacingRouteKeys.includes(route.key) ||
@@ -728,9 +761,10 @@ export class CardStack extends React.Component<Props, State> {
 
             const isFocusing =
               openingRouteKeys.includes(route.key) ||
-              [...closingRouteKeys, ...replacingRouteKeys].includes(
-                self[index + 1]?.key
-              );
+              (nextRoute != null &&
+                [...closingRouteKeys, ...replacingRouteKeys].includes(
+                  nextRoute.key
+                ));
 
             const isInactive = isInactiveRoute(route, this.props.routes);
             const isRetained = state.retainedRouteKeys?.includes(route.key);

package/src/views/Stack/StackView.tsx

@@ -64,10 +64,20 @@ export class StackView extends React.Component<Props, State> {
   ) {
     const allRoutes = props.state.routes;
     const previousRoutes = state.previousState?.routes ?? [];
-    const previousFocusedRoute = state.previousState
-      ? state.previousState.routes[state.previousState.index]
-      : undefined;
+    const previousFocusedRoute =
+      state.previousState?.routes[state.previousState.index];
     const nextFocusedRouteFromState = props.state.routes[props.state.index];
+
+    if (state.previousState && previousFocusedRoute == null) {
+      throw new Error(
+        `Couldn't find a route at index ${state.previousState.index}.`
+      );
+    }
+
+    if (nextFocusedRouteFromState == null) {
+      throw new Error(`Couldn't find a route at index ${props.state.index}.`);
+    }
+
     const activeRoutes = props.state.routes.slice(0, props.state.index + 1);
 
     // If there was no change in routes, we don't need to compute anything
@@ -118,7 +128,7 @@ export class StackView extends React.Component<Props, State> {
           {}
         );
 
-        routes = routes.map((route) => map[route.key] || route);
+        routes = routes.map((route) => map[route.key] ?? route);
       }
 
       const routeKeys = new Set(routes.map((route) => route.key));
@@ -126,8 +136,16 @@ export class StackView extends React.Component<Props, State> {
         ...routes,
         ...props.state.routes.filter((route) => !routeKeys.has(route.key)),
       ].reduce<StackDescriptorMap>((acc, route) => {
-        acc[route.key] =
-          props.descriptors[route.key] || state.descriptors[route.key];
+        const descriptor =
+          props.descriptors[route.key] ?? state.descriptors[route.key];
+
+        if (descriptor == null) {
+          throw new Error(
+            `Couldn't find a descriptor for route '${route.key}'.`
+          );
+        }
+
+        acc[route.key] = descriptor;
 
         return acc;
       }, {});
@@ -157,16 +175,22 @@ export class StackView extends React.Component<Props, State> {
     // Get previous focused route from previous active routes
     const nextFocusedRoute = activeRoutes[activeRoutes.length - 1];
 
+    if (nextFocusedRoute == null) {
+      throw new Error(
+        `Couldn't find a route at index ${activeRoutes.length - 1}.`
+      );
+    }
+
     const isAnimationEnabled = (key: string) => {
-      const descriptor = props.descriptors[key] || state.descriptors[key];
+      const descriptor = props.descriptors[key] ?? state.descriptors[key];
 
       return getAnimationEnabled(descriptor?.options.animation);
     };
 
     const getAnimationTypeForReplace = (key: string) => {
-      const descriptor = props.descriptors[key] || state.descriptors[key];
+      const descriptor = props.descriptors[key] ?? state.descriptors[key];
 
-      return descriptor.options.animationTypeForReplace ?? 'push';
+      return descriptor?.options.animationTypeForReplace ?? 'push';
     };
 
     let routes = activeRoutes;
@@ -301,8 +325,14 @@ export class StackView extends React.Component<Props, State> {
       ...routes,
       ...props.state.routes.filter((route) => !routeKeys.has(route.key)),
     ].reduce<StackDescriptorMap>((acc, route) => {
-      acc[route.key] =
-        props.descriptors[route.key] || state.descriptors[route.key];
+      const descriptor =
+        props.descriptors[route.key] ?? state.descriptors[route.key];
+
+      if (descriptor == null) {
+        throw new Error(`Couldn't find a descriptor for route '${route.key}'.`);
+      }
+
+      acc[route.key] = descriptor;
 
       return acc;
     }, {});

package/lib/module/utils/GestureHandlerRefContext.js

@@ -1,5 +0,0 @@
-"use strict";
-
-import * as React from 'react';
-export const GestureHandlerRefContext = /*#__PURE__*/React.createContext(null);
-//# sourceMappingURL=GestureHandlerRefContext.js.map

package/lib/module/utils/GestureHandlerRefContext.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["React","GestureHandlerRefContext","createContext"],"sourceRoot":"../../../src","sources":["utils/GestureHandlerRefContext.tsx"],"mappings":";;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,OAAO,MAAMC,wBAAwB,gBAAGD,KAAK,CAACE,aAAa,CAEjD,IAAI,CAAC","ignoreList":[]}

package/lib/module/utils/findLastIndex.js

@@ -1,11 +0,0 @@
-"use strict";
-
-export function findLastIndex(array, callback) {
-  for (let i = array.length - 1; i >= 0; i--) {
-    if (callback(array[i])) {
-      return i;
-    }
-  }
-  return -1;
-}
-//# sourceMappingURL=findLastIndex.js.map

package/lib/module/utils/findLastIndex.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["findLastIndex","array","callback","i","length"],"sourceRoot":"../../../src","sources":["utils/findLastIndex.tsx"],"mappings":";;AAAA,OAAO,SAASA,aAAaA,CAAIC,KAAU,EAAEC,QAA+B,EAAE;EAC5E,KAAK,IAAIC,CAAC,GAAGF,KAAK,CAACG,MAAM,GAAG,CAAC,EAAED,CAAC,IAAI,CAAC,EAAEA,CAAC,EAAE,EAAE;IAC1C,IAAID,QAAQ,CAACD,KAAK,CAACE,CAAC,CAAC,CAAC,EAAE;MACtB,OAAOA,CAAC;IACV;EACF;EAEA,OAAO,CAAC,CAAC;AACX","ignoreList":[]}

package/lib/module/utils/useGestureHandlerRef.js

@@ -1,12 +0,0 @@
-"use strict";
-
-import * as React from 'react';
-import { GestureHandlerRefContext } from "./GestureHandlerRefContext.js";
-export function useGestureHandlerRef() {
-  const ref = React.use(GestureHandlerRefContext);
-  if (ref === undefined) {
-    throw new Error("Couldn't find a ref for gesture handler. Are you inside a screen in Stack?");
-  }
-  return ref;
-}
-//# sourceMappingURL=useGestureHandlerRef.js.map

package/lib/module/utils/useGestureHandlerRef.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["React","GestureHandlerRefContext","useGestureHandlerRef","ref","use","undefined","Error"],"sourceRoot":"../../../src","sources":["utils/useGestureHandlerRef.tsx"],"mappings":";;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,SAASC,wBAAwB,QAAQ,+BAA4B;AAErE,OAAO,SAASC,oBAAoBA,CAAA,EAAG;EACrC,MAAMC,GAAG,GAAGH,KAAK,CAACI,GAAG,CAACH,wBAAwB,CAAC;EAE/C,IAAIE,GAAG,KAAKE,SAAS,EAAE;IACrB,MAAM,IAAIC,KAAK,CACb,4EACF,CAAC;EACH;EAEA,OAAOH,GAAG;AACZ","ignoreList":[]}

package/lib/typescript/src/utils/GestureHandlerRefContext.d.ts

@@ -1,3 +0,0 @@
-import * as React from 'react';
-export declare const GestureHandlerRefContext: React.Context<React.Ref<React.ComponentType<import("react-native-gesture-handler").PanGestureHandlerProps & React.RefAttributes<any>>>>;
-//# sourceMappingURL=GestureHandlerRefContext.d.ts.map

package/lib/typescript/src/utils/GestureHandlerRefContext.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"GestureHandlerRefContext.d.ts","sourceRoot":"","sources":["../../../../src/utils/GestureHandlerRefContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,eAAO,MAAM,wBAAwB,yIAEtB,CAAC"}

package/lib/typescript/src/utils/findLastIndex.d.ts

@@ -1,2 +0,0 @@
-export declare function findLastIndex<T>(array: T[], callback: (value: T) => boolean): number;
-//# sourceMappingURL=findLastIndex.d.ts.map

package/lib/typescript/src/utils/findLastIndex.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"findLastIndex.d.ts","sourceRoot":"","sources":["../../../../src/utils/findLastIndex.tsx"],"names":[],"mappings":"AAAA,wBAAgB,aAAa,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,OAAO,UAQ3E"}

package/lib/typescript/src/utils/useGestureHandlerRef.d.ts

@@ -1,3 +0,0 @@
-import * as React from 'react';
-export declare function useGestureHandlerRef(): React.Ref<React.ComponentType<import("react-native-gesture-handler").PanGestureHandlerProps & React.RefAttributes<any>>>;
-//# sourceMappingURL=useGestureHandlerRef.d.ts.map

package/lib/typescript/src/utils/useGestureHandlerRef.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useGestureHandlerRef.d.ts","sourceRoot":"","sources":["../../../../src/utils/useGestureHandlerRef.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,wBAAgB,oBAAoB,6HAUnC"}

package/src/utils/GestureHandlerRefContext.tsx

@@ -1,5 +0,0 @@
-import * as React from 'react';
-
-export const GestureHandlerRefContext = React.createContext<React.Ref<
-  import('react-native-gesture-handler').PanGestureHandler
-> | null>(null);

package/src/utils/findLastIndex.tsx

@@ -1,9 +0,0 @@
-export function findLastIndex<T>(array: T[], callback: (value: T) => boolean) {
-  for (let i = array.length - 1; i >= 0; i--) {
-    if (callback(array[i])) {
-      return i;
-    }
-  }
-
-  return -1;
-}

package/src/utils/useGestureHandlerRef.tsx

@@ -1,15 +0,0 @@
-import * as React from 'react';
-
-import { GestureHandlerRefContext } from './GestureHandlerRefContext';
-
-export function useGestureHandlerRef() {
-  const ref = React.use(GestureHandlerRefContext);
-
-  if (ref === undefined) {
-    throw new Error(
-      "Couldn't find a ref for gesture handler. Are you inside a screen in Stack?"
-    );
-  }
-
-  return ref;
-}