Android - Transparent Modal messes up StatusBar style.

cpojer commented 5 years ago

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

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

default_statusbar

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

modal_transparent_statusbar

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.

modal_non_transparent_statusbar

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:

ios_default_statusbar ios_modal_transparent_statusbar

Reproducible Demo

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

adamivancza commented 5 years ago

awesome - thx for moving it here

GollyJer commented 5 years ago

Following.

Zver64 commented 5 years ago

+1

RichardLindhout commented 5 years ago

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

RichardLindhout commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

RichardLindhout commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

mi-mazouz commented 5 years ago

any update on this issue?

viktor992 commented 4 years ago

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>

rnc-archive / react-native-statusbar