fix: fix back button menu for headerBackTitleVisible prop

FabricTestExample/App.js

@@ -80,6 +80,7 @@ import Test1391 from './src/Test1391';
 import Test1419 from './src/Test1419';
 import Test1473 from './src/Test1473';
 import Test1476 from './src/Test1476';
+import Test1646 from './src/Test1646';
 
 enableFreeze(true);
 

FabricTestExample/ios/Podfile.lock

@@ -73,7 +73,7 @@ PODS:
     - FlipperKit/FlipperKitNetworkPlugin
   - fmt (6.2.1)
   - glog (0.3.5)
-  - hermes-engine (0.70.0)
+  - hermes-engine (0.70.5)
   - libevent (2.1.12)
   - OpenSSL-Universal (1.1.1100)
   - RCT-Folly (2021.07.22.00):
@@ -728,7 +728,7 @@ PODS:
     - React-Codegen
     - React-RCTFabric
     - ReactCommon/turbomodule/core
-  - RNReanimated (3.0.0-rc.2):
+  - RNReanimated (3.0.0-rc.8):
     - DoubleConversion
     - FBLazyVector
     - FBReactNativeSpec
@@ -971,7 +971,7 @@ SPEC CHECKSUMS:
   FlipperKit: cbdee19bdd4e7f05472a66ce290f1b729ba3cb86
   fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
   glog: 04b94705f318337d7ead9e6d17c019bd9b1f6b1b
-  hermes-engine: 8e84f1284180801c1a1b241f443ba64f931ff561
+  hermes-engine: 7fe5fc6ef707b7fdcb161b63898ec500e285653d
   libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
   OpenSSL-Universal: ebc357f1e6bc71fa463ccb2fe676756aff50e88c
   RCT-Folly: 0080d0a6ebf2577475bda044aa59e2ca1f909cda
@@ -1007,7 +1007,7 @@ SPEC CHECKSUMS:
   React-runtimeexecutor: 7401c4a40f8728fd89df4a56104541b760876117
   ReactCommon: c9246996e73bf75a2c6c3ff15f1e16707cdc2da9
   RNGestureHandler: 182b4e135cc4fec4988687e2f123e302dc6b4b71
-  RNReanimated: a91b2ed2ac39b96a6a024ab55a6b546b1ec10f84
+  RNReanimated: 5fe97ed1710f9d0c90bd97b275c4ba6b58fa9b45
   RNScreens: 208223c783496e6d0aa92ffdf307f61d58756fc1
   SocketRocket: fccef3f9c5cedea1353a9ef6ada904fde10d6608
   Yoga: eca980a5771bf114c41a754098cd85e6e0d90ed7

FabricTestExample/package.json

@@ -20,7 +20,7 @@
     "react-native": "0.70.5",
     "react-native-codegen": "^0.69.1",
     "react-native-gesture-handler": "^2.6.0",
-    "react-native-reanimated": "software-mansion/react-native-reanimated#c2a9b84a88ac26d5ed318036c32d4af346bfdfa4",
+    "react-native-reanimated": "3.0.0-rc.8",
     "react-native-safe-area-context": "^4.4.1",
     "react-native-screens": "link:../",
     "patch-package": "^6.4.7",

FabricTestExample/src/Test1646.tsx

@@ -0,0 +1,46 @@
+import {NavigationContainer, useRoute} from '@react-navigation/native';
+import {createNativeStackNavigator} from '@react-navigation/native-stack';
+import * as React from 'react';
+import {Button, View} from 'react-native';
+
+const Stack = createNativeStackNavigator();
+
+export default function App() {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator
+        screenOptions={{
+          headerBackTitleVisible: false,
+        }}>
+        <Stack.Screen
+          name="Screen"
+          component={Screen}
+          options={({route}: any) => ({title: route.params?.title ?? 'Hello'})}
+        />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}
+
+function Screen({navigation}: any) {
+  const route = useRoute<any>();
+  const count = route.params?.count ?? 0;
+
+  // React.useEffect(() => {
+  //   navigation.setOptions({headerBackTitleVisible: count % 2 === 0});
+  // }, [count, navigation]);
+
+  return (
+    <View>
+      <Button
+        onPress={() =>
+          navigation.push(route.name, {
+            title: `Hello ${count + 1}`,
+            count: count + 1,
+          })
+        }
+        title="Push a route"
+      />
+    </View>
+  );
+}

FabricTestExample/yarn.lock

@@ -1775,11 +1775,6 @@
   resolved "https://registry.yarnpkg.com/@types/hammerjs/-/hammerjs-2.0.41.tgz#f6ecf57d1b12d2befcce00e928a6a097c22980aa"
   integrity sha512-ewXv/ceBaJprikMcxCmWU1FKyMAQ2X7a9Gtmzw8fcg2kIePI1crERDM818W+XYrxqdBBOdlf2rm137bU+BltCA==
 
