fix(iOS): wrong title in back button menu for screens w/ hidden header (

software-mansion#1866) ## Description Ah, here we go again... When header is hidden (`headerShown: false` in v6, `hidden: true` in v5) the method that updates header configuration returns early just after setting some layout related and LTR/RTL options, thus `title` property of current `UINavigationItem` is left unset leading to system default name `Back` being displayed in "back context menu". Fixes software-mansion#1864 ## Changes When returning early (because header is hidden) we now set the `UINavigationItem` property to proper value. ## Test code and steps to reproduce `Test1864` in `FabricTestExample` & `TestsExample`. I've also tested it in context of * software-mansion#1646 and mix of both. Seems to work fine. ## Checklist - [x] Included code example that can be used to test this change - [x] Ensured that CI passes
WiseOwlTech · Oct 9, 2024 · e04a7ee · e04a7ee
1 parent 6a27071
commit e04a7ee
Show file tree

Hide file tree

Showing 5 changed files with 155 additions and 0 deletions.
diff --git a/FabricTestExample/App.js b/FabricTestExample/App.js
@@ -86,6 +86,7 @@ import Test1649 from './src/Test1649';
 import Test1683 from './src/Test1683';
 import Test1726 from './src/Test1726';
 import Test1844 from './src/Test1844';
+import Test1864 from './src/Test1864';
 
 enableFreeze(true);
 

diff --git a/FabricTestExample/src/Test1864.tsx b/FabricTestExample/src/Test1864.tsx
@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { Button, View, Text } from 'react-native';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { NativeStackNavigationProp } from 'react-native-screens/native-stack';
+
+const Stack = createNativeStackNavigator();
+
+type NavProp = {
+  navigation: NativeStackNavigationProp<ParamListBase>;
+};
+
+export default function App() {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator>
+        <Stack.Screen
+          name="screenA"
+          component={ScreenA}
+          options={{ headerTitle: 'screen a title', headerShown: false }}
+        />
+        <Stack.Screen
+          name="screenB"
+          component={ScreenB}
+          options={{ headerTitle: 'screen b title' }}
+        />
+        <Stack.Screen
+          name="screenC"
+          component={ScreenC}
+          options={{ headerTitle: 'screen c title', headerShown: false }}
+        />
+        <Stack.Screen
+          name="screenD"
+          component={ScreenD}
+          options={{ headerTitle: 'screen d title' }}
+        />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}
+
+const ScreenA = ({ navigation }: NavProp) => (
+  <View style={{ flex: 1, paddingTop: 50 }}>
+    <Text>Screen A</Text>
+    <Button
+      onPress={() => navigation.navigate('screenB')}
+      title="Go to screen B"
+    />
+  </View>
+);
+
+const ScreenB = ({ navigation }: NavProp) => (
+  <View style={{ flex: 1 }}>
+    <Text>Screen B</Text>
+    <Button
+      onPress={() => navigation.navigate('screenC')}
+      title="Go to screen C"
+    />
+  </View>
+);
+
+const ScreenC = ({ navigation }: NavProp) => (
+  <View style={{ flex: 1, paddingTop: 50 }}>
+    <Text>Screen C</Text>
+    <Button
+      onPress={() => navigation.navigate('screenD')}
+      title="Go to screen D"
+    />
+  </View>
+);
+
+const ScreenD = (_props: NavProp) => (
+  <View style={{ flex: 1 }}>
+    <Text>Screen D</Text>
+  </View>
+);
diff --git a/TestsExample/App.js b/TestsExample/App.js
@@ -89,6 +89,7 @@ import Test1683 from './src/Test1683';
 import Test1726 from './src/Test1726';
 import Test1791 from './src/Test1791';
 import Test1844 from './src/Test1844';
+import Test1864 from './src/Test1864';
 
 enableFreeze(true);
 

diff --git a/TestsExample/src/Test1864.tsx b/TestsExample/src/Test1864.tsx
@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { Button, View, Text } from 'react-native';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { NativeStackNavigationProp } from 'react-native-screens/native-stack';
+
+const Stack = createNativeStackNavigator();
+
+type NavProp = {
+  navigation: NativeStackNavigationProp<ParamListBase>;
+};
+
+export default function App() {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator>
+        <Stack.Screen
+          name="screenA"
+          component={ScreenA}
+          options={{ headerTitle: 'screen a title', headerShown: false }}
+        />
+        <Stack.Screen
+          name="screenB"
+          component={ScreenB}
+          options={{ headerTitle: 'screen b title' }}
+        />
+        <Stack.Screen
+          name="screenC"
+          component={ScreenC}
+          options={{ headerTitle: 'screen c title', headerShown: false }}
+        />
+        <Stack.Screen
+          name="screenD"
+          component={ScreenD}
+          options={{ headerTitle: 'screen d title' }}
+        />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}
+
+const ScreenA = ({ navigation }: NavProp) => (
+  <View style={{ flex: 1, paddingTop: 50 }}>
+    <Text>Screen A</Text>
+    <Button
+      onPress={() => navigation.navigate('screenB')}
+      title="Go to screen B"
+    />
+  </View>
+);
+
+const ScreenB = ({ navigation }: NavProp) => (
+  <View style={{ flex: 1 }}>
+    <Text>Screen B</Text>
+    <Button
+      onPress={() => navigation.navigate('screenC')}
+      title="Go to screen C"
+    />
+  </View>
+);
+
+const ScreenC = ({ navigation }: NavProp) => (
+  <View style={{ flex: 1, paddingTop: 50 }}>
+    <Text>Screen C</Text>
+    <Button
+      onPress={() => navigation.navigate('screenD')}
+      title="Go to screen D"
+    />
+  </View>
+);
+
+const ScreenD = (_props: NavProp) => (
+  <View style={{ flex: 1 }}>
+    <Text>Screen D</Text>
+  </View>
+);
diff --git a/ios/RNSScreenStackHeaderConfig.mm b/ios/RNSScreenStackHeaderConfig.mm
@@ -484,6 +484,7 @@ + (void)updateViewController:(UIViewController *)vc
   }
 
   if (shouldHide) {
+    navitem.title = config.title;
     return;
   }