[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 #7474 (comment)

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

react-native/ReactAndroid/src/main/java/com/facebook/react/modules/statusbar/StatusBarModule.java

Lines 193 to 204 in c4f9556

	if (Build.VERSION.SDK_INT > Build.VERSION_CODES.R) {
	WindowInsetsController insetsController = activity.getWindow().getInsetsController();
	if ("dark-content".equals(style)) {
	// dark-content means dark icons on a light status bar
	insetsController.setSystemBarsAppearance(
	WindowInsetsController.APPEARANCE_LIGHT_STATUS_BARS,
	WindowInsetsController.APPEARANCE_LIGHT_STATUS_BARS);
	} else {
	insetsController.setSystemBarsAppearance(
	0, WindowInsetsController.APPEARANCE_LIGHT_STATUS_BARS);
	}
	} else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {

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"):

react-native/ReactAndroid/src/main/java/com/facebook/react/views/modal/ReactModalHostView.java

Lines 326 to 336 in c4f9556

	if (currentActivity != null && !currentActivity.isFinishing()) {
	mDialog.show();
	if (context instanceof Activity) {
	mDialog
	.getWindow()
	.getDecorView()
	.setSystemUiVisibility(
	((Activity) context).getWindow().getDecorView().getSystemUiVisibility());
	}
	mDialog.getWindow().clearFlags(WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE);
	}

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

[way-jm]

Still have the issue in 0.70.6

[Abbondanzo]

Still have the issue in 0.70.6

The fix made it out in the first release candidate of 0.71.0, so 0.70.6 will still have that issue

[saadi-ninjasCode]

@Abbondanzo Facing this issue in 0.71.1 & 0.71.2
Devices

• Google Pixel 4A (Android 13)
• Xiaomi note 10 lite (Android 12)

[jaydonlau]

@Abbondanzo I'm seeing a related issue where the icons in the status bar are always black, and not respecting light-content. This is on RN 0.72.4, Android 13 Google Pixel 5.

I think this is related to your fix in 34899, specifically this line:

react-native/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/modal/ReactModalHostView.java

Line 335 in 0295771

mDialog.getWindow().getInsetsController().setSystemBarsAppearance(appearance, appearance);

If the status bar goes from black -> white, we need to call
setSystemBarsAppearance(0, APPEARANCE_LIGHT_STATUS_BARS) (where APPEARANCE_LIGHT_STATUS_BARS := 8), but I think the code I linked above would call setSystemBarsAppearance(0, 0) instead. See related Android docs

[Abbondanzo]

@Abbondanzo I'm seeing a related issue where the icons in the status bar are always black, and not respecting light-content. This is on RN 0.72.4, Android 13 Google Pixel 5.

I think this is related to your fix in 34899, specifically this line:

react-native/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/modal/ReactModalHostView.java

Line 335 in 0295771

mDialog.getWindow().getInsetsController().setSystemBarsAppearance(appearance, appearance);

If the status bar goes from black -> white, we need to call setSystemBarsAppearance(0, APPEARANCE_LIGHT_STATUS_BARS) (where APPEARANCE_LIGHT_STATUS_BARS := 8), but I think the code I linked above would call setSystemBarsAppearance(0, 0) instead. See related Android docs

A reversal of bugs! In this case, the bitmask is wrong. Great catch! I'll cook up a PR tomorrow morning but in essence we should be grabbing the unmatched bits and writing them over for the dialog's window. It would look something like this:

int activityAppearance = ((Activity) context).getWindow().getInsetsController().getSystemBarsAppearance();
int dialogAppearance = mDialog.getWindow().getInsetsController().getSystemBarsAppearance();
// Only write over each of the bits that do not match
int bitmask = activityAppearance ^ dialogAppearance;
mDialog.getWindow().getInsetsController().setSystemBarsAppearance(activityAppearance, bitmask); 

In the current implementation, if the activity has cleared the flag but the dialog creates windows that default to having the flag set, the activity's appearance values for each of those flags does not actually get set. I'll give that a try in the morning and file a new PR.

I am curious why a bitmask of 0 is changing anything, however. This behavior is not very well documented, but intuition tells me that a mask of 0 is just a no-op. Even if a mask of 0 means every flag and you have light content on the backing activity (the flag is cleared), then applying 0 to every flag should keep the foreground icons white. Likewise, if the status bar flag is set then the mask and appearance values should also set. This means black->black and white->white. Are you perhaps applying any dialog styles in a theme somewhere and this is interfering? Or is this just the case where you change your status bar from dark-content to light-content after the dialog has been created once and future loads of the dialog still show dark icons?

[jaydonlau]

@Abbondanzo thanks for the prompt reply, I'll keep an eye out for the next release with the fix!

I am curious why a bitmask of 0 is changing anything, however. This behavior is not very well documented, but intuition tells me that a mask of 0 is just a no-op. Even if a mask of 0 means every flag and you have light content on the backing activity (the flag is cleared), then applying 0 to every flag should keep the foreground icons white. Likewise, if the status bar flag is set then the mask and appearance values should also set. This means black->black and white->white. Are you perhaps applying any dialog styles in a theme somewhere and this is interfering? Or is this just the case where you change your status bar from dark-content to light-content after the dialog has been created once and future loads of the dialog still show dark icons?

Yeah good point, and it's why I'm not entirely convinced this will fix my specific issue but I'm hoping it'll narrow down the cause for the behaviour I'm seeing. I couldn't find anywhere else in the RN code that was setting the system bar's appearance (the StatusBarModule seems to be doing the right thing).

In my application I'm just setting light-content, but on transition the status bar changes from white icons to black. I was hoping the bitmask of 0 was causing some sort of odd undefined behaviour, but I'll investigate further once your fix is out.

[Abbondanzo]

In my application I'm just setting light-content, but on transition the status bar changes from white icons to black. I was hoping the bitmask of 0 was causing some sort of odd undefined behaviour, but I'll investigate further once your fix is out.

I've been trying to replicate this bug but (fortunately) haven't had any luck in doing so. I've got a small snack set up here to toggle the status bar before opening a modal: https://snack.expo.dev/@abbondanzo/status-bar-tester. Could you share a code snippet or snack that's causing the issue for you? I'd like to guarantee that the fix will actually solve your issue and detail the exact cause in the pull request.

[melnikovkolya]

Hi,

this issue also surfaces on the iOS 17.

"expo": "^49.0.0",
"react-native": "0.72.6",

I tested it both in a simulator and on a device.

The font style of the StatusBar switches to the dark mode after the 'Save Password' modal is discarded.

[RichardLindhout]

We're also having problems with this issue in our date-picker library web-ridge/react-native-paper-dates#363

[RichardLindhout]

@Abbondanzo strange it does not happen in your snack

[lukaszkurantdev]

I know that this is old thread, but It also happens on RN 0.73.6. After analysis, it looks like this is a problem with mask as @Abbondanzo mentioned. The problem only affects Android version >= 12. To avoid modifying the native code (AND not building the RN locally) until real fix, just add in styles.xml in AppTheme:

 <item name="android:windowLightStatusBar">true</item>

or when we want to have icons in white color in the model

 <item name="android:windowLightStatusBar">false</item>

However, it is then possible to have color problems on SplashScreen. The rest of the colors after the modals can be quietly set through the StatusBar component.

[JJSLIoT]

I am facing the same issue on Android after upgrading to RN 0.71.19. This issue was not there in 0.68.7.