Android - Transparent Modal messes up StatusBar style.

[cpojer]

---

This issue was originally created by @adamivancza as facebook/react-native#20623.

---

- [x] Review the documentation: https://facebook.github.io/react-native

• Search for existing issues: https://github.com/facebook/react-native/issues
• 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

[adamivancza]

awesome - thx for moving it here

[GollyJer]

Following.

[Zver64]

+1

[RichardLindhout]

Looking forward to a solution 👍 , creates an ugly effect in most of my Android applications.

[RichardLindhout]

I'm not sure if this 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

[adiospace]

What worked for me was to set the exact backgroundColor of the overlay/modal...to StatusBar, inside the Modal...

something like this:

<Modal>
<Fragment>
<StatusBar backgroundColor="rgba(0,0,0,0.4)" />
</Fragment>
</Modal>

[iagormoraes]

This error still exist on RN 59, using latest version of react native modal.

[RichardLindhout]

What worked for me was to set the exact backgroundColor of the overlay/modal...to StatusBar, inside the Modal...

something like this:

<Modal>
<Fragment>
<StatusBar backgroundColor="rgba(0,0,0,0.4)" />
</Fragment>
</Modal>

But that creates a strange effect for a few miliseconds in the top when you have a fading backdrop

[RichardLindhout]

By the way, it's not the problem of this library (almost sure). The content of a react native modal won't go below the statusbar.

[pinguo-zhouwei]

This issue is basically in the Modal component，I fix this issue by : https://github.com/23mf/react-native-translucent-modal

[mi-mazouz]

any update on this issue?

[viktor992]

In my case, the solution was to use the coverScreen and deviceHeight props in the following way:

<Modal
  isVisible={isVisible}
  backdropOpacity={0.9}
  backdropColor="white"
  animationIn="fadeIn"
  animationOut="fadeOut"
  coverScreen={false}
  deviceHeight={Dimensions.get('screen').height}
>
    {/* CONTENT */}
</Modal>