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

[emresenturky]

Description

On certain Android devices, particularly the Samsung Galaxy S24 FE, the device's native navigation bar overlaps with the app's bottom tab bar implemented with React Navigation, causing UI issues and making the bottom tabs difficult to interact with.

Current behavior

The native Android navigation bar appears on top of the React Navigation tab bar, making the bottom tabs partially hidden and difficult to interact with. This creates a poor user experience and accessibility issues.

Expected behavior

The app's tab bar should be displayed above the native Android navigation bar with proper insets applied to avoid any overlapping, similar to how it works correctly on most other Android devices.

Code Example

tabs.tsx:

<Tab.Navigator
tabBar={renderTabBar}
screenListeners={screenListeners}
screenOptions={() => ({
headerShown: false,
tabBarShowLabel: true,
tabBarActiveTintColor: colors.secondary500,
tabBarInactiveTintColor: colors.primary700,
tabBarStyle: [
styles.tabBarStyle,
bottom === 0
? styles.tabBarStyleWithoutSafeArea
: styles.tabBarStyleWithSafeArea,
isTabBarHidden && styles.hiddenTabBarStyle,
],
})}>
{renderScreen}
</Tab.Navigator>

tabs.style.ts:

tabBarStyleWithSafeArea: {
paddingTop: 8,
paddingBottom: Platform.OS === 'ios' ? 24 : 52,
},
tabBarStyleWithoutSafeArea: {
paddingTop: 4,
paddingBottom: 4,
},

Screenshots

Reproduction

Create a bottom tab navigator with React Navigation

Run the app on a Samsung Galaxy S24 FE (or similar affected device)

Observe the overlap between the native navigation bar and app tab bar

Platform

• Android
• iOS
• Web
• Windows
• MacOS

Packages

• @react-navigation/bottom-tabs
• react-native-safe-area-context
• @react-navigation/drawer
• @react-navigation/material-top-tabs
• @react-navigation/stack
• @react-navigation/native-stack
• react-native-drawer-layout
• react-native-tab-view

Environment

• [] I've removed the packages that I don't use

package	version
@react-navigation/native	6.1.17
@react-navigation/bottom-tabs	6.5.20
react-native-screens	3.35.0
react-native-safe-area-context	4.10.1
react-native-gesture-handler	2.16.0
react-native-reanimated	3.9.0
react-native-pager-view	6.3.0
react-native	0.74.3

[AjayFrancisTechversant]

Go through edgeToEdge design of android

[yashwanthgajji]

I am also seeing the same issue in Samsung S23 Ultra

[dogankablan]

Added MainActivity.kt in onCreate function

    WindowCompat.setDecorFitsSystemWindows(window, false)
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {

        window.statusBarColor = Color.TRANSPARENT
        window.navigationBarColor = Color.TRANSPARENT
    }

    val content = findViewById<ViewGroup>(android.R.id.content)

    ViewCompat.setOnApplyWindowInsetsListener(content) { v, insets ->
        val bars = insets.getInsets(WindowInsetsCompat.Type.systemBars())
        v.updatePadding(
            left = bars.left,
            top = bars.top,
            right = bars.right,
            bottom = bars.bottom
        )
        insets
    }