[Android only] StatusBar automatically becomes "light-content" every time a RN Modal is opened

Description

I’ve created a very basic test project using native cli npx react-native init AwesomeTSProject --template react-native-template-typescriptD, and added a simple component with RN Modal like here https://reactnative.dev/docs/modal. Every time I click “Show Modal”, the status bar becomes light, and I can’t change it to dark even by setting barStyle="dark-content" for StatusBar. When the modal is closed, the status bar becomes dark again. The issue is reproducible only on Android, which in my case is Pixel 4a.

Version

0.69.3

Output of npx react-native info

info Fetching system and libraries information… System: OS: macOS 12.4 CPU: (10) x64 Apple M1 Pro Memory: 38.39 MB / 32.00 GB Shell: 3.2.57 - /bin/sh Binaries: Node: 16.13.1 - /usr/local/bin/node Yarn: 1.22.17 - /usr/local/bin/yarn npm: 8.1.2 - /usr/local/bin/npm Watchman: 2022.03.21.00 - /opt/homebrew/bin/watchman Managers: CocoaPods: 1.11.3 - /opt/homebrew/bin/pod SDKs: iOS SDK: Platforms: DriverKit 21.4, iOS 15.5, macOS 12.3, tvOS 15.4, watchOS 8.5 Android SDK: API Levels: 28, 29, 30, 31, 32 Build Tools: 30.0.2, 30.0.3, 31.0.0, 32.0.0, 32.1.0 System Images: android-30 | Google APIs ARM 64 v8a, android-32 | Google APIs ARM 64 v8a, android-32 | Google Play ARM 64 v8a Android NDK: Not Found IDEs: Android Studio: 2021.1 AI-211.7628.21.2111.8139111 Xcode: 13.4.1/13F100 - /usr/bin/xcodebuild Languages: Java: 11.0.12 - /opt/homebrew/opt/openjdk@11/bin/javac npmPackages: @react-native-community/cli: Not Found react: 18.0.0 => 18.0.0 react-native: 0.69.3 => 0.69.3 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

Steps to reproduce

1. Start a new RN app from a template npx react-native init AwesomeTSProject --template react-native-template-typescriptD
2. Add a modal like here https://reactnative.dev/docs/modal#statusbartranslucent-android
3. Click the button to open the modal
4. The StatusBar automatically becomes light

Snack, code example, screenshot, or link to a repository

[Abbondanzo]

Shot in the dark, but we were running into this same issue. I think it’s caused by the fact that the StatusBarModule is only updating the WindowInsetsController.systemBarsAppearance for devices API >30, and never touching the old View.systemUiVisibility:

https://github.com/facebook/react-native/blob/c4f9556f7e98454e2061ca7e121099ebbbddd4c9/ReactAndroid/src/main/java/com/facebook/react/modules/statusbar/StatusBarModule.java#L193-L204

However, the modal host tries to read an untouched View.systemUiVisibility from the root activity. Since the SYSTEM_UI_FLAG_LIGHT_STATUS_BAR mask is never set on that integer, it reads as 0 (a.k.a. “dark mode”):

https://github.com/facebook/react-native/blob/c4f9556f7e98454e2061ca7e121099ebbbddd4c9/ReactAndroid/src/main/java/com/facebook/react/views/modal/ReactModalHostView.java#L326-L336

We added a manual override to the root activity to set that systemUIVisibility flag in all cases, and the modal appears to be respecting it now (this is in Kotlin but can easily be translated back to Java):

override fun onResume() {
  super.onResume()
   if (VERSION.SDK_INT >= VERSION_CODES.M) {
      val newSystemUiVisibility = if (isInDarkMode) {
        // Remove light status bar flag in dark mode
        window.decorView.systemUiVisibility and View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR.inv()
      } else {
        // Add light status bar flag in light mode
        window.decorView.systemUiVisibility or View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR
      }
      window.decorView.systemUiVisibility = newSystemUiVisibility
    }
  }
}

[jgo80]

I’m experiencing the same issue with Google Pixel Emulator. <StatusBar barStyle={yourPreferedStyleHere} /> should be respected.