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

by

Summary

The issue is with React Native Screens enabling edge-to-edge mode on Android 15, despite setting navigationBarTranslucent: false. This causes the navigation bar to remain white, even when trying to set a custom color.

Root Cause

The react-native-is-edge-to-edge package detects edge-to-edge as enabled, and react-native-screens calls WindowCompat.setDecorFitsSystemWindows(window,!translucent) based on the navigationBarTranslucent prop. However, setting navigationBarTranslucent: false does not disable edge-to-edge mode.

Why This Happens in Real Systems

This issue occurs because react-native-screens overrides the native setDecorFitsSystemWindows(window, true) calls in MainActivity with its own logic, enabling edge-to-edge mode.

Real-World Impact

The navigation bar remains white, even when trying to set a custom color, which can affect the app’s overall theme and user experience.

Example or Code

To reproduce the issue, create a new React Native app with Expo SDK 54, targeting Android 15, and add the following code:

// 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 (
    
      
        {/* screens */}
      
    
  );
}

How Senior Engineers Fix It

To fix this issue, senior engineers can try the following approaches:

  1. Check the react-native-screens documentation for any configuration options to disable automatic edge-to-edge mode.
  2. Inspect the react-native-is-edge-to-edge package to understand how it detects edge-to-edge mode and see if there’s a way to override its behavior.
  3. Use a different approach to control the navigation bar color on Android 15, such as using a custom NavigationBar component or modifying the native Android code.

Why Juniors Miss It

Junior engineers may miss this issue because they might not be aware of the complex interactions between react-native-screens, react-native-is-edge-to-edge, and the native Android code. They might also not thoroughly investigate the root cause of the issue or try alternative approaches to fix it.