Title: React Native Screens enables edge-to-edge mode on Android 15 despite navigationBarTranslucent: false

2 weeks ago 13
ARTICLE AD BOX

I'm building a React Native app with Expo SDK 54 targeting Android 15 (API 36). The navigation bar stays white/light regardless of my theme settings because react-native-screens is enabling edge-to-edge mode, making the navigation bar transparent.

Environment:

Expo SDK: 54.0.0 React Native: 0.81.5 react-native-screens: 4.16.0 Android Target SDK: 36 (Android 15) react-navigation/native: 6.1.9 react-navigation/native-stack: 6.9.17 expo-navigation-bar: 5.0.10 The Problem:

Logs showing edge-to-edge is enabled: WARN statusBarTranslucent and navigationBarColor values are ignored when using react-native-edge-to-edge WARN setBackgroundColorAsync is not supported with edge-to-edge enabled. WARN setBorderColorAsync is not supported with edge-to-edge enabled.

The navigation bar remains white even though I want it dark (#1A1A1A) to match my app's theme.

What I've Tried:

Set navigationBarTranslucent: false in all navigators: // App.tsx import { Platform, useColorScheme } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; const Stack = createNativeStackNavigator(); export default function App() { const colorScheme = useColorScheme(); return ( <NavigationContainer> <Stack.Navigator screenOptions={{ headerShown: false, navigationBarColor: colorScheme === 'dark' ? '#1A1A1A' : '#FFFFFF', navigationBarHidden: false, ...(Platform.OS === 'android' && { statusBarTranslucent: false, navigationBarTranslucent: false, // This doesn't work }), }} > {/* screens */} </Stack.Navigator> </NavigationContainer> ); } Configured expo-navigation-bar plugin in app.config.js: // app.config.js export default { expo: { plugins: [ [ "expo-navigation-bar", { "position": "relative", // Should disable edge-to-edge "visibility": "visible", "behavior": "inset-swipe" } ] ], android: { compileSdkVersion: 36, targetSdkVersion: 36, } } };

This generates the correct strings.xml: <string name="expo_navigation_bar_position" translatable="false">relative</string>

Added native code to force disable edge-to-edge in MainActivity.kt: // android/app/src/main/java/com/yourapp/MainActivity.kt package com.yourapp import android.os.Bundle import androidx.core.view.WindowCompat import com.facebook.react.ReactActivity class MainActivity : ReactActivity() { override fun onCreate(savedInstanceState: Bundle?) { setTheme(R.style.AppTheme) super.onCreate(null) // Force disable edge-to-edge WindowCompat.setDecorFitsSystemWindows(window, true) } override fun onResume() { super.onResume() // Re-apply on resume WindowCompat.setDecorFitsSystemWindows(window, true) } } Tried using expo-navigation-bar directly in App.tsx: import * as NavigationBar from 'expo-navigation-bar'; useEffect(() => { const configureNavigationBar = async () => { await NavigationBar.setBackgroundColorAsync('#1A1A1A'); // Shows warning await NavigationBar.setButtonStyleAsync('light'); }; configureNavigationBar(); }, []);

Root Cause:

The react-native-is-edge-to-edge package (dependency of react-native-screens, expo-navigation-bar, and expo-status-bar) detects edge-to-edge as enabled:

// From react-native-is-edge-to-edge/dist/index.android.js const isEdgeToEdge = () => { return TurboModuleRegistry.get("RNEdgeToEdge") != null || TurboModuleRegistry.get("DeviceInfo")?.getConstants?.().isEdgeToEdge === true; };

Investigation shows:

react-native-screens calls WindowCompat.setDecorFitsSystemWindows(window, !translucent) based on navigationBarTranslucent prop Despite setting navigationBarTranslucent: false, edge-to-edge is still detected as enabled The native setDecorFitsSystemWindows(window, true) calls in MainActivity get overridden by react-native-screens

The Question:

How can I disable edge-to-edge mode on Android 15 with react-native-screens 4.16+ to allow setting a solid navigation bar color?

Is there:

A configuration option in react-native-screens to disable automatic edge-to-edge? A way to prevent libraries from enabling edge-to-edge on Android 15? A different approach to control navigation bar color on Android 15 with these dependencies?

Additional Context:

Other apps on the same Android 15 emulator (like Google Phone) successfully have colored navigation bars, so it's not an OS restriction.

Read Entire Article