software-mansion / software-mansion/react-native-screens
[iOS] Search bar overlaps with the Header title on iOS 26.4
Open
@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.
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
- Create a bottom navigator using
createBottomTabNavigatorwith 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>
);
}
- 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>
);
}
- Navigate to Screen 2 (this is important -- no issue if you are still in Screen 1 when you navigate back)
- Switch to Settings tab
- Click the button to navigate back to Screen 1 (with
popset 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
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.