StatusBar background becomes unexpectedly dark/opaque after interactions (e.g. navigation, press buttons, open modals etc))
What happened?
#Issue
In a React Native project using react-native-navigation, the StatusBar background color becomes unexpectedly dark or semi-transparent after certain user interactions.
Even when explicitly setting:
Navigation.setDefaultOptions({ statusBar: { backgroundColor: 'white', // or '#fff' or even null style: 'dark', }, });
the StatusBar initially appears correctly, but after certain events — such as:
Navigating to another screen
Pressing a button
Triggering re-renders
…the StatusBar background changes to a semi-transparent black (visually: rgba(0,0,0,0.4) or similar), even though the color was explicitly set.
What was the expected behaviour?
Keep the colors set in default option?!
Was it tested on latest react-native-navigation?
- [x] I have tested this issue on the latest react-native-navigation release and it still reproduces.
Help us reproduce this issue!
Basic/Advanced setup declare in react-native-navigation docs
In what environment did this happen?
React Native Navigation version: 7.45.0 React Native version: 0.76.9 Has Fabric (React Native's new rendering system) enabled: no Node version: >=18 Device model: Samsung galaxy a54 Android version: 14