-"@types/invariant@^2.2.35":
-  version "2.2.35"
-  resolved "https://registry.yarnpkg.com/@types/invariant/-/invariant-2.2.35.tgz#cd3ebf581a6557452735688d8daba6cf0bd5a3be"
-  integrity sha512-DxX1V9P8zdJPYQat1gHyY0xj3efl8gnMVjiM9iCY6y27lj+PoQWkgjt8jDqmovPqULkKVpKRg8J36iQiA+EtEg==
-
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1":
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz#8467d4b3c087805d63580480890791277ce35c44"
@@ -6114,13 +6109,13 @@ react-native-gradle-plugin@^0.70.3:
   resolved "https://registry.yarnpkg.com/react-native-gradle-plugin/-/react-native-gradle-plugin-0.70.3.tgz#cbcf0619cbfbddaa9128701aa2d7b4145f9c4fc8"
   integrity sha512-oOanj84fJEXUg9FoEAQomA8ISG+DVIrTZ3qF7m69VQUJyOGYyDZmPqKcjvRku4KXlEH6hWO9i4ACLzNBh8gC0A==
 
-react-native-reanimated@software-mansion/react-native-reanimated#c2a9b84a88ac26d5ed318036c32d4af346bfdfa4:
-  version "3.0.0-rc.2"
-  resolved "https://codeload.github.com/software-mansion/react-native-reanimated/tar.gz/c2a9b84a88ac26d5ed318036c32d4af346bfdfa4"
+react-native-reanimated@3.0.0-rc.8:
+  version "3.0.0-rc.8"
+  resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-3.0.0-rc.8.tgz#99ef62960f8670185f958d3a8e2692d10349e9b3"
+  integrity sha512-OE9HUSfKqYfKeTlDExd2ltZXXeL4cvPcTzKGeDLxlmm2kCgbwV8bX1gNanDZ1FlURGD2lhGvDyHAA2pQvJ0wVg==
   dependencies:
     "@babel/plugin-transform-object-assign" "^7.16.7"
     "@babel/preset-typescript" "^7.16.7"
-    "@types/invariant" "^2.2.35"
     invariant "^2.2.4"
     lodash.isequal "^4.5.0"
     setimmediate "^1.0.5"

TestsExample/App.js

@@ -82,6 +82,7 @@ import Test1473 from './src/Test1473';
 import Test1476 from './src/Test1476';
 import Test1509 from './src/Test1509';
 import Test1539 from './src/Test1539';
+import Test1646 from './src/Test1646';
 
 enableFreeze(true);
 

TestsExample/src/Test1646.tsx

@@ -0,0 +1,46 @@
+import {NavigationContainer, useRoute} from '@react-navigation/native';
+import {createNativeStackNavigator} from '@react-navigation/native-stack';
+import * as React from 'react';
+import {Button, View} from 'react-native';
+
+const Stack = createNativeStackNavigator();
+
+export default function App() {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator
+        screenOptions={{
+          headerBackTitleVisible: false,
+        }}>
+        <Stack.Screen
+          name="Screen"
+          component={Screen}
+          options={({route}: any) => ({title: route.params?.title ?? 'Hello'})}
+        />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}
+
+function Screen({navigation}: any) {
+  const route = useRoute<any>();
+  const count = route.params?.count ?? 0;
+
+  // React.useEffect(() => {
+  //   navigation.setOptions({headerBackTitleVisible: count % 2 === 0});
+  // }, [count, navigation]);
+
+  return (
+    <View>
+      <Button
+        onPress={() =>
+          navigation.push(route.name, {
+            title: `Hello ${count + 1}`,
+            count: count + 1,
+          })
+        }
+        title="Push a route"
+      />
+    </View>
+  );
+}

ios/RNSScreenStackHeaderConfig.mm

@@ -460,7 +460,23 @@ + (void)updateViewController:(UIViewController *)vc
   }
 
 #if !TARGET_OS_TV
-  if (config.backTitle != nil || config.backTitleFontFamily || config.backTitleFontSize ||
+  // Fix for github.com/react-navigation/react-navigation/issues/11015
+  // It allows to hide back button title and use back button menu as normal.
+  // Back button display mode and back button menu are available since iOS 14.
+  if (@available(iOS 14.0, *)) {
+    // Make sure to set display mode to default.
+    // This line resets back button display mode - especially needed on the Fabric architecture.
+    navitem.backButtonDisplayMode = UINavigationItemBackButtonDisplayModeDefault;
+
+    NSString *trimmedBackTitle =
+        [config.backTitle stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceCharacterSet]];
+
+    // When an whitespace only back title is passed set back button mode to minimal.
+    if (config.backTitle != nil && [trimmedBackTitle length] == 0) {
+      navitem.backButtonDisplayMode = UINavigationItemBackButtonDisplayModeMinimal;
+    }
+  } else if (
+      config.backTitle != nil || config.backTitleFontFamily || config.backTitleFontSize ||
       config.disableBackButtonMenu) {
     RNSUIBarButtonItem *backBarButtonItem = [[RNSUIBarButtonItem alloc] initWithTitle:config.backTitle ?: prevItem.title
                                                                                 style:UIBarButtonItemStylePlain