software-mansion / software-mansion/react-native-screens

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

Open
#3,935 1 comment 1 reaction 1 assignee View on GitHub

@kmichalikk is already working on this.

Since May 6, 2026.

platform:ios repro-provided
Dominant language
TypeScript
Stars
3.7k
Forks
713
Avg merge
2d 23h
Merged PRs (30d)
71

Description

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.

Image

Only encountered on iOS 26.4 both in physical device and simulator

iOS 26.1 iOS 26.3 iOS 26.4
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>
  );
}
  1. 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>
  );
}
  1. Navigate to Screen 2 (this is important -- no issue if you are still in Screen 1 when you navigate back)
  2. Switch to Settings tab
  3. 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

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.