Native Navigation Bar overlaps with React Navigation bottom tabs on Samsung Galaxy [Android]

[SathishSaminathan]

Current behavior

On devices like Samsung Galaxy S24 FE, the native navigation bar overlaps with the React Navigation bottom tabs.
This causes layout issues where the bottom tab bar is partially hidden or not fully visible.

Expected behavior

The bottom tab bar should respect safe area insets and never overlap with the system navigation bar.

Reproduction

https://gist.github.com/SathishSaminathan/351acfbde72dc36a212d19b20ee8a081

Platform

• Android
• iOS
• Web
• Windows
• MacOS

Packages

• @react-navigation/bottom-tabs: 7.4.7
• @react-navigation/drawer
• @react-navigation/material-top-tabs
• @react-navigation/stack
• @react-navigation/native-stack
• react-native-drawer-layout
• react-native-tab-view
• @react-navigation/native: 7.1.17

Environment

Steps to Reproduce

1. Create a new React Native project.
2. Install React Navigation and set up bottom tabs.
3. Run the app on a Samsung Galaxy S24 FE (or similar device with gesture navigation bar).
4. Observe that the bottom tab bar is overlapped by the native navigation bar.

Screenshots

Environment

• React Native: 0.81.4
• React: 19.1.0
• react-native-reanimated: 4.0.2
• react-native-vision-camera: 4.7.2
• react-native-maps: 1.26.1
• react-native-element-dropdown: 2.12.4
• react-native-svg: 15.12.1
• react-native-gesture-handler: 2.13.4
• react-native-screens: 4.15.2
• react-native-safe-area-context: 5.6.1
• react-native-vector-icons: 10.0.2

Navigation

• @react-navigation/native: 7.1.17
• @react-navigation/bottom-tabs: 7.4.6
• @react-navigation/stack: 7.4.7

Dev Environment

• @react-native-community/cli: 20.0.0
• @react-native/babel-preset: 0.81.4
• TypeScript: 5.8.3
• Jest: 29.6.3
• ESLint: 8.19.0
• Prettier: 2.8.8
• Axios: 1.5.1

---

Related Issues

• #12727 – Native Navigation Bar overlaps with React Navigation bottom tabs on Samsung Galaxy S24 FE

---

@satya164 @osdnk @brentvatne @kacperkapusciak @WoLewicki @okwasniewski Please support on this.

[theobouwman]

I also have this issue

[abdymm]

any news on this?
i also have same issue, and it's happening after upgrading the Samsung OS into One UI 7+

[hkbn-jokerliu]

I also have this issue, help

[abdymm]

i found a temporary solution by adding
<item name="android:windowOptOutEdgeToEdgeEnforcement">true</item>

in AppTheme styles.xml

so mine look like this

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
        <item name="android:windowBackground">@drawable/launch_screen</item>
        <item name="android:forceDarkAllowed">false</item>
        <item name="android:editTextBackground">@drawable/edit_text</item>
        <item name="android:windowOptOutEdgeToEdgeEnforcement">true</item>
    </style>
...

in other thread it said this is a temporary solution for android 35, should be fix the issue aslong as you targeting SDK 35

#634

[SathishSaminathan]

@abdymm @theobouwman @hkbn-jokerliu

Try this

import { initialWindowMetrics, SafeAreaProvider } from 'react-native-safe-area-context';
export const App = () {
const isAndroid15 = Platform.OS == 'android' && Platform.Version >= 35;
return (
 <SafeAreaProvider style={isAndroid15 ? { marginBottom: initialWindowMetrics?.insets.bottom } : {}}>
    <NavigationContainer theme={navigationTheme} onReady={onReady}>
            <ThemedStatusBar />
            <AppNavigator />
        </NavigationContainer>
    </View>
  </SafeAreaProvider>
)};

[gkasireddy202]

Facing the same issue on the Pixel 8 device(Android version:15).
react-native-safe-area-context: 5.4.0
react: 19.0.0
react-native: 0.79.2

[sregg]

You don't need a Samsung device to repro, just change the Navigation mode setting to "3 button navigation".

You can repro on an emulator too:

[gkasireddy202]

@abdymm @theobouwman @hkbn-jokerliu

Try this

import { initialWindowMetrics, SafeAreaProvider } from 'react-native-safe-area-context';
export const App = () {
const isAndroid15 = Platform.OS == 'android' && Platform.Version >= 35;
return (
 <SafeAreaProvider style={isAndroid15 ? { marginBottom: initialWindowMetrics?.insets.bottom } : {}}>
    <NavigationContainer theme={navigationTheme} onReady={onReady}>
            <ThemedStatusBar />
            <AppNavigator />
        </NavigationContainer>
    </View>
  </SafeAreaProvider>
)};

How to add the above logic to my code?
render() { if (Platform.OS == 'android') { Orientation.unlockAllOrientations(); if (!DeviceInfo.isTablet()) { Orientation.lockToPortrait(); } } return ( <PaperProvider> <NavigationContainer ref={navigationRef}> <Stack.Navigator> <Stack.Screen name="Loginpage" component={Loginpage} options={{ headerShown: false }} /> </Stack.Navigator> </NavigationContainer> </PaperProvider> ); }

[DillonLakshmanAL]

Have the same issue on some devices (Samsung S23 plus), but not on others on the same version of android.

[estebanGTS]

Same problem in Samsung s10 with Android 14

[SathishSaminathan]

Have the same issue on some devices (Samsung S23 plus), but not on others on the same version of android.

Try this

import { initialWindowMetrics, SafeAreaProvider } from 'react-native-safe-area-context';
export const App = () {
const isAndroid15 = Platform.OS == 'android' && Platform.Version >= 35;
return (
 <SafeAreaProvider style={isAndroid15 ? { marginBottom: initialWindowMetrics?.insets.bottom } : {}}>
    <NavigationContainer theme={navigationTheme} onReady={onReady}>
            <ThemedStatusBar />
            <AppNavigator />
        </NavigationContainer>
    </View>
  </SafeAreaProvider>
)};

[SathishSaminathan]

Have the same issue on some devices (Samsung S23 plus), but not on others on the same version of android.

Try this

import { initialWindowMetrics, SafeAreaProvider } from 'react-native-safe-area-context';
export const App = () {
const isAndroid15 = Platform.OS == 'android' && Platform.Version >= 35;
return (
 <SafeAreaProvider style={isAndroid15 ? { marginBottom: initialWindowMetrics?.insets.bottom } : {}}>
    <NavigationContainer theme={navigationTheme} onReady={onReady}>
            <ThemedStatusBar />
            <AppNavigator />
        </NavigationContainer>
    </View>
  </SafeAreaProvider>
)};

[xixoecu-beep]

Same issue in samsung s8 with android 9.1

[wemsaji]

You could try using this.
https://www.npmjs.com/package/react-native-navbar-listener

[dytra]

@abdymm @theobouwman @hkbn-jokerliu

Try this

import { initialWindowMetrics, SafeAreaProvider } from 'react-native-safe-area-context';
export const App = () {
const isAndroid15 = Platform.OS == 'android' && Platform.Version >= 35;
return (
 <SafeAreaProvider style={isAndroid15 ? { marginBottom: initialWindowMetrics?.insets.bottom } : {}}>
    <NavigationContainer theme={navigationTheme} onReady={onReady}>
            <ThemedStatusBar />
            <AppNavigator />
        </NavigationContainer>
    </View>
  </SafeAreaProvider>
)};

thankyou this is work for me for react native 0.62.2