@react-navigation/stack 7.0.0-rc.20 → 7.0.0-rc.22

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/stack",
   "description": "Stack navigator component for iOS and Android with animated transitions and gestures",
-  "version": "7.0.0-rc.20",
+  "version": "7.0.0-rc.22",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -51,12 +51,12 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/elements": "^2.0.0-rc.18",
+    "@react-navigation/elements": "^2.0.0-rc.20",
     "color": "^4.2.3"
   },
   "devDependencies": {
     "@jest/globals": "^29.7.0",
-    "@react-navigation/native": "^7.0.0-rc.16",
+    "@react-navigation/native": "^7.0.0-rc.18",
     "@testing-library/react-native": "^12.4.3",
     "@types/color": "^3.0.6",
     "@types/react": "~18.2.79",
@@ -66,11 +66,11 @@
     "react-native-builder-bob": "^0.29.0",
     "react-native-gesture-handler": "~2.16.1",
     "react-native-safe-area-context": "4.10.1",
-    "react-native-screens": "3.31.1",
+    "react-native-screens": "3.32.0",
     "typescript": "^5.5.2"
   },
   "peerDependencies": {
-    "@react-navigation/native": "^7.0.0-rc.16",
+    "@react-navigation/native": "^7.0.0-rc.18",
     "react": ">= 18.2.0",
     "react-native": ">= 0.72.0",
     "react-native-gesture-handler": ">= 2.0.0",
@@ -102,5 +102,5 @@
       ]
     ]
   },
-  "gitHead": "70c4339ca48961378837d9ee6cf63a396e55892d"
+  "gitHead": "b32550a43d0e2b532cfe100d9cf17837184a636e"
 }

package/src/types.tsx

@@ -1,5 +1,6 @@
 import type {
   HeaderBackButton,
+  HeaderBackButtonDisplayMode,
   HeaderBackButtonProps,
   HeaderOptions,
   HeaderTitleProps,
@@ -180,23 +181,31 @@ export type StackHeaderOptions = Omit<
   /**
    * Title string used by the back button on iOS.
    * Defaults to the previous screen's title, or "Back" if there's not enough space.
-   * Use `headerBackTitleVisible: false` to hide it.
+   * Use `headerBackButtonDisplayMode` to customize the behavior.
    */
   headerBackTitle?: string;
   /**
-   * Whether the back button title should be visible or not.
+   * Title string used by the back button when `headerBackTitle` doesn't fit on the screen.
+   * Use `headerBackButtonDisplayMode` to customize the behavior.
    *
-   * Defaults to `true` on iOS, `false on Android.
+   * Defaults to "Back".
    */
-  headerBackTitleVisible?: boolean;
+  headerBackTruncatedTitle?: string;
   /**
-   * Style object for the back title.
+   * 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, truncated title (e.g. 'Back') or no title (only icon).
+   * - "generic" – Displays one of the following depending on the available space: truncated title (e.g. 'Back') or no title (only icon).
+   * - "minimal" – Always displays only the icon without a title.
+   *
+   * Defaults to "default" on iOS, and "minimal" on Android.
    */
-  headerBackTitleStyle?: StyleProp<TextStyle>;
+  headerBackButtonDisplayMode?: HeaderBackButtonDisplayMode;
   /**
-   * Title string used by the back button when `headerBackTitle` doesn't fit on the screen. `"Back"` by default.
+   * Style object for the back title.
    */
-  headerTruncatedBackTitle?: string;
+  headerBackTitleStyle?: StyleProp<TextStyle>;
   /**
    * Function which returns a React Element to display custom image in header's back button.
    * It receives the `tintColor` in in the options object as an argument. object.

package/src/views/Header/HeaderSegment.tsx

@@ -114,8 +114,8 @@ export function HeaderSegment(props: Props) {
     headerRight: right,
     headerBackImage,
     headerBackTitle,
-    headerBackTitleVisible = Platform.OS === 'ios',
-    headerTruncatedBackTitle,
+    headerBackButtonDisplayMode = Platform.OS === 'ios' ? 'default' : 'minimal',
+    headerBackTruncatedTitle,
     headerBackAccessibilityLabel,
     headerBackTestID,
     headerBackAllowFontScaling,
@@ -167,7 +167,7 @@ export function HeaderSegment(props: Props) {
           allowFontScaling: headerBackAllowFontScaling,
           onPress: onGoBack,
           label: headerBackTitle,
-          truncatedLabel: headerTruncatedBackTitle,
+          truncatedLabel: headerBackTruncatedTitle,
           labelStyle: [leftLabelStyle, headerBackTitleStyle],
           onLabelLayout: handleLeftLabelLayout,
           screenLayout: layout,
@@ -195,11 +195,11 @@ export function HeaderSegment(props: Props) {
       layout={layout}
       headerTitle={headerTitle}
       headerLeft={headerLeft}
-      headerLeftLabelVisible={headerBackTitleVisible}
       headerRight={headerRight}
       headerTitleContainerStyle={[titleStyle, headerTitleContainerStyle]}
       headerLeftContainerStyle={[leftButtonStyle, headerLeftContainerStyle]}
       headerRightContainerStyle={[rightButtonStyle, headerRightContainerStyle]}
+      headerBackButtonDisplayMode={headerBackButtonDisplayMode}
       headerBackgroundContainerStyle={[
         backgroundStyle,
         headerBackgroundContainerStyle,

package/src/views/Stack/CardContainer.tsx

@@ -293,7 +293,11 @@ function CardContainerInner({
                 value={isParentHeaderShown || headerShown !== false}
               >
                 <HeaderHeightContext.Provider
-                  value={headerShown ? headerHeight : parentHeaderHeight ?? 0}
+                  value={
+                    headerShown !== false
+                      ? headerHeight
+                      : parentHeaderHeight ?? 0
+                  }
                 >
                   {scene.descriptor.render()}
                 </HeaderHeightContext.Provider>