fix: fix headerBackTitleVisible in native-stack

[kacperkapusciak]

Motivation

Changes made in software-mansion/react-native-screens#1646 in react-native-screens v3.19.0 introduced a bug making customizing headerBackTitle impossible.

This got fixed in software-mansion/react-native-screens#1726 and released in react-native-screens v3.21.0 with a change of headerBackTitleVisible logic.

It requires a small adjustment in the HeaderConfig.tsx of the @react-navigation/native-stack as the empty string passed to backTitle results in a default back button instead of hiding it.

Detailed explaination can be found in software-mansion/react-native-screens#1726

Fixes #11303, #11337 and #11375

Code example

Code example

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import React from 'react';
import { Button, View } from 'react-native';

const Stack = createNativeStackNavigator();

const Screen1 = ({ navigation }) => (
  <View style={{ flex: 1 }}>
    <Button onPress={() => navigation.navigate('Screen2')} title="Next" />
  </View>
);

const Screen2 = ({ navigation }) => (
  <View style={{ flex: 1 }}>
    <Button onPress={() => navigation.navigate('Screen3')} title="Next" />
  </View>
);

const Screen3 = ({ navigation }) => (
  <View style={{ flex: 1 }}>
    <Button onPress={() => navigation.navigate('Screen4')} title="Next" />
  </View>
);

const Screen4 = () => <View style={{ flex: 1 }} />;

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen component={Screen1} name="Screen1" />
        <Stack.Screen
          component={Screen2}
          name="Screen2"
          options={{
            headerBackTitleVisible: false,
            headerBackTitle: 'Custom title in back button menu',
          }}
        />
        <Stack.Screen
          component={Screen3}
          name="Screen3"
          options={{
            headerBackTitle: 'Small title',
            headerBackTitleStyle: { fontSize: 8 },
          }}
        />
        <Stack.Screen
          component={Screen4}
          name="Screen4"
          options={{
            headerBackTitle: 'Custom title',
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

Screen recordings

react-native-screens v3.21.1 with fix in @react-navigation/native-stack:

On the second screen header back title is hidden as it should and back button menu working ✅

Screen.Recording.2023-06-21.at.08.02.25.mov

react-native-screens v3.21.1 without the fix in @react-navigation/native-stack:

On the second screen you can see the default header back title is shown instead of being hidden ❌

Screen.Recording.2023-06-21.at.08.14.43.mov

react-native-screens v3.20.0:

Here the back button is all over the place ❌

Screen.Recording.2023-06-21.at.08.05.20.mov

react-native-screens v3.18.2:

Backward compatibility is kept in place (but back button menu doesn't work as expected in v3.18) ✅

Screen.Recording.2023-06-21.at.08.09.28.mov

[github-actions]

The Expo app for the example from this branch is ready!

https://expo.dev/@react-navigation/react-navigation-example?serviceType=eas&distribution=expo-go&scheme=exp+react-navigation-example&channel=pr-11423&sdkVersion=48.0.0

[codecov-commenter]

Codecov Report

Patch coverage: 66.66% and project coverage change: -0.01 ⚠️

Comparison is base (42f32d4) 74.04% compared to head (18648d5) 74.04%.

❗ Your organization is not using the GitHub App Integration. As a result you may experience degraded service beginning May 15th. Please install the Github App Integration for your organization. Read more.

Additional details and impacted files

@@            Coverage Diff             @@
##              6.x   #11423      +/-   ##
==========================================
- Coverage   74.04%   74.04%   -0.01%     
==========================================
  Files         177      177              
  Lines        5626     5628       +2     
  Branches     2212     2214       +2     
==========================================
+ Hits         4166     4167       +1     
- Misses       1411     1412       +1     
  Partials       49       49              

Impacted Files	Coverage Δ
packages/native-stack/src/views/HeaderConfig.tsx	61.79% <66.66%> (-0.28%)	⬇️

☔ View full report in Codecov by Sentry.
📢 Do you have feedback about the report comment? Let us know in this issue.