@react-navigation/native-stack 7.0.0-rc.22 → 7.0.0-rc.24

package/src/types.tsx

@@ -114,7 +114,7 @@ export type NativeStackHeaderRightProps = {
   /**
    * Whether it's possible to navigate back in stack.
    */
-  canGoBack: boolean;
+  canGoBack?: boolean;
 };
 
 export type NativeStackHeaderLeftProps = NativeStackHeaderRightProps & {
@@ -150,9 +150,9 @@ export type NativeStackNavigationOptions = {
    * Defaults to the previous scene's title, or "Back" if there's not enough space.
    * Use `headerBackButtonDisplayMode: "minimal"` to hide it.
    *
-   * Only supported on iOS.
+   * Only supported on iOS and Web.
    *
-   * @platform ios
+   * @platform ios, web
    */
   headerBackTitle?: string;
   /**
@@ -160,9 +160,9 @@ export type NativeStackNavigationOptions = {
    * - fontFamily
    * - fontSize
    *
-   * Only supported on iOS.
+   * Only supported on iOS and Web.
    *
-   * @platform ios
+   * @platform ios, web
    */
   headerBackTitleStyle?: StyleProp<{
     fontFamily?: string;
@@ -321,8 +321,6 @@ export type NativeStackNavigationOptions = {
    * Options to render a native search bar.
    * You also need to specify `contentInsetAdjustmentBehavior="automatic"` in your `ScrollView`, `FlatList` etc.
    * If you don't have a `ScrollView`, specify `headerTransparent: false`.
-   *
-   * Only supported on iOS and Android.
    */
   headerSearchBarOptions?: Omit<SearchBarProps, 'ref'>;
   /**
@@ -339,10 +337,22 @@ export type NativeStackNavigationOptions = {
    *
    * Supported values:
    * - "default" - Displays one of the following depending on the available space: previous screen's title, generic title (e.g. 'Back') or no title (only icon).
-   * - "generic" – Displays one of the following depending on the available space: generic title (e.g. 'Back') or no title (only icon). iOS >= 14 only, falls back to "default" on older iOS versions.
+   * - "generic" – Displays one of the following depending on the available space: generic title (e.g. 'Back') or no title (only icon).
    * - "minimal" – Always displays only the icon without a title.
    *
-   * @platform ios
+   * The "generic" mode is not supported when:
+   * - The iOS version is lower than 14
+   * - Custom back title is set
+   * - Custom back title style is set
+   * - Back button menu is disabled
+   *
+   * In such cases, the "default" mode will be used instead.
+   *
+   * Defaults to "default" on iOS, and "minimal" on other platforms.
+   *
+   * Only supported on iOS and Web.
+   *
+   * @platform ios, web
    */
   headerBackButtonDisplayMode?: ScreenStackHeaderConfigProps['backButtonDisplayMode'];
   /**

package/src/views/HeaderConfig.tsx

@@ -176,8 +176,17 @@ export function HeaderConfig({
       Platform.OS === 'ios' &&
       headerTransparent !== false);
 
-  const isBackButtonDisplayModeAvailableForCurrentPlatform =
-    Platform.OS === 'ios' && parseInt(Platform.Version, 10) >= 14;
+  const isBackButtonDisplayModeAvailable =
+    // On iOS 14+
+    Platform.OS === 'ios' &&
+    parseInt(Platform.Version, 10) >= 14 &&
+    // Doesn't have custom back title
+    headerBackTitle == null &&
+    // Doesn't have custom styling
+    backTitleFontFamily == null &&
+    backTitleFontSize == null &&
+    // Back button menu is not disabled
+    headerBackButtonMenuEnabled !== false;
 
   return (
     <ScreenStackHeaderConfig
@@ -185,12 +194,12 @@ export function HeaderConfig({
       backgroundColor={headerBackgroundColor}
       backTitle={headerBackTitle}
       backTitleVisible={
-        isBackButtonDisplayModeAvailableForCurrentPlatform
+        isBackButtonDisplayModeAvailable
           ? undefined
           : headerBackButtonDisplayMode !== 'minimal'
       }
       backButtonDisplayMode={
-        isBackButtonDisplayModeAvailableForCurrentPlatform
+        isBackButtonDisplayModeAvailable
           ? headerBackButtonDisplayMode
           : undefined
       }

package/src/views/NativeStackView.native.tsx

@@ -329,6 +329,8 @@ const SceneView = ({
       key={route.key}
       enabled
       isNativeStack
+      accessibilityElementsHidden={!focused}
+      importantForAccessibility={focused ? 'auto' : 'no-hide-descendants'}
       style={StyleSheet.absoluteFill}
       hasLargeHeader={options.headerLargeTitle ?? false}
       customAnimationOnSwipe={animationMatchesGesture}
@@ -430,99 +432,94 @@ const SceneView = ({
     >
       <NavigationContext.Provider value={navigation}>
         <NavigationRouteContext.Provider value={route}>
-          <HeaderShownContext.Provider
-            value={isParentHeaderShown || headerShown !== false}
-          >
-            <AnimatedHeaderHeightContext.Provider value={animatedHeaderHeight}>
-              <HeaderHeightContext.Provider
-                value={
-                  headerShown !== false ? headerHeight : parentHeaderHeight ?? 0
-                }
-              >
-                {headerBackground != null ? (
-                  /**
-                   * To show a custom header background, we render it at the top of the screen below the header
-                   * The header also needs to be positioned absolutely (with `translucent` style)
-                   */
-                  <View
-                    style={[
-                      styles.background,
-                      headerTransparent ? styles.translucent : null,
-                      { height: headerHeight },
-                    ]}
-                  >
-                    {headerBackground()}
-                  </View>
-                ) : null}
+          <AnimatedHeaderHeightContext.Provider value={animatedHeaderHeight}>
+            <HeaderHeightContext.Provider
+              value={
+                headerShown !== false ? headerHeight : parentHeaderHeight ?? 0
+              }
+            >
+              {headerBackground != null ? (
+                /**
+                 * To show a custom header background, we render it at the top of the screen below the header
+                 * The header also needs to be positioned absolutely (with `translucent` style)
+                 */
+                <View
+                  style={[
+                    styles.background,
+                    headerTransparent ? styles.translucent : null,
+                    { height: headerHeight },
+                  ]}
+                >
+                  {headerBackground()}
+                </View>
+              ) : null}
+              {header !== undefined && headerShown !== false ? (
                 <View
-                  accessibilityElementsHidden={!focused}
-                  importantForAccessibility={
-                    focused ? 'auto' : 'no-hide-descendants'
-                  }
-                  style={styles.scene}
+                  onLayout={(e) => {
+                    const headerHeight = e.nativeEvent.layout.height;
+
+                    setHeaderHeight(headerHeight);
+                    rawAnimatedHeaderHeight.setValue(headerHeight);
+                  }}
+                  style={[
+                    styles.header,
+                    headerTransparent ? styles.absolute : null,
+                  ]}
                 >
-                  <MaybeNestedStack
-                    options={options}
-                    route={route}
-                    presentation={presentation}
-                    headerHeight={headerHeight}
-                    headerTopInsetEnabled={headerTopInsetEnabled}
-                  >
-                    <HeaderBackContext.Provider value={headerBack}>
-                      {render()}
-                    </HeaderBackContext.Provider>
-                  </MaybeNestedStack>
-                  {header !== undefined && headerShown !== false ? (
-                    <View
-                      onLayout={(e) => {
-                        const headerHeight = e.nativeEvent.layout.height;
-
-                        setHeaderHeight(headerHeight);
-                        rawAnimatedHeaderHeight.setValue(headerHeight);
-                      }}
-                      style={headerTransparent ? styles.absolute : null}
-                    >
-                      {header({
-                        back: headerBack,
-                        options,
-                        route,
-                        navigation,
-                      })}
-                    </View>
-                  ) : null}
+                  {header({
+                    back: headerBack,
+                    options,
+                    route,
+                    navigation,
+                  })}
                 </View>
-                {/**
-                 * `HeaderConfig` needs to be the direct child of `Screen` without any intermediate `View`
-                 * We don't render it conditionally to make it possible to dynamically render a custom `header`
-                 * Otherwise dynamically rendering a custom `header` leaves the native header visible
-                 *
-                 * https://github.com/software-mansion/react-native-screens/blob/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md#screenstackheaderconfig
-                 *
-                 * HeaderConfig must not be first child of a Screen.
-                 * See https://github.com/software-mansion/react-native-screens/pull/1825
-                 * for detailed explanation
-                 */}
-                <HeaderConfig
-                  {...options}
+              ) : null}
+              <HeaderShownContext.Provider
+                value={isParentHeaderShown || headerShown !== false}
+              >
+                <MaybeNestedStack
+                  options={options}
                   route={route}
-                  headerBackButtonMenuEnabled={
-                    isRemovePrevented !== undefined
-                      ? !isRemovePrevented
-                      : headerBackButtonMenuEnabled
-                  }
-                  headerShown={header !== undefined ? false : headerShown}
+                  presentation={presentation}
                   headerHeight={headerHeight}
-                  headerBackTitle={
-                    options.headerBackTitle !== undefined
-                      ? options.headerBackTitle
-                      : undefined
-                  }
                   headerTopInsetEnabled={headerTopInsetEnabled}
-                  canGoBack={headerBack !== undefined}
-                />
-              </HeaderHeightContext.Provider>
-            </AnimatedHeaderHeightContext.Provider>
-          </HeaderShownContext.Provider>
+                >
+                  <HeaderBackContext.Provider value={headerBack}>
+                    {render()}
+                  </HeaderBackContext.Provider>
+                </MaybeNestedStack>
+              </HeaderShownContext.Provider>
+              {/**
+               * `HeaderConfig` needs to be the direct child of `Screen` without any intermediate `View`
+               * We don't render it conditionally to make it possible to dynamically render a custom `header`
+               * Otherwise dynamically rendering a custom `header` leaves the native header visible
+               *
+               * https://github.com/software-mansion/react-native-screens/blob/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md#screenstackheaderconfig
+               *
+               * HeaderConfig must not be first child of a Screen.
+               * See https://github.com/software-mansion/react-native-screens/pull/1825
+               * for detailed explanation
+               */}
+              <HeaderConfig
+                {...options}
+                route={route}
+                headerBackButtonMenuEnabled={
+                  isRemovePrevented !== undefined
+                    ? !isRemovePrevented
+                    : headerBackButtonMenuEnabled
+                }
+                headerShown={header !== undefined ? false : headerShown}
+                headerHeight={headerHeight}
+                headerBackTitle={
+                  options.headerBackTitle !== undefined
+                    ? options.headerBackTitle
+                    : undefined
+                }
+                headerTopInsetEnabled={headerTopInsetEnabled}
+                canGoBack={headerBack !== undefined}
+              />
+            </HeaderHeightContext.Provider>
+          </AnimatedHeaderHeightContext.Provider>
         </NavigationRouteContext.Provider>
       </NavigationContext.Provider>
     </Screen>
@@ -637,9 +634,8 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
-  scene: {
-    flex: 1,
-    flexDirection: 'column-reverse',
+  header: {
+    zIndex: 1,
   },
   absolute: {
     position: 'absolute',

package/src/views/NativeStackView.tsx

@@ -75,20 +75,13 @@ export function NativeStackView({ state, descriptors }: Props) {
         const {
           header,
           headerShown,
-          headerTintColor,
           headerBackImageSource,
           headerLeft,
-          headerRight,
-          headerTitle,
-          headerTitleAlign,
-          headerTitleStyle,
-          headerStyle,
-          headerShadowVisible,
           headerTransparent,
-          headerBackground,
           headerBackTitle,
           presentation,
           contentStyle,
+          ...rest
         } = options;
 
         const nextPresentation = nextDescriptor?.options.presentation;
@@ -111,20 +104,21 @@ export function NativeStackView({ state, descriptors }: Props) {
                 })
               ) : (
                 <Header
+                  {...rest}
+                  back={headerBack}
                   title={getHeaderTitle(options, route.name)}
-                  headerTintColor={headerTintColor}
                   headerLeft={
                     typeof headerLeft === 'function'
-                      ? ({ tintColor }) =>
+                      ? ({ label, ...rest }) =>
                           headerLeft({
-                            tintColor,
-                            canGoBack,
-                            label: headerBackTitle,
-                            href: headerBack?.href,
+                            ...rest,
+                            label: headerBackTitle ?? label,
                           })
                       : headerLeft === undefined && canGoBack
-                        ? ({ tintColor }) => (
+                        ? ({ tintColor, label, ...rest }) => (
                             <HeaderBackButton
+                              {...rest}
+                              label={headerBackTitle ?? label}
                               tintColor={tintColor}
                               backImage={
                                 headerBackImageSource !== undefined
@@ -141,28 +135,10 @@ export function NativeStackView({ state, descriptors }: Props) {
                                   : undefined
                               }
                               onPress={navigation.goBack}
-                              href={headerBack.href}
                             />
                           )
                         : headerLeft
                   }
-                  headerRight={
-                    typeof headerRight === 'function'
-                      ? ({ tintColor }) => headerRight({ tintColor, canGoBack })
-                      : headerRight
-                  }
-                  headerTitle={
-                    typeof headerTitle === 'function'
-                      ? ({ children, tintColor }) =>
-                          headerTitle({ children, tintColor })
-                      : headerTitle
-                  }
-                  headerTitleAlign={headerTitleAlign}
-                  headerTitleStyle={headerTitleStyle}
-                  headerTransparent={headerTransparent}
-                  headerShadowVisible={headerShadowVisible}
-                  headerBackground={headerBackground}
-                  headerStyle={headerStyle}
                 />
               )
             }