fix(iOS, Stack): delay setting navigation bar visibility to mitigate bar button bug on iOS 26

apps/src/tests/Test3422.tsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import {
+  DarkTheme,
+  DefaultTheme,
+  NavigationContainer,
+  ParamListBase,
+} from '@react-navigation/native';
+import {
+  NativeStackNavigationProp,
+  createNativeStackNavigator,
+} from '@react-navigation/native-stack';
+import { Button, Image, ScrollView, Text, useColorScheme } from 'react-native';
+import { HeaderBackButton } from '@react-navigation/elements';
+
+type RouteParamList = {
+  Screen1: undefined;
+  Screen2: undefined;
+  Screen3: undefined;
+};
+
+type NavigationProp<ParamList extends ParamListBase> = {
+  navigation: NativeStackNavigationProp<ParamList>;
+};
+
+type StackNavigationProp = NavigationProp<RouteParamList>;
+
+const Stack = createNativeStackNavigator<RouteParamList>();
+
+function Screen1({ navigation }: StackNavigationProp) {
+  return (
+    <ScrollView contentInsetAdjustmentBehavior="automatic">
+      <Button
+        title="Go to screen 2"
+        onPress={() => navigation.push('Screen2')}
+      />
+      <Text style={{ padding: 20 }}>
+        Go to the second screen and observe left bar button item. Arrow image
+        should appear immediately during the push animation, without any
+        transition from native back button/liquid glass effect. For more details
+        and video, refer to PR with the same number as this test screen.
+      </Text>
+    </ScrollView>
+  );
+}
+
+function Screen2({ navigation }: StackNavigationProp) {
+  return (
+    <ScrollView contentInsetAdjustmentBehavior="automatic">
+      <Button
+        title="Go to screen 3"
+        onPress={() => navigation.push('Screen3')}
+      />
+      <Button title="Go back" onPress={() => navigation.pop()} />
+    </ScrollView>
+  );
+}
+
+function Screen3({ navigation }: StackNavigationProp) {
+  return (
+    <ScrollView contentInsetAdjustmentBehavior="automatic">
+      <Button title="Go back" onPress={() => navigation.pop()} />
+    </ScrollView>
+  );
+}
+
+const backImage = _ => (
+  <Image
+    source={require('../../assets/backButton.png')} // can be regular view instead of image
+    style={{ width: 40, height: 40 }}
+  />
+);
+
+export default function App() {
+  const colorScheme = useColorScheme();
+  return (
+    <NavigationContainer
+      theme={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
+      <Stack.Navigator>
+        <Stack.Screen
+          name="Screen1"
+          component={Screen1}
+          options={{ headerShown: false }}
+        />
+        <Stack.Screen
+          name="Screen2"
+          component={Screen2}
+          options={({ navigation }) => ({
+            unstable_headerLeftItems: () => [
+              {
+                type: 'custom',
+                element: (
+                  <HeaderBackButton
+                    onPress={() => {
+                      navigation.goBack();
+                    }}
+                    backImage={backImage}
+                  />
+                ),
+                hidesSharedBackground: true,
+              },
+            ],
+          })}
+        />
+        <Stack.Screen name="Screen3" component={Screen3} />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}

apps/src/tests/index.ts

@@ -163,6 +163,7 @@ export { default as Test3342 } from './Test3342';
 export { default as Test3346 } from './Test3346';
 export { default as Test3369 } from './Test3369';
 export { default as Test3379 } from './Test3379';
+export { default as Test3422 } from './Test3422';
 export { default as Test3425 } from './Test3425';
 export { default as TestScreenAnimation } from './TestScreenAnimation';
 export { default as TestScreenAnimationV5 } from './TestScreenAnimationV5';

ios/RNSScreenStackHeaderConfig.mm

@@ -575,12 +575,13 @@ + (void)updateViewController:(UIViewController *)vc
     vc.edgesForExtendedLayout = UIRectEdgeAll;
   }
 
-  [navctr setNavigationBarHidden:shouldHide animated:animated];
-
   [config applySemanticContentAttributeIfNeededToNavCtrl:navctr];
 
   if (shouldHide) {
     navitem.title = config.title;
+
+    // Setting navigation bar visibility is split to mitigate iOS 26 bug with bar button items.
+    [navctr setNavigationBarHidden:YES animated:animated];
     return;
   }
 
@@ -724,6 +725,11 @@ + (void)updateViewController:(UIViewController *)vc
   navitem.rightBarButtonItems = [config barButtonItemsFromConfigs:config.headerRightBarButtonItems
                                                  withCurrentItems:navitem.rightBarButtonItems];
 
+  // Setting navigation bar visibility is split to mitigate iOS 26 bug with bar button items
+  // (setting nav bar visibility should be done after `navitem.*BarButtonItems`).
+  RCTAssert(shouldHide == NO, @"[RNScreens] RNSScreenStackHeaderConfig: expected shouldHide to be NO.");
+  [navctr setNavigationBarHidden:NO animated:animated];
+
   if (animated && vc.transitionCoordinator != nil &&
       vc.transitionCoordinator.presentationStyle == UIModalPresentationNone && !wasHidden) {
     // when there is an ongoing transition we may need to update navbar setting in animation block