feat: add support for custom screen transitions with native-stack v7

example/package.json

@@ -27,9 +27,9 @@
     "react-native": "0.73.2",
     "react-native-gesture-handler": "~2.14.0",
     "react-native-pager-view": "6.2.3",
-    "react-native-reanimated": "~3.6.0",
+    "react-native-reanimated": "~3.9.0-rc.0",
     "react-native-safe-area-context": "4.8.2",
-    "react-native-screens": "~3.29.0",
+    "react-native-screens": "~3.30.1",
     "react-native-web": "~0.19.9"
   },
   "devDependencies": {

packages/bottom-tabs/package.json

@@ -49,7 +49,7 @@
     "react-native": "0.73.2",
     "react-native-builder-bob": "^0.23.2",
     "react-native-safe-area-context": "4.8.2",
-    "react-native-screens": "~3.29.0",
+    "react-native-screens": "~3.30.1",
     "typescript": "^5.3.3"
   },
   "peerDependencies": {

packages/drawer/package.json

@@ -55,9 +55,9 @@
     "react-native": "0.73.2",
     "react-native-builder-bob": "^0.23.2",
     "react-native-gesture-handler": "~2.14.0",
-    "react-native-reanimated": "~3.6.0",
+    "react-native-reanimated": "~3.9.0-rc.0",
     "react-native-safe-area-context": "4.8.2",
-    "react-native-screens": "~3.29.0",
+    "react-native-screens": "~3.30.1",
     "typescript": "^5.3.3"
   },
   "peerDependencies": {

packages/native-stack/package.json

@@ -52,7 +52,7 @@
     "react": "18.2.0",
     "react-native": "0.73.2",
     "react-native-builder-bob": "^0.23.2",
-    "react-native-screens": "~3.29.0",
+    "react-native-screens": "~3.30.1",
     "typescript": "^5.3.3"
   },
   "peerDependencies": {

packages/native-stack/src/types.tsx

@@ -11,13 +11,15 @@ import type {
   StackRouterOptions,
   Theme,
 } from '@react-navigation/native';
+import type { PropsWithChildren } from 'react';
 import type {
   ImageSourcePropType,
   StyleProp,
   TextStyle,
   ViewStyle,
 } from 'react-native';
 import type {
+  GestureDetectorBridge,
   ScreenProps,
   ScreenStackHeaderConfigProps,
   SearchBarProps,
@@ -452,6 +454,43 @@ export type NativeStackNavigationOptions = {
    * @platform ios
    */
   gestureResponseDistance?: ScreenProps['gestureResponseDistance'];
+  /**
+   * Changes the gesture for dismissing the screen to the previous one.
+   *
+   * Supported values:
+   * - "swipeRight": swipe right to dismiss the screen
+   * - "swipeLeft": swipe left to dismiss the screen
+   * - "swipeUp": swipe up to dismiss the screen
+   * - "swipeDown": swipe down to dismiss the screen
+   * - "verticalSwipe": swipe up or down to dismiss the screen
+   * - "horizontalSwipe": swipe left or right to dismiss the screen
+   * - "twoDimensionalSwipe": swipe in any direction to dismiss the screen
+   *
+   * Only supported on iOS and Android.
+   */
+  goBackGesture?: GoBackGesture;
+  /**
+   * Changes the animation for dismissing the screen when making a swipe gesture.
+   * You can choose one of the built-in transition presets, by using `ScreenTransition` from `react-native-reanimated`.
+   *
+   * Supported values:
+   * - ScreenTransition.SwipeRight
+   * - ScreenTransition.SwipeLeft
+   * - ScreenTransition.SwipeUp
+   * - ScreenTransition.SwipeDown
+   * - ScreenTransition.Horizontal
+   * - ScreenTransition.Vertical
+   * - ScreenTransition.TwoDimensional
+   * - ScreenTransition.SwipeRightFade
+   *
+   * You can also construct custom screen transition by providing an object with `topScreenFrame` and `belowTopScreenFrame` properties.
+   * Only supported on iOS and Android.
+   */
+  transitionAnimation?: AnimatedScreenTransition;
+  /**
+   * Whether the screen should allow for making a swipe gesture from screen edges. Defaults to `true`.
+   */
+  screenEdgeGesture?: boolean;
   /**
    * The type of animation to use when this screen replaces another screen. Defaults to `pop`.
    *
@@ -602,3 +641,58 @@ export type NativeStackDescriptor = Descriptor<
 export type NativeStackDescriptorMap = {
   [key: string]: NativeStackDescriptor;
 };
+
+// copy from GestureHandler to avoid strong dependency
+export type PanGestureHandlerEventPayload = {
+  x: number;
+  y: number;
+  absoluteX: number;
+  absoluteY: number;
+  translationX: number;
+  translationY: number;
+  velocityX: number;
+  velocityY: number;
+};
+
+// copy from Reanimated to avoid strong dependency
+export type GoBackGesture =
+  | 'swipeRight'
+  | 'swipeLeft'
+  | 'swipeUp'
+  | 'swipeDown'
+  | 'verticalSwipe'
+  | 'horizontalSwipe'
+  | 'twoDimensionalSwipe';
+
+export interface MeasuredDimensions {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  pageX: number;
+  pageY: number;
+}
+
+export type AnimatedScreenTransition = {
+  topScreenFrame: (
+    event: PanGestureHandlerEventPayload,
+    screenSize: MeasuredDimensions
+  ) => Record<string, unknown>;
+  belowTopScreenFrame: (
+    event: PanGestureHandlerEventPayload,
+    screenSize: MeasuredDimensions
+  ) => Record<string, unknown>;
+};
+
+export type ScreensRefsHolder = React.MutableRefObject<
+  Record<string, React.MutableRefObject<React.Ref<NativeStackNavigatorProps>>>
+>;
+
+export type GestureProviderProps = PropsWithChildren<{
+  gestureDetectorBridge: React.MutableRefObject<GestureDetectorBridge>;
+  screensRefs: ScreensRefsHolder;
+  currentRouteKey: string;
+  goBackGesture: GoBackGesture | undefined;
+  transitionAnimation: AnimatedScreenTransition | undefined;
+  screenEdgeGesture: boolean | undefined;
+}>;

packages/native-stack/src/views/HeaderConfig.tsx

@@ -278,6 +278,7 @@ export function HeaderConfig({
       ) : null}
       {hasHeaderSearchBar ? (
         <ScreenStackHeaderSearchBarView>
+          {/* @ts-expect-error: it's not possible to retype `ref` for now. */}
           <SearchBar {...headerSearchBarOptions} />
         </ScreenStackHeaderSearchBarView>
       ) : null}