-
Notifications
You must be signed in to change notification settings - Fork 24.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Android - Transparent Modal messes up StatusBar style. #20623
Comments
I tried Third party Modals like this: https://github.com/react-native-community/react-native-modal, shows the same issue. |
<style name="AppTheme" parent="Theme.ReactNative.AppCompat.Light.NoActionBar.FullScreen"> </style>
it is work in react-native0.52, but in react-native0.56 it not work。 |
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 |
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. |
Issue still exists |
Following. Definitely still an issue. |
+1 |
This issue has been moved to rnc-archive/react-native-statusbar#6. |
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 |
Maybe this pull request also fixes our issue but it was never merged. |
Not sure why this issue has been closed, it's clearly an issue with react-native itself |
I described possible workaround here: react-native-modal/react-native-modal#50 (comment) |
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
The text was updated successfully, but these errors were encountered: