[Modal-StatusBar-Android] Statusbar shows up with setHidden(true)

While the modal component is open on an android device with StatusBar.setHidden(true) the StatusBar still shows up.

Is this intended? If yes, is there any workaround?

Edit: On iOS the StatusBar remains hidden when a modal component is open.

Looks like a bug, I never tested StatusBar + Modal, I'll take a look at it when I get some time.

Any idea about this? I lose background color and translucent properties as well. It looks pretty bad.

I have the same problem, iOS works fine indeed

check my comments on #8627 if have any help

Any updates on this?

I have the same problem.

ReactNative 0.32
Android 6+

Idem, same problem.

RN: 0.34

+1. RN: 0.34

Component 01 (showBar Hide):

componentWillUnmount() {
  StatusBar.setHidden(true)
}

TO

Component 02:

componentWillMount() {
  StatusBar.setHidden(false)
}

result: ShowBar SHOW

But

Component 01 (showBar Hide):

componentWillUnmount() {
  AppActions.showBar(true)
}

TO

Component 02:

componentDidMount() {
  AppActions.showBar(false)
}

result: ShowBar HIDE

Also noticed that if you highlight some text in the modal, the 'Text Selection' menu has a very undesirable transparent look that shows the view below.

Any ideas how to fix this appearance?

Screen shot:

It's amazing that this issue was opened the May 9th and nobody still figured out why it has this behaviour!

@scerelli

@scerelli I've answered months ago to see my answer in #8627, so why this issue is still opening?

@nihgwu

@nihgwu honestly i don't know, and the fact that you explained the cause of this problem in an other issue it's even stranger.
This fix/feature is not in roadmap at the moment and it's not good at all! it brings a lot of inconsistency inside applications that use a lot of modals and requires the status bar to be hidden.

There are still cases where the statusbar is not updated properly because the activity was null at the time it was updated, I think this happens mostly when moving the app from the background to foreground. I haven't really hit this issue yet since I'm not changing the statusbar much in my apps so I don't have a repro case to try to fix it. If someone wants to spend some time looking into why it happens and possible fixes it would be great.

A quick fix I can think of would be to subscribe to AppState and force an update of the statusbar native values at that time when we are sure the activity is available.

Edit: confused some issues not sure about this one :)

I used https://github.com/listenzz/react-native-modal-translucent, and worked like a charm.

settings.gradle
include ':modal-translucent'
project(':modal-translucent').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-modal-translucent/android')

build.gradle
implementation project(":modal-translucent")

MainApplication
import me.listenzz.modal.TranslucentModalReactPackage;

@Override
protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(new MainReactPackage(), ..., new TranslucentModalReactPackage());
}

@pablobrodt

@pablobrodt Can you explain to me how did you make it work? I'm getting an error using the package. I've opened there a new issue.

@Jelomite I just linked this https://github.com/listenzz/react-native-modal-translucent manually, like i said above, then used the react-native Modal with transparent prop.

I see, thanks 😄

I changed the default Modal implementation of react-native and solved this problem. What I do is to replace the official Modal package with one a-little-modified Modal package which shows Modal in full screen with status bar above, you can refer to https://www.cnblogs.com/wkmcyz/articles/10277436.html for details.

Fix Android Modal status bar translucency bug

I need to hide the iOS status bar of my app in some screens and not for all screens. Any solution for this.

I tried this but it did not work for me.

<StatusBar hidden={true} />

Still happening in RN 0.60.5.

react-native-modal-translucent solved my problem https://github.com/listenzz/react-native-modal-translucent

+1

Used this https://github.com/23mf/react-native-translucent-modal

Navigation Menu

Repository navigation

[Modal-StatusBar-Android] Statusbar shows up with setHidden(true) #7474

70 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[Modal-StatusBar-Android] Statusbar shows up with setHidden(true) #7474

Description

Activity

janicduplessis commented on May 12, 2016

sixcircuit commented on Jul 17, 2016

timvanp commented on Jul 20, 2016

nihgwu commented on Jul 20, 2016

ggordan commented on Sep 1, 2016

bhrott commented on Sep 5, 2016

scerelli commented on Oct 3, 2016

BeckZero commented on Oct 6, 2016

jasongaare commented on Nov 7, 2016

scerelli commented on Nov 15, 2016

nihgwu commented on Nov 15, 2016

scerelli commented on Nov 15, 2016

janicduplessis commented on Nov 16, 2016

70 remaining items

pablobrodt commented on Nov 19, 2018

mtshrmn commented on Dec 1, 2018

pablobrodt commented on Dec 2, 2018

mtshrmn commented on Dec 5, 2018

wkmcyz commented on Jan 17, 2019

nihp commented on Aug 20, 2019

arfa123 commented on Aug 31, 2019

arfa123 commented on Aug 31, 2019

joaodematejr commented on Sep 17, 2019

cristianoccazinsp commented on Sep 28, 2019

snamstorm commented on Oct 1, 2019

AndreyPatseiko commented on Oct 31, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions