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

[duketwo]

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.

[janicduplessis]

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

[sixcircuit]

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

[timvanp]

I have the same problem, iOS works fine indeed

[nihgwu]

check my comments on #8627 if have any help

[ggordan]

Any updates on this?

[bhrott]

I have the same problem.

• ReactNative 0.32
• Android 6+

[scerelli]

Idem, same problem.

RN: 0.34

[BeckZero]

+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

[jasongaare]

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:

[scerelli]

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

[nihgwu]

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

[scerelli]

@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.

[janicduplessis]

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

[janicduplessis]

I don't have much time to look into this at the moment, I suspect we'd want to change the dialog window flags to match the current statusbar config. We already set some flags here https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/views/modal/ReactModalHostView.java#L199

To do that we could try to read flags from the main app window and use the same for the modal.

[edencakir]

+1 RNv: 0.40

[Swordsman-Inaction]

@janicduplessis I already checked this issue. The reason it doesn't work is because WindowInsets is been set to the wrong window. Modal is implemented with Dialog, Dialog will create a window on the top of Activity's Window. So it won't work for now. But I couldn't find a good way to get the Window of Dialog, do you have any idea?

[omerdn1]

Any news about this issue? Still getting it with RN 0.4.2

[Traviskn]

I was able to work around this issue by going into my app's android/app/src/main/res/values/styles.xml file and changing the parent theme to Theme.ReactNative.AppCompat.Light.NoActionBar.FullScreen. This essentially disables the status bar by default for your entire app, including for the modal. If you have other screens that need to show the status bar then you can still use the normal StatusBar api to show it if you want.

Here's my full styles.xml file for reference:

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.ReactNative.AppCompat.Light.NoActionBar.FullScreen">
        <!-- Customize your theme here. -->
    </style>
    <style name="AppTheme.Launcher">
        <item name="android:windowBackground">@drawable/launch_screen</item>
    </style>
</resources>

[yijian166]

@Traviskn This solution also has a issue, in some time, at bottom of the Modal has a transparent bar , and height equal to StartBar height.

[AdriaRios]

Still happens at 0.43 version.

Any updates?

[gezichenshan]

Mark!

[carlesnunez]

Any updates on this?

[iamcxa]

I confirm @Traviskn 's way too. this workaround may produce some issue at a particular scene(such as you need status bar shows more frequently than hidden), but it still may be the best way to solve modal status bar problem once for all.

[banli17]

can use origin android to resolve it ?

[ghost]

It's resolved,thank you! 魅璃儿 邮箱：[email protected] 签名由 网易邮箱大师 定制 On 07/17/2018 20:32, 板栗17 wrote: can use origin android to resolve it ? —You are receiving this because you commented.Reply to this email directly, view it on GitHub, or mute the thread. {"api_version":"1.0","publisher":{"api_key":"05dde50f1d1a384dd78767c55493e4bb","name":"GitHub"},"entity":{"external_key":"github/facebook/react-native","title":"facebook/react-native","subtitle":"GitHub repository","main_image_url":"https://assets-cdn.github.com/images/email/message_cards/header.png","avatar_image_url":"https://assets-cdn.github.com/images/email/message_cards/avatar.png","action":{"name":"Open in GitHub","url":"https://github.com/facebook/react-native"}},"updates":{"snippets":[{"icon":"PERSON","message":"@banli17 in #7474: can use origin android to resolve it ?"}],"action":{"name":"View Issue","url":"#7474 (comment)"}}} [ { "@context": "http://schema.org", "@type": "EmailMessage", "potentialAction": { "@type": "ViewAction", "target": "#7474 (comment)", "url": "#7474 (comment)", "name": "View Issue" }, "description": "View this Issue on GitHub", "publisher": { "@type": "Organization", "name": "GitHub", "url": "https://github.com" } }, { "@type": "MessageCard", "@context": "http://schema.org/extensions", "hideOriginalBody": "false", "originator": "AF6C5A86-E920-430C-9C59-A73278B5EFEB", "title": "Re: [facebook/react-native] [Modal-StatusBar-Android] Statusbar shows up with setHidden(true) (#7474)", "sections": [ { "text": "", "activityTitle": "**板栗17**", "activityImage": "https://assets-cdn.github.com/images/email/message_cards/avatar.png", "activitySubtitle": "@banli17", "facts": [ ] } ], "potentialAction": [ { "name": "Add a comment", "@type": "ActionCard", "inputs": [ { "isMultiLine": true, "@type": "TextInput", "id": "IssueComment", "isRequired": false } ], "actions": [ { "name": "Comment", "@type": "HttpPOST", "target": "https://api.github.com", "body": "{\n\"commandName\": \"IssueComment\",\n\"repositoryFullName\": \"facebook/react-native\",\n\"issueId\": 7474,\n\"IssueComment\": \"{{IssueComment.value}}\"\n}" } ] }, { "targets": [ { "os": "default", "uri": "#7474 (comment)" } ], "@type": "OpenUri", "name": "View on GitHub" }, { "name": "Unsubscribe", "@type": "HttpPOST", "target": "https://api.github.com", "body": "{\n\"commandName\": \"MuteNotification\",\n\"threadId\": 141108329\n}" } ], "themeColor": "26292E" } ]

[jdnichollsc]

@t4deu I can see the issue with react-native 0.56.0 from Android, any solution to fix the issue of the bottom of the modal?
Thanks in advance

[jdnichollsc]

Ok, fixed by using
<style name="AppTheme" parent="Theme.ReactNative.AppCompat.Light.NoActionBar.FullScreen">
instead of
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

[farzd]

still an issue, using expo so cant change android specific xml files etc

[lyseiha]

When will you fixed this issue ?

[andrewzey]

The better solution is to not use the native React Modal. Use this library instead: https://github.com/maxs15/react-native-modalbox

[anshul-kai]

There is still a problem with devices that have a soft menu bar like the Samsung Galaxy S8 and no solution solves the problem with the soft menu bar region not being drawn over by the Modal.

[wayne214]

ok,fixed by using
<style name="AppTheme" parent="Theme.ReactNative.AppCompat.Light.NoActionBar.FullScreen"> <item name="android:windowTranslucentStatus">true</item> // 设置状态栏不占据空间 </style>

If the theme color is white， fixed by using
<style name="AppTheme" parent="Theme.ReactNative.AppCompat.Light.NoActionBar.FullScreen"> <item name="android:windowLightStatusBar">true</item> // Android 6.0以上设置白底黑字 </style>

[pablobrodt]

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());
}

[mtshrmn]

@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.

[pablobrodt]

@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.

[mtshrmn]

I see, thanks 😄

[wkmcyz]

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.

[nihp]

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} />

[arfa123]

Still happening in RN 0.60.5.

[arfa123]

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

[joaodematejr]

+1

[cristianoccazinsp]

+1

[snamstorm]

+1

[AndreyPatseiko]

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