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

package/src/types.tsx

@@ -148,21 +148,13 @@ export type NativeStackNavigationOptions = {
   /**
    * Title string used by the back button on iOS.
    * Defaults to the previous scene's title, or "Back" if there's not enough space.
-   * Use `headerBackTitleVisible: false` to hide it.
+   * Use `headerBackButtonDisplayMode: "minimal"` to hide it.
    *
    * Only supported on iOS.
    *
    * @platform ios
    */
   headerBackTitle?: string;
-  /**
-   * Whether the back button title should be visible or not.
-   *
-   * Only supported on iOS.
-   *
-   * @platform ios
-   */
-  headerBackTitleVisible?: boolean;
   /**
    * Style object for header back title. Supported properties:
    * - fontFamily
@@ -342,6 +334,17 @@ export type NativeStackNavigationOptions = {
    * @platform ios
    */
   headerBackButtonMenuEnabled?: boolean;
+  /**
+   * How the back button displays icon and title.
+   *
+   * 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.
+   * - "minimal" – Always displays only the icon without a title.
+   *
+   * @platform ios
+   */
+  headerBackButtonDisplayMode?: ScreenStackHeaderConfigProps['backButtonDisplayMode'];
   /**
    * Whether the home indicator should prefer to stay hidden on this screen. Defaults to `false`.
    *

package/src/views/HeaderConfig.tsx

@@ -24,10 +24,10 @@ type Props = NativeStackNavigationOptions & {
 
 export function HeaderConfig({
   headerBackImageSource,
+  headerBackButtonDisplayMode,
   headerBackButtonMenuEnabled,
   headerBackTitle,
   headerBackTitleStyle,
-  headerBackTitleVisible = true,
   headerBackVisible,
   headerShadowVisible,
   headerLargeStyle,
@@ -176,12 +176,24 @@ export function HeaderConfig({
       Platform.OS === 'ios' &&
       headerTransparent !== false);
 
+  const isBackButtonDisplayModeAvailableForCurrentPlatform =
+    Platform.OS === 'ios' && parseInt(Platform.Version, 10) >= 14;
+
   return (
     <ScreenStackHeaderConfig
       backButtonInCustomView={backButtonInCustomView}
       backgroundColor={headerBackgroundColor}
       backTitle={headerBackTitle}
-      backTitleVisible={headerBackTitleVisible}
+      backTitleVisible={
+        isBackButtonDisplayModeAvailableForCurrentPlatform
+          ? undefined
+          : headerBackButtonDisplayMode !== 'minimal'
+      }
+      backButtonDisplayMode={
+        isBackButtonDisplayModeAvailableForCurrentPlatform
+          ? headerBackButtonDisplayMode
+          : undefined
+      }
       backTitleFontFamily={backTitleFontFamily}
       backTitleFontSize={backTitleFontSize}
       blurEffect={headerBlurEffect}

package/src/views/NativeStackView.native.tsx

@@ -343,6 +343,7 @@ const SceneView = ({
       homeIndicatorHidden={autoHideHomeIndicator}
       hideKeyboardOnSwipe={keyboardHandlingEnabled}
       navigationBarColor={navigationBarColor}
+      navigationBarTranslucent={navigationBarTranslucent}
       navigationBarHidden={navigationBarHidden}
       replaceAnimation={animationTypeForReplace}
       stackPresentation={presentation === 'card' ? 'push' : presentation}
@@ -425,7 +426,6 @@ const SceneView = ({
       // So we keep any props that need it at the end
       // Otherwise invalid props may not be caught by TypeScript
       // @ts-expect-error Props available in newer versions of `react-native-screens`
-      navigationBarTranslucent={navigationBarTranslucent}
       fullScreenSwipeShadowEnabled={fullScreenGestureShadowEnabled} // 3.33.0 onwards
     >
       <NavigationContext.Provider value={navigation}>