Tab bar position breaks on Android when used with react-navigation Native Stack Navigator

[olliFCA]

Before submitting a new issue

• I tested using the latest version of the library, as the bug might be already fixed.
• I tested using a supported version of react native.
• I checked for possible duplicate issues, with possible answers.

Bug summary

This bug is related to three packages, but affects mostly the react-native-bottom-tabs package.
When this library is used with react-navigation, more specifically the Native Stack Navigator and new versions of react-native-screens (dependency of React Navigation), the tab bar position shifts under the system navigation bar, if in use, or under the bottom safe area, if the device uses gesture navigation.

Images to illustrate the issue

Tab bar before navigating to form sheet screen:

Broken tab bar position after navigating to form sheet screen (with navigation bar):

Broken tab bar position after navigating to form sheet screen (with gesture navigation):

For the issue to occur, the app must use the Native Stack Navigator and include at least one screen with the 'formSheet' presentation style (sheet sliding from the bottom of the screen, which uses BottomSheetBehavior on Android). Whenever this screen is presented, the bottom tab bar will shift its position under the safe area. If the tab bar configuration is updated later, the position can shift back to the correct place, but if not, the tab bar will remain broken.

This issue can be reproduced with any recent version of react-native-bottom-tabs and react-navigation, but for the issue to occur, the version of react-native-screens must be above 4.11.0. So far none of the later versions of the react-native-screens have fixed the compatibility with react-native-bottom-tabs (version 4.14.1 being the latest as of writing).
Currently react-native-screens can be downgraded an older version to circumvent the issue. However, if React Navigation eventually has a hard dependency on later versions of react-native-screens, this library will no longer be compatible with React Navigation.

Library version

0.10.0

Environment info

System:
  OS: macOS 15.6
  CPU: (8) arm64 Apple M1 Pro
  Memory: 724.23 MB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.19.4
    path: /opt/homebrew/opt/node@20/bin/node
  Yarn:
    version: 3.6.4
    path: /opt/homebrew/opt/node@18/bin/yarn
  npm:
    version: 10.8.2
    path: /opt/homebrew/opt/node@20/bin/npm
  Watchman:
    version: 2025.07.14.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.5
      - iOS 18.5
      - macOS 15.5
      - tvOS 18.5
      - visionOS 2.5
      - watchOS 11.5
  Android SDK: Not Found
IDEs:
  Android Studio: 2025.1 AI-251.26094.121.2512.13840223
  Xcode:
    version: 16.4/16F6
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.16
    path: /usr/bin/javac
  Ruby:
    version: 3.4.5
    path: /opt/homebrew/opt/ruby/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 18.0.0
    wanted: 18.0.0
  react:
    installed: 19.0.0
    wanted: 19.0.0
  react-native:
    installed: 0.79.2
    wanted: 0.79.2
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

Steps to reproduce

1. Install latest versions of react-native-bottom-tabs, react-navigation, and any version of react-native-screens above 4.11.0.
2. Use Native Stack Navigation as the navigation in the app.
3. Create a screen that uses the 'formSheet' presentation style.
4. Navigate to that screen.
5. Pop the sheet screen and the bottom tab bar has changed position.

These steps reliably reproduce the bug.

Reproducible sample code

function AppNavigation() {
	return (
		<NavigationContainer
			ref={navigationRef}
		>
			<RootStack />
		</NavigationContainer>
	)
}

const Tab = createNativeBottomTabNavigator()
const Stack = createNativeStackNavigator()

function RootStack() {
	return (
		<Stack.Navigator
			initialRouteName="Tabs"
		>
			<Stack.Screen
				name="Tabs"
				component={Tabs}
			/>
			<Stack.Screen
				key="Sheet"
				name="Sheet"
				component={FormSheetScreen}
				options={{
					headerShown: false,
					presentation: 'formSheet',
					sheetAllowedDetents: [0.80],
				}}
			/>
		</Stack.Navigator>
	)
}

function Tabs() {
	return (
		<Tab.Navigator
			labeled={true}
		>
			<Tab.Screen
				name="First"
				component={FirstScreen}
				options={{
					tabBarLabel: 'First',
				}}
			/>
			<Tab.Screen
				name="Second"
				component={SecondScreen}
				options={{
					tabBarLabel: 'Second',
				}}
			/>
		</Tab.Navigator>
	)
}


Then navigate to the sheet screen with navigation.navigate('Sheet') and close the sheet to reproduce the bug.

[bogdandobritoiu]

I have exactly the same issue.

When formsheet is closed, the bottom tabs are moved underneath the bottom nav.

"react-native-screens": "4.15.2",
"react-native-bottom-tabs": "0.10.1",
"@bottom-tabs/react-navigation": "0.10.1",
"@react-navigation/bottom-tabs": "7.4.6",
"@react-navigation/elements": "2.6.3",
"@react-navigation/native": "7.1.16",
"@react-navigation/native-stack": "7.3.25",

[olliFCA]

I can confirm that this is still an issue with the latest available versions of React Native, react-native-bottom-tabs and react-native-screens.

[dlindstrm]

It seems like the issue is caused by the following code block:
https://github.com/software-mansion/react-native-screens/blob/e6b63ae9f3387d2f327299503767d2fb2204aa64/android/src/main/java/com/swmansion/rnscreens/Screen.kt#L550-L564

Removing it solves this issue, but probably causes other issues.