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 status bar style forcibly changes to light content when a transparent modal is open #16597

Closed
mRokita opened this Issue Oct 30, 2017 · 6 comments

Comments

Projects
None yet
3 participants
@mRokita

mRokita commented Oct 30, 2017

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Steps to Reproduce

  1. Create a blank app.
  2. Add some transparent modal and a StatusBar with barStyle="dark-content"
<StatusBar
    backgroundColor="#EEEEEE"
    barStyle="dark-content" />
  1. Add some modal with transparent=true
<Modal visible={this.state.modal_visible}  animationType={'slide'} transparent={true} onShow={() => {console.log('show');}} onRequestClose={() => {alert("Modal has been closed.")}}></Modal>
  1. Add some button to open the modal or simply set visible to true.

Expected Behavior

The barStyle should be still "dark-content", like this:
image

Actual Behavior

It becomes "light-content"
image

Reproducible Demo

Reproduction should be pretty easy, I couldn't get the barStyle prop working at snack.expo.io though.
I will try to provide a demo later.
I believe that the example provided above is clear enough though.

@mRokita

This comment has been minimized.

Show comment
Hide comment
@mRokita

mRokita Oct 30, 2017

Also, everything works as expected when I use light-content all the time.

mRokita commented Oct 30, 2017

Also, everything works as expected when I use light-content all the time.

@stale

This comment has been minimized.

Show comment
Hide comment
@stale

stale bot Dec 29, 2017

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

stale bot commented Dec 29, 2017

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

@stale stale bot added the Stale label Dec 29, 2017

@stale stale bot closed this Jan 5, 2018

@llamaluvr

This comment has been minimized.

Show comment
Hide comment
@llamaluvr

llamaluvr Jan 18, 2018

This is still an issue as of React 51 (what I could demonstrate on Expo Snack).

Here is a snack that reproduces the issue: https://snack.expo.io/BJQKFvRVG. You'll notice that when you open the modal, the status bar goes white. What color is actually changes to seems to depend on the background color of the original view, but it does seem to always change color. If you take the transparent flag off of the Modal, it's no longer an issue (of course, it's also no longer transparent).

screenshot_20180118-133909
(edit: not the best example - but there should be a status bar at the very top, and there's not because of the color change issue producing a white icon on white backdrop status bar).

This issue affects a lot of downstream libraries, and basically any attempt to overlay content from a child (think dropdown menus, dialogs, picker controls) doesn't look right in Android as a result.

llamaluvr commented Jan 18, 2018

This is still an issue as of React 51 (what I could demonstrate on Expo Snack).

Here is a snack that reproduces the issue: https://snack.expo.io/BJQKFvRVG. You'll notice that when you open the modal, the status bar goes white. What color is actually changes to seems to depend on the background color of the original view, but it does seem to always change color. If you take the transparent flag off of the Modal, it's no longer an issue (of course, it's also no longer transparent).

screenshot_20180118-133909
(edit: not the best example - but there should be a status bar at the very top, and there's not because of the color change issue producing a white icon on white backdrop status bar).

This issue affects a lot of downstream libraries, and basically any attempt to overlay content from a child (think dropdown menus, dialogs, picker controls) doesn't look right in Android as a result.

@llamaluvr

This comment has been minimized.

Show comment
Hide comment
@llamaluvr

llamaluvr Jan 18, 2018

Some additional information - some of reported that this does not happen on their devices. As best I can tell, it's related to the Android version. A stock Android 6.0 emulator experiences the issue while a stock Android 7.0 emulator does not.

llamaluvr commented Jan 18, 2018

Some additional information - some of reported that this does not happen on their devices. As best I can tell, it's related to the Android version. A stock Android 6.0 emulator experiences the issue while a stock Android 7.0 emulator does not.

@Soontao

This comment has been minimized.

Show comment
Hide comment
@Soontao

Soontao Mar 7, 2018

Happened on my android 7.0 real device

Soontao commented Mar 7, 2018

Happened on my android 7.0 real device

@mRokita

This comment has been minimized.

Show comment
Hide comment
@mRokita

mRokita Mar 8, 2018

I'm running Android 7.0 on my Xperia Z5 Compact and it still happens

mRokita commented Mar 8, 2018

I'm running Android 7.0 on my Xperia Z5 Compact and it still happens

@facebook facebook locked and limited conversation to collaborators May 15, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.