fix: add internal isNewBackTitleImplementation const

TestsExample/App.js

@@ -87,6 +87,7 @@ import Test1646 from './src/Test1646';
 import Test1649 from './src/Test1649';
 import Test1683 from './src/Test1683';
 import Test1726 from './src/Test1726';
+import Test1791 from './src/Test1791';
 
 enableFreeze(true);
 

TestsExample/src/Test1791.tsx

@@ -0,0 +1,63 @@
+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;

src/index.native.tsx

@@ -34,6 +34,7 @@
 } from './types';
 import {
   isSearchBarAvailableForCurrentPlatform,
+  isNewBackTitleImplementation,
   executeNativeBackPress,
 } from './utils';
 
@@ -466,7 +467,7 @@
       console.warn(
         'Importing SearchBar is only valid on iOS and Android devices.'
       );
       return View as any as ReactNode;
     }
 
     return (
@@ -592,5 +593,6 @@
   useTransitionProgress,
 
   isSearchBarAvailableForCurrentPlatform,
+  isNewBackTitleImplementation,
   executeNativeBackPress,
 };

src/index.tsx

@@ -13,6 +13,7 @@ export * from './types';
 export { default as useTransitionProgress } from './useTransitionProgress';
 export {
   isSearchBarAvailableForCurrentPlatform,
+  isNewBackTitleImplementation,
   executeNativeBackPress,
 } from './utils';
 

src/utils.ts

@@ -10,3 +10,9 @@ export function executeNativeBackPress() {
   BackHandler.exitApp();
   return true;
 }
+
+// Because of a bug introduced in https://github.com/software-mansion/react-native-screens/pull/1646
+// react-native-screens v3.21 changed how header's backTitle handles whitespace strings in https://github.com/software-mansion/react-native-screens/pull/1726
+// To allow for backwards compatibility in @react-navigation/native-stack we need a way to check if this version or newer is used.
+// See https://github.com/react-navigation/react-navigation/pull/11423 for more context.
+export const isNewBackTitleImplementation = true;