React-native: Android - Transparent Modal messes up StatusBar style.

[adamivancza]

• [x] Review the documentation: https://facebook.github.io/react-native
• [x] Search for existing issues: https://github.com/facebook/react-native/issues
• [x] Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

React Native Environment Info:
System:
OS: macOS High Sierra 10.13.6
CPU: x64 Intel(R) Core(TM) i7-3740QM CPU @ 2.70GHz
Memory: 31.93 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 8.9.0 - /usr/local/bin/node
npm: 6.3.0 - /usr/local/bin/npm
Watchman: 4.5.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
Android SDK:
Build Tools: 23.0.1, 23.0.2, 23.0.3, 24.0.2, 25.0.0, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 26.0.3, 27.0.0, 27.0.3
API Levels: 19, 22, 23, 24, 25, 26, 27
IDEs:
Android Studio: 2.2 AI-145.3360264
Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
npmPackages:
react: 16.4.1 => 16.4.1
react-native: 0.56.0 => 0.56.0
npmGlobalPackages:
react-native-cli: 2.0.1
react-native-git-upgrade: 0.2.7

Description

I found this problem when I wanted to display a transparent modal over a screen which has a white status bar. Attached some screenshots about the issue:

So this is the default state - the screen's status bar is set to white background with dark-content style.

Now this happens if I display a transparent Modal. As you can see the status bar's style is either changed or the transparent modal just overlaps the StatusBar somehow and causing this weirdness.

There isn't any problem if Modal isn't transparent.

I think there shouldn't be any difference in the StatusBar regardless of Modal is transparent on not. On iOS this is completely consistent:

Reproducible Demo

https://github.com/adamivancza/rn-modal-statusbar-android-problem-repro

[Zjarr]

I tried onShow() method to see if it was possible to change status bar and content color, but got the same behavior.

Third party Modals like this: https://github.com/react-native-community/react-native-modal, shows the same issue.

[hxkuan]

it is work in react-native0.52, but in react-native0.56 it not work。

[andrewzey]

I went with this library, which implements a custom modal by default, and doesn't ruin the statusbar: https://github.com/maxs15/react-native-modalbox

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[adamivancza]

Issue still exists

[GollyJer]

Following. Definitely still an issue.

[Zver64]

+1

[cpojer]

This issue has been moved to react-native-community/react-native-statusbar#6.

[RichardLindhout]

I'm not sure if that library is the problem. Maybe this line is: https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/views/modal/ModalHostHelper.java#L54

[RichardLindhout]

Maybe this pull request also fixes our issue but it was never merged.
https://github.com/facebook/react-native/pull/13411

[jacek213]

Not sure why this issue has been closed, it's clearly an issue with react-native itself

[headfire94]

I described possible workaround here: https://github.com/react-native-community/react-native-modal/issues/50#issuecomment-526628352