react-native-screens 3.29.0 → 3.30.1

package/src/native-stack/types.tsx

@@ -10,6 +10,7 @@ import {
   RouteProp,
 } from '@react-navigation/native';
 import * as React from 'react';
+import { PropsWithChildren } from 'react';
 import {
   ImageSourcePropType,
   StyleProp,
@@ -17,6 +18,7 @@ import {
   ColorValue,
 } from 'react-native';
 import {
+  GestureDetectorBridge,
   ScreenProps,
   ScreenStackHeaderConfigProps,
   SearchBarProps,
@@ -390,7 +392,7 @@ export type NativeStackNavigationOptions = {
    * - "simple_push" – performs a default animation, but without shadow and native header transition (iOS only)
    * - "slide_from_bottom" – performs a slide from bottom animation
    * - "slide_from_right" - slide in the new screen from right to left (Android only, resolves to default transition on iOS)
-   * - "slide_from_left" - slide in the new screen from left to right (Android only, resolves to default transition on iOS)
+   * - "slide_from_left" - slide in the new screen from left to right
    * - "ios" - iOS like slide in animation (Android only, resolves to default transition on iOS)
    * - "none" – the screen appears/dissapears without an animation
    */
@@ -451,6 +453,10 @@ export type NativeStackNavigationOptions = {
    * @platform ios
    */
   transitionDuration?: number;
+
+  goBackGesture?: GoBackGesture;
+  transitionAnimation?: AnimatedScreenTransition;
+  screenEdgeGesture?: boolean;
 };
 
 export type NativeStackNavigatorProps =
@@ -468,3 +474,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;
+}>;

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

@@ -16,6 +16,7 @@ import {
 import { NativeStackNavigationOptions } from '../types';
 import { useBackPressSubscription } from '../utils/useBackPressSubscription';
 import { processFonts } from './FontProcessor';
+import warnOnce from 'warn-once';
 
 type Props = NativeStackNavigationOptions & {
   route: Route<string>;
@@ -96,6 +97,15 @@ export default function HeaderConfig({
     return searchBar;
   }, [searchBar, createSubscription, clearSubscription]);
 
+  // @ts-ignore isVision is not yet in the type definitions (RN 0.74+)
+  const isVisionOS = Platform?.isVision;
+
+  warnOnce(
+    isVisionOS &&
+      (headerTitleStyle.color !== undefined || headerTintColor !== undefined),
+    'headerTitleStyle.color and headerTintColor are not supported on visionOS.'
+  );
+
   return (
     <ScreenStackHeaderConfig
       backButtonInCustomView={backButtonInCustomView}
@@ -165,6 +175,7 @@ export default function HeaderConfig({
       {isSearchBarAvailableForCurrentPlatform &&
       processedSearchBarOptions !== undefined ? (
         <ScreenStackHeaderSearchBarView>
+          {/* @ts-ignore Skip incorrect error about incompatible ref types */}
           <SearchBar {...processedSearchBarOptions} />
         </ScreenStackHeaderSearchBarView>
       ) : null}

package/src/native-stack/views/NativeStackView.tsx

@@ -8,6 +8,8 @@ import {
   ScreenStack,
   StackPresentationTypes,
   ScreenContext,
+  GHContext,
+  GestureDetectorBridge,
 } from 'react-native-screens';
 import {
   ParamListBase,
@@ -26,6 +28,8 @@ import {
   NativeStackDescriptorMap,
   NativeStackNavigationHelpers,
   NativeStackNavigationOptions,
+  NativeStackNavigatorProps,
+  ScreensRefsHolder,
 } from '../types';
 import HeaderConfig from './HeaderConfig';
 import SafeAreaProviderCompat from '../utils/SafeAreaProviderCompat';
@@ -159,12 +163,14 @@ const RouteView = ({
   index,
   navigation,
   stateKey,
+  screensRefs,
 }: {
   descriptors: NativeStackDescriptorMap;
   route: NavigationRoute<ParamListBase, string>;
   index: number;
   navigation: NativeStackNavigationHelpers;
   stateKey: string;
+  screensRefs: ScreensRefsHolder;
 }) => {
   const { options, render: renderScene } = descriptors[route.key];
   const {
@@ -260,12 +266,21 @@ const RouteView = ({
   ).current;
 
   const Screen = React.useContext(ScreenContext);
-
   const { dark } = useTheme();
 
+  const screenRef = React.useRef(null);
+  React.useEffect(() => {
+    screensRefs.current[route.key] = screenRef;
+    return () => {
+      // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+      delete screensRefs.current[route.key];
+    };
+  });
+
   return (
     <Screen
       key={route.key}
+      ref={screenRef}
       enabled
       isNativeStack
       hasLargeHeader={hasLargeHeader}
@@ -403,19 +418,56 @@ function NativeStackViewInner({
 }: Props): JSX.Element {
   const { key, routes } = state;
 
+  const currentRouteKey = routes[state.index].key;
+  const { goBackGesture, transitionAnimation, screenEdgeGesture } =
+    descriptors[currentRouteKey].options;
+  const gestureDetectorBridge = React.useRef<GestureDetectorBridge>({
+    stackUseEffectCallback: _stackRef => {
+      // this method will be override in GestureDetector
+    },
+  });
+  type RefHolder = Record<
+    string,
+    React.MutableRefObject<React.Ref<NativeStackNavigatorProps>>
+  >;
+  const screensRefs = React.useRef<RefHolder>({});
+  const ScreenGestureDetector = React.useContext(GHContext);
+
+  React.useEffect(() => {
+    if (
+      ScreenGestureDetector.name !== 'GHWrapper' &&
+      goBackGesture !== undefined
+    ) {
+      console.warn(
+        'Cannot detect GestureDetectorProvider in a screen that uses `goBackGesture`. Make sure your navigator is wrapped in GestureDetectorProvider.'
+      );
+    }
+  }, [ScreenGestureDetector.name, goBackGesture]);
+
   return (
-    <ScreenStack style={styles.container}>
-      {routes.map((route, index) => (
-        <RouteView
-          key={route.key}
-          descriptors={descriptors}
-          route={route}
-          index={index}
-          navigation={navigation}
-          stateKey={key}
-        />
-      ))}
-    </ScreenStack>
+    <ScreenGestureDetector
+      gestureDetectorBridge={gestureDetectorBridge}
+      goBackGesture={goBackGesture}
+      transitionAnimation={transitionAnimation}
+      screenEdgeGesture={screenEdgeGesture ?? false}
+      screensRefs={screensRefs}
+      currentRouteKey={currentRouteKey}>
+      <ScreenStack
+        style={styles.container}
+        gestureDetectorBridge={gestureDetectorBridge}>
+        {routes.map((route, index) => (
+          <RouteView
+            key={route.key}
+            descriptors={descriptors}
+            route={route}
+            index={index}
+            navigation={navigation}
+            stateKey={key}
+            screensRefs={screensRefs}
+          />
+        ))}
+      </ScreenStack>
+    </ScreenGestureDetector>
   );
 }
 

package/src/types.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import {
   Animated,
   NativeSyntheticEvent,
@@ -7,6 +8,7 @@ import {
   TextInputFocusEventData,
   ColorValue,
 } from 'react-native';
+import { NativeStackNavigatorProps } from './native-stack/types';
 
 export type SearchBarCommands = {
   focus: () => void;
@@ -14,6 +16,7 @@ export type SearchBarCommands = {
   clearText: () => void;
   toggleCancelButton: (show: boolean) => void;
   setText: (text: string) => void;
+  cancelSearch: () => void;
 };
 
 export type StackPresentationTypes =
@@ -319,7 +322,7 @@ export interface ScreenProps extends ViewProps {
    * - "simple_push" – performs a default animation, but without shadow and native header transition (iOS only)
    * - `slide_from_bottom` – performs a slide from bottom animation
    * - "slide_from_right" - slide in the new screen from right to left (Android only, resolves to default transition on iOS)
-   * - "slide_from_left" - slide in the new screen from left to right (Android only, resolves to default transition on iOS)
+   * - "slide_from_left" - slide in the new screen from left to right
    * - "ios" - iOS like slide in animation (Android only, resolves to default transition on iOS)
    * - "none" – the screen appears/dissapears without an animation
    */
@@ -391,12 +394,20 @@ export interface ScreenContainerProps extends ViewProps {
   hasTwoStates?: boolean;
 }
 
+export interface GestureDetectorBridge {
+  stackUseEffectCallback: (
+    stackRef: React.MutableRefObject<React.Ref<NativeStackNavigatorProps>>
+  ) => void;
+}
+
 export interface ScreenStackProps extends ViewProps {
   children?: React.ReactNode;
   /**
    * A callback that gets called when the current screen finishes its transition.
    */
   onFinishTransitioning?: (e: NativeSyntheticEvent<TargetedEvent>) => void;
+  gestureDetectorBridge?: React.MutableRefObject<GestureDetectorBridge>;
+  ref?: React.MutableRefObject<React.Ref<View>>;
 }
 
 export interface ScreenStackHeaderConfigProps extends ViewProps {
@@ -552,6 +563,7 @@ export interface SearchBarProps {
    * * `blur` - removes focus from the search bar
    * * `clearText` - removes any text present in the search bar input field
    * * `setText` - sets the search bar's content to given value
+   * * `cancelSearch` - cancel search in search bar.
    * * `toggleCancelButton` - depending on passed boolean value, hides or shows cancel button (iOS only)
    */
   ref?: React.RefObject<SearchBarCommands>;