[iOS] Search bar overlaps with the Header title on iOS 26.4

[louie-pangan]

Description

When navigating to another screen (with a search bar) in another tab with pop set to TRUE, the search bar overlaps with the header title.

Only encountered on iOS 26.4 both in physical device and simulator

iOS 26.1	iOS 26.3	iOS 26.4
Screen.Recording.2026-04-24.at.2.37.21.PM.mov	Screen.Recording.2026-04-24.at.2.37.48.PM.mov	Screen.Recording.2026-04-24.at.2.38.08.PM.mov

Expected behavior

Search bar should NOT overlap with the header title

Steps to reproduce

1. Create a bottom navigator using createBottomTabNavigator with two tabs

type RootTabParamList = {
  Home: NavigatorScreenParams<HomeStackParamList>;
  Settings: NavigatorScreenParams<SettingsStackParamList>;
};

const Tab = createBottomTabNavigator<RootTabParamList>();

export default function RootTabs() {
  return (
    <Tab.Navigator screenOptions={{ headerShown: false }}>
      <Tab.Screen name="Home" component={HomeStack} />
      <Tab.Screen name="Settings" component={SettingsStack} />
    </Tab.Navigator>
  );
}

2. Create the native stack for both tabs
   1st tab has two screens with the first screen containing a search bar

type HomeStackParamList = {
  Screen1: undefined;
  Screen2: undefined;
};

const Stack = createNativeStackNavigator<HomeStackParamList>();

export default function HomeStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Screen1" component={Screen1} options={
        { 
          title: 'Screen 1', 
          headerShown: true, 
          headerLargeTitle: true,
          headerSearchBarOptions: {
            hideWhenScrolling: false,
            allowToolbarIntegration: false,
            placement: 'integratedCentered',
            cancelButtonText: 'Cancel',
            placeholder: 'Search',
          }
        }
      } />
      <Stack.Screen name="Screen2" component={Screen2} options={{ title: 'Screen 2', headerShown: true, headerLargeTitle: true }} />
    </Stack.Navigator>
  );
}

2nd tab contains only one screen

type SettingsStackParamList = {
  Screen3: undefined;
};

const Stack = createNativeStackNavigator<SettingsStackParamList>();

export default function SettingsStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Screen3" component={Screen3} options={{ title: 'Screen 3', headerShown: true, headerLargeTitle: true }} />
    </Stack.Navigator>
  );
}

3. Navigate to Screen 2 (this is important -- no issue if you are still in Screen 1 when you navigate back)
4. Switch to Settings tab
5. Click the button to navigate back to Screen 1 (with pop set to TRUE)

navigation.navigate('Home', {
  screen: 'Screen1',
  pop: true
})

Snack or a link to a repository

https://snack.expo.dev/@louie.pangan/react-navigation-search-bar-issue

Screens version

4.16.0

React Native version

0.74.5

Platforms

iOS

JavaScript runtime

None

Workflow

None

Architecture

None

Build type

None

Device

iOS simulator

Device model

No response

Acknowledgements

Yes

[kmichalikk]

Hi @louie-pangan
I can confirm that this behavior. If it's only in case of 26.4, this may be native bug/change, but I need more time to repro this correctly. I'm adding this to our TODOs.
Thanks.