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

[garkuwa]

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

[dakshbhardwaj]

I have tried to reproduce it on my Samsung device but it's not reproducible. seems to be device specific bug.

[sudharsanvishnu]

for work-around refer this https://github.com/facebook/react-native/issues/7474#issuecomment-288814366

[garkuwa]

@dakshbhardwaj We can reproduce this issue on Samsung Galaxy Note 10 plus. Which phone are you testing on?

[dakshbhardwaj]

@dakshbhardwaj We can reproduce this issue on Samsung Galaxy Note 10 plus. Which phone are you testing on?

I am using Samsung galaxy tab a7

[garkuwa]

for work-around refer this #7474 (comment)

@sudharsanvishnu this workaround doesn't work. After disabling the status bar in styles.xml, the one added by < StatusBar .../> produces the same issue, which means I can't control whether it's light or dark.

[sudharsanvishnu]

@dakshbhardwaj We can reproduce this issue on Samsung Galaxy Note 10 plus. Which phone are you testing on?

can reprodue on all models (google pixel) emulator

[sudharsanvishnu]

for work-around refer this #7474 (comment)

@sudharsanvishnu this workaround doesn't work. After disabling the status bar in styles.xml, the one added by < StatusBar .../> produces the same issue, which means I can't control whether it's light or dark.

have you tried after syncing gradle

1. cd android > ./gradlew clean
2. cd .. > npm run android ?

[garkuwa]

for work-around refer this #7474 (comment)

@sudharsanvishnu this workaround doesn't work. After disabling the status bar in styles.xml, the one added by < StatusBar .../> produces the same issue, which means I can't control whether it's light or dark.

have you tried after syncing gradle

1. cd android > ./gradlew clean
2. cd .. > npm run android ?

@sudharsanvishnu it hasn't made any difference. If you've got a minute, check out the following test example https://github.com/garkuwa/RN_statusbar_test/tree/main/AwesomeTSProject

[jgo80]

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

[dseipp]

Seeing the problem on Android v12 (Samsung S20, Platform Version 31). barStyle seems to be ignored within modals along with backgroundColor. backgroundColor can be set but only in an effect, barStyle never changes, however.

[jjenzz]

also experiencing this on Pixel 5 emulator (API 33) and a physical Pixel 6 Pro device but in reverse. I have set barStyle to light-content by default and it switches to dark-content when modals open.

"expo": "46.0.2",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-native": "0.70.0-rc.2",

[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
    }
  }
}

[Abbondanzo]

Should be fixed by #34899

[garkuwa]

cheers @Abbondanzo