@react-navigation/native-stack 6.6.1 → 6.8.0

package/src/views/HeaderConfig.tsx

@@ -1,4 +1,4 @@
-import { HeaderTitle } from '@react-navigation/elements';
+import { getHeaderTitle, HeaderTitle } from '@react-navigation/elements';
 import { Route, useTheme } from '@react-navigation/native';
 import * as React from 'react';
 import {
@@ -79,7 +79,7 @@ export default function HeaderConfig({
       headerTitleStyleFlattened.fontFamily,
     ]);
 
-  const titleText = title !== undefined ? title : route.name;
+  const titleText = getHeaderTitle({ title, headerTitle }, route.name);
   const titleColor =
     headerTitleStyleFlattened.color ?? headerTintColor ?? colors.text;
   const titleFontSize = headerTitleStyleFlattened.fontSize;
@@ -110,7 +110,10 @@ export default function HeaderConfig({
   });
   const headerTitleElement =
     typeof headerTitle === 'function'
-      ? headerTitle({ tintColor, children: titleText })
+      ? headerTitle({
+          tintColor,
+          children: titleText,
+        })
       : null;
 
   const supportsHeaderSearchBar =
@@ -171,7 +174,7 @@ export default function HeaderConfig({
         backTitleFontSize={headerBackTitleStyleFlattened.fontSize}
         blurEffect={headerBlurEffect}
         color={tintColor}
-        direction={I18nManager.isRTL ? 'rtl' : 'ltr'}
+        direction={I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'}
         disableBackButtonMenu={headerBackButtonMenuEnabled === false}
         hidden={headerShown === false}
         hideBackButton={headerBackVisible === false}
@@ -187,7 +190,7 @@ export default function HeaderConfig({
         largeTitleFontSize={headerLargeTitleStyleFlattened.fontSize}
         largeTitleFontWeight={headerLargeTitleStyleFlattened.fontWeight}
         largeTitleHideShadow={headerLargeTitleShadowVisible === false}
-        title={typeof headerTitle === 'string' ? headerTitle : titleText}
+        title={titleText}
         titleColor={titleColor}
         titleFontFamily={titleFontFamily}
         titleFontSize={titleFontSize}

package/src/views/NativeStackView.native.tsx

@@ -1,6 +1,7 @@
 import {
   getDefaultHeaderHeight,
   getHeaderTitle,
+  HeaderBackContext,
   HeaderHeightContext,
   HeaderShownContext,
   SafeAreaProviderCompat,
@@ -12,6 +13,7 @@ import {
   Route,
   StackActions,
   StackNavigationState,
+  usePreventRemoveContext,
   useTheme,
 } from '@react-navigation/native';
 import * as React from 'react';
@@ -34,6 +36,8 @@ import type {
   NativeStackNavigationHelpers,
   NativeStackNavigationOptions,
 } from '../types';
+import useDismissedRouteError from '../utils/useDismissedRouteError';
+import useInvalidPreventRemoveError from '../utils/useInvalidPreventRemoveError';
 import DebugContainer from './DebugContainer';
 import HeaderConfig from './HeaderConfig';
 
@@ -111,37 +115,76 @@ type SceneViewProps = {
   index: number;
   descriptor: NativeStackDescriptor;
   previousDescriptor?: NativeStackDescriptor;
+  nextDescriptor?: NativeStackDescriptor;
   onWillDisappear: () => void;
   onAppear: () => void;
   onDisappear: () => void;
   onDismissed: ScreenProps['onDismissed'];
+  onHeaderBackButtonClicked: () => void;
+  onNativeDismissCancelled: ScreenProps['onDismissed'];
 };
 
 const SceneView = ({
   descriptor,
   previousDescriptor,
+  nextDescriptor,
   index,
   onWillDisappear,
   onAppear,
   onDisappear,
   onDismissed,
+  onHeaderBackButtonClicked,
+  onNativeDismissCancelled,
 }: SceneViewProps) => {
   const { route, navigation, options, render } = descriptor;
   const {
-    animation,
+    animationDuration,
     animationTypeForReplace = 'push',
-    customAnimationOnGesture,
-    fullScreenGestureEnabled,
     gestureEnabled,
     header,
+    headerBackButtonMenuEnabled,
     headerShown,
+    autoHideHomeIndicator,
+    navigationBarColor,
+    navigationBarHidden,
     orientation,
     statusBarAnimation,
     statusBarHidden,
     statusBarStyle,
+    statusBarTranslucent,
+    statusBarColor,
+  } = options;
+
+  let {
+    animation,
+    customAnimationOnGesture,
+    fullScreenGestureEnabled,
+    presentation = 'card',
+    gestureDirection = presentation === 'card' ? 'horizontal' : 'vertical',
   } = options;
 
-  let { presentation = 'card' } = options;
+  if (gestureDirection === 'vertical' && Platform.OS === 'ios') {
+    // for `vertical` direction to work, we need to set `fullScreenGestureEnabled` to `true`
+    // so the screen can be dismissed from any point on screen.
+    // `customAnimationOnGesture` needs to be set to `true` so the `animation` set by user can be used,
+    // otherwise `simple_push` will be used.
+    // Also, the default animation for this direction seems to be `slide_from_bottom`.
+    if (fullScreenGestureEnabled === undefined) {
+      fullScreenGestureEnabled = true;
+    }
+    if (customAnimationOnGesture === undefined) {
+      customAnimationOnGesture = true;
+    }
+    if (animation === undefined) {
+      animation = 'slide_from_bottom';
+    }
+  }
+
+  // workaround for rn-screens where gestureDirection has to be set on both
+  // current and previous screen - software-mansion/react-native-screens/pull/1509
+  const nextGestureDirection = nextDescriptor?.options.gestureDirection;
+  const gestureDirectionOverride =
+    nextGestureDirection != null ? nextGestureDirection : gestureDirection;
 
   if (index === 0) {
     // first screen should always be treated as `card`, it resolves problems with no header animation
@@ -161,13 +204,16 @@ const SceneView = ({
 
   // Modals are fullscreen in landscape only on iPhone
   const isIPhone =
-    Platform.OS === 'ios' && !(Platform.isPad && Platform.isTVOS);
+    Platform.OS === 'ios' && !(Platform.isPad || Platform.isTVOS);
   const isLandscape = frame.width > frame.height;
 
   const topInset = isModal || (isIPhone && isLandscape) ? 0 : insets.top;
 
   const isParentHeaderShown = React.useContext(HeaderShownContext);
   const parentHeaderHeight = React.useContext(HeaderHeightContext);
+  const parentHeaderBack = React.useContext(HeaderBackContext);
+
+  const { preventedRoutes } = usePreventRemoveContext();
 
   const defaultHeaderHeight = getDefaultHeaderHeight(frame, isModal, topInset);
 
@@ -175,6 +221,16 @@ const SceneView = ({
     React.useState(defaultHeaderHeight);
 
   const headerHeight = header ? customHeaderHeight : defaultHeaderHeight;
+  const headerBack = previousDescriptor
+    ? {
+        title: getHeaderTitle(
+          previousDescriptor.options,
+          previousDescriptor.route.name
+        ),
+      }
+    : parentHeaderBack;
+
+  const isRemovePrevented = preventedRoutes[route.key]?.preventRemove;
 
   return (
     <Screen
@@ -190,6 +246,9 @@ const SceneView = ({
             false
           : gestureEnabled
       }
+      homeIndicatorHidden={autoHideHomeIndicator}
+      navigationBarColor={navigationBarColor}
+      navigationBarHidden={navigationBarHidden}
       replaceAnimation={animationTypeForReplace}
       stackPresentation={presentation === 'card' ? 'push' : presentation}
       stackAnimation={animation}
@@ -197,11 +256,21 @@ const SceneView = ({
       statusBarAnimation={statusBarAnimation}
       statusBarHidden={statusBarHidden}
       statusBarStyle={statusBarStyle}
+      statusBarColor={statusBarColor}
+      statusBarTranslucent={statusBarTranslucent}
+      swipeDirection={gestureDirectionOverride}
+      transitionDuration={animationDuration}
       onWillDisappear={onWillDisappear}
       onAppear={onAppear}
       onDisappear={onDisappear}
       onDismissed={onDismissed}
       isNativeStack
+      // Props for enabling preventing removal in native-stack
+      nativeBackButtonDismissalEnabled={false} // on Android
+      // @ts-expect-error prop not publicly exported from rn-screens
+      preventNativeDismiss={isRemovePrevented} // on iOS
+      onHeaderBackButtonClicked={onHeaderBackButtonClicked}
+      onNativeDismissCancelled={onNativeDismissCancelled}
     >
       <NavigationContext.Provider value={navigation}>
         <NavigationRouteContext.Provider value={route}>
@@ -222,14 +291,7 @@ const SceneView = ({
                   }}
                 >
                   {header({
-                    back: previousDescriptor
-                      ? {
-                          title: getHeaderTitle(
-                            previousDescriptor.options,
-                            previousDescriptor.route.name
-                          ),
-                        }
-                      : undefined,
+                    back: headerBack,
                     options,
                     route,
                     navigation,
@@ -239,9 +301,19 @@ const SceneView = ({
                 <HeaderConfig
                   {...options}
                   route={route}
+                  headerBackButtonMenuEnabled={
+                    isRemovePrevented !== undefined
+                      ? !isRemovePrevented
+                      : headerBackButtonMenuEnabled
+                  }
                   headerShown={isHeaderInPush}
                   headerHeight={headerHeight}
-                  canGoBack={index !== 0}
+                  headerBackTitle={
+                    options.headerBackTitle !== undefined
+                      ? options.headerBackTitle
+                      : headerBack?.title
+                  }
+                  canGoBack={headerBack !== undefined}
                 />
               )}
               <MaybeNestedStack
@@ -250,7 +322,9 @@ const SceneView = ({
                 presentation={presentation}
                 headerHeight={headerHeight}
               >
-                {render()}
+                <HeaderBackContext.Provider value={headerBack}>
+                  {render()}
+                </HeaderBackContext.Provider>
               </MaybeNestedStack>
             </HeaderHeightContext.Provider>
           </HeaderShownContext.Provider>
@@ -267,33 +341,20 @@ type Props = {
 };
 
 function NativeStackViewInner({ state, navigation, descriptors }: Props) {
-  const [nextDismissedKey, setNextDismissedKey] = React.useState<string | null>(
-    null
-  );
-
-  const dismissedRouteName = nextDismissedKey
-    ? state.routes.find((route) => route.key === nextDismissedKey)?.name
-    : null;
-
-  React.useEffect(() => {
-    if (dismissedRouteName) {
-      const message =
-        `The screen '${dismissedRouteName}' was removed natively but didn't get removed from JS state. ` +
-        `This can happen if the action was prevented in a 'beforeRemove' listener, which is not fully supported in native-stack.\n\n` +
-        `Consider using 'gestureEnabled: false' to prevent back gesture and use a custom back button with 'headerLeft' option to override the native behavior.`;
+  const { setNextDismissedKey } = useDismissedRouteError(state);
 
-      console.error(message);
-    }
-  }, [dismissedRouteName]);
+  useInvalidPreventRemoveError(descriptors);
 
   return (
     <ScreenStack style={styles.container}>
       {state.routes.map((route, index) => {
         const descriptor = descriptors[route.key];
         const previousKey = state.routes[index - 1]?.key;
+        const nextKey = state.routes[index + 1]?.key;
         const previousDescriptor = previousKey
           ? descriptors[previousKey]
           : undefined;
+        const nextDescriptor = nextKey ? descriptors[nextKey] : undefined;
 
         return (
           <SceneView
@@ -301,6 +362,7 @@ function NativeStackViewInner({ state, navigation, descriptors }: Props) {
             index={index}
             descriptor={descriptor}
             previousDescriptor={previousDescriptor}
+            nextDescriptor={nextDescriptor}
             onWillDisappear={() => {
               navigation.emit({
                 type: 'transitionStart',
@@ -331,6 +393,20 @@ function NativeStackViewInner({ state, navigation, descriptors }: Props) {
 
               setNextDismissedKey(route.key);
             }}
+            onHeaderBackButtonClicked={() => {
+              navigation.dispatch({
+                ...StackActions.pop(),
+                source: route.key,
+                target: state.key,
+              });
+            }}
+            onNativeDismissCancelled={(event) => {
+              navigation.dispatch({
+                ...StackActions.pop(event.nativeEvent.dismissCount),
+                source: route.key,
+                target: state.key,
+              });
+            }}
           />
         );
       })}

package/src/views/NativeStackView.tsx

@@ -2,6 +2,7 @@ import {
   getHeaderTitle,
   Header,
   HeaderBackButton,
+  HeaderBackContext,
   SafeAreaProviderCompat,
   Screen,
 } from '@react-navigation/elements';
@@ -31,20 +32,32 @@ const TRANSPARENT_PRESENTATIONS = [
 ];
 
 export default function NativeStackView({ state, descriptors }: Props) {
+  const parentHeaderBack = React.useContext(HeaderBackContext);
+
   return (
     <SafeAreaProviderCompat>
       <View style={styles.container}>
         {state.routes.map((route, i) => {
           const isFocused = state.index === i;
-          const canGoBack = i !== 0;
           const previousKey = state.routes[i - 1]?.key;
           const nextKey = state.routes[i + 1]?.key;
           const previousDescriptor = previousKey
             ? descriptors[previousKey]
             : undefined;
-          const nexDescriptor = nextKey ? descriptors[nextKey] : undefined;
+          const nextDescriptor = nextKey ? descriptors[nextKey] : undefined;
           const { options, navigation, render } = descriptors[route.key];
 
+          const headerBack = previousDescriptor
+            ? {
+                title: getHeaderTitle(
+                  previousDescriptor.options,
+                  previousDescriptor.route.name
+                ),
+              }
+            : parentHeaderBack;
+
+          const canGoBack = headerBack !== undefined;
+
           const {
             header,
             headerShown,
@@ -58,12 +71,13 @@ export default function NativeStackView({ state, descriptors }: Props) {
             headerStyle,
             headerShadowVisible,
             headerTransparent,
+            headerBackground,
             headerBackTitle,
             presentation,
             contentStyle,
           } = options;
 
-          const nextPresentation = nexDescriptor?.options.presentation;
+          const nextPresentation = nextDescriptor?.options.presentation;
 
           return (
             <Screen
@@ -76,14 +90,7 @@ export default function NativeStackView({ state, descriptors }: Props) {
               header={
                 header !== undefined ? (
                   header({
-                    back: previousDescriptor
-                      ? {
-                          title: getHeaderTitle(
-                            previousDescriptor.options,
-                            previousDescriptor.route.name
-                          ),
-                        }
-                      : undefined,
+                    back: headerBack,
                     options,
                     route,
                     navigation,
@@ -137,18 +144,10 @@ export default function NativeStackView({ state, descriptors }: Props) {
                     }
                     headerTitleAlign={headerTitleAlign}
                     headerTitleStyle={headerTitleStyle}
-                    headerStyle={[
-                      headerTransparent
-                        ? {
-                            position: 'absolute',
-                            backgroundColor: 'transparent',
-                          }
-                        : null,
-                      headerStyle,
-                      headerShadowVisible === false
-                        ? { shadowOpacity: 0, borderBottomWidth: 0 }
-                        : null,
-                    ]}
+                    headerTransparent={headerTransparent}
+                    headerShadowVisible={headerShadowVisible}
+                    headerBackground={headerBackground}
+                    headerStyle={headerStyle}
                   />
                 )
               }
@@ -168,9 +167,11 @@ export default function NativeStackView({ state, descriptors }: Props) {
                   : null,
               ]}
             >
-              <View style={[styles.contentContainer, contentStyle]}>
-                {render()}
-              </View>
+              <HeaderBackContext.Provider value={headerBack}>
+                <View style={[styles.contentContainer, contentStyle]}>
+                  {render()}
+                </View>
+              </HeaderBackContext.Provider>
             </Screen>
           );
         })}