The statusbar turns white when the modal is open (only on certain devices) #50

nidaorhan · 2017-08-01T21:48:34Z

I have a component with status bar set to hidden like this:

<View style={ style.container } >
   <StatusBar hidden={true} />

        ...
        
   <Modal isVisible={this.state.isModalVisible}>
     <Text>Modal</Text>   
   </Modal>

</View>

When the modal is visible, status bar is hidden but instead there is an empty white block at the top with the exact height of the status bar:

react-native : 0.45.1
react-native-moda l: 2.5.0
android : 5.1.1

The text was updated successfully, but these errors were encountered:

mmazzarolo · 2017-08-02T06:47:23Z

Hey @nidaorhan, could you try replacing react-native-modal with the React-Native built in modal and see if it has the same issue?

nidaorhan · 2017-08-04T20:09:45Z

Yes, I tried, no issues with the React-Native built in modal

mmazzarolo · 2017-08-13T08:11:02Z

Sorry for being late, I was on holiday.
Could you provide an exact code example to reproduce the issue?

mmazzarolo · 2017-08-16T07:19:01Z

kallrobin · 2017-09-15T13:03:29Z

Hi, i am also dealing with a similar issue
Running:
"react-native-modal": "^3.1.0",
"react-native": "^0.47.2",
Android-API 21

When i open my modal i want the Status bar to still be there to keep consistency in the app but when the modal shows the status bar hides. But since the rest of the app is designed to be below the status bar only a white bar is shown in the status bars place.
How am i supposed to disable the modals interference with the status bar?

I tried changing back to the react-native original modal component and the status bar did not hide(animate away upwards).
But when i use the react-native-modal the status bar hides when the modal is activated. I have tried setting StatusBar.setHidden(false) in the onModalShow but it still goes on to hide the status bar.

I hope i have supplied you with enough information to help me, otherwise i'll do my best to try to explain my issue further.

Kind regards

Edit: This issue does not appear on API 19 and 25 and i am in progress of testing on more devices

mmazzarolo · 2017-09-15T16:59:49Z

@kallrobin thanks a lot, I'm re-opening the issue, could you please provide a bit more info on the subject?
What device are you using?
Did you try it on more than one device?
Are you using an emulator?
What navigation library are you using?
Also, if you provide a snippet of the js file where you use the modal it would be awesome :)

orestis-z · 2017-09-19T23:22:39Z

+1

EnriqueDev · 2017-09-26T09:27:37Z

I'm dealing with the same issue in RN0.48.

mmazzarolo · 2017-09-26T11:26:53Z

Guys, could you please provide the info I asked above?

EnriqueDev · 2017-09-26T13:18:41Z

What device are you using?

Samsung Galaxy A5 2017 - 6.0.1
Huawey Ascent P8 - Android 6.0
Sony Xperia Z1 - Android 5.1.1

What navigation library are you using?
Read-Native-Router-Flux

Note
When trying on:

BQ Aquaris 5H - Android 4.4.2
Google Nexus 5X- Android 7.1.2

it works properly.

Seems like is SO version related.

mmazzarolo · 2017-09-26T14:11:57Z

@EnriqueDev that's exactly what I suspected :(
I'll try to investigate, thanks for the info

kallrobin · 2017-09-26T14:17:52Z

Hi!
Sorry for the delayed response.
But i can also confirm that its a problem with specific devices. So far i only encounter this problem om the nexus5.
All of my android tests had been on emulated devices.
And the navigation lib i'm using is react-navigation.
I decided that atleast on the app i'm developing now i'll just leave it and sadly users on the nexus 5 will have that white bar on top. Might try and do something about it later when i don't have so much more important things to do.

mmazzarolo · 2017-09-26T14:19:20Z

That's weird, I'm not having the issue on the N5 on simulator...

kallrobin · 2017-09-26T14:22:38Z

Wow. That's strange!
That might indicate it has to do with some specific combination of libraries that i'm using together with the N5.

gasparteixeira · 2017-09-27T00:27:15Z

Hey Guys,

I had same problem. I just put this transparent={false} props and everything is working on Android.

Stophface · 2017-09-28T08:09:26Z

@gasparteixeira where exactly do you pass these props?

mmazzarolo · 2017-09-28T08:17:40Z

@Stophface in the StatusBar component i guess... 🤔

gasparteixeira · 2017-09-28T11:35:57Z

@mmazzarolo and @Stophface I put it in Modal from react-modal-native

<Modal
            isVisible={this.state.isModalVisible}
            backdropColor='transparent'
            transparent={false}
            style={styles.modalContent}>

mmazzarolo · 2017-10-13T07:11:57Z

Can anyone confirm @gasparteixeira solution?

zmartell · 2017-10-14T06:28:27Z

@mmazzarolo doesn't seem to work.

mmazzarolo · 2017-10-18T15:19:34Z

Might be related to this issue

kallrobin · 2017-10-19T08:45:54Z

@gasparteixeira I understand why that seems to work. But it's not fixing the issue really.
All you are doing is making the background not transparent and by default it's white. So now the status bar looks "fine" but now i can't see the background (eg. the app).
Although there might be something there to look at. I just can't seem to find some solution.

gasparteixeira · 2017-10-19T22:15:31Z

@kallrobin you right! I made an "ugly" solution. It worked for me and maybe it was not the right way.... I also did another weird thing. I set the background transparent and declare a View with background color inside this!

Norfeldt · 2017-10-21T11:16:10Z

@gasparteixeira Would you mind sharing your "working" code?

gasparteixeira · 2017-10-22T13:37:57Z

Hello @Norfeldt
I did an experience to show you what I did. Let me know if it worked for you!

Please check out this experience on github:
https://github.com/gasparteixeira/react-navite-modal-exp or take a look at the only edited file

//App.js
import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity, StatusBar} from 'react-native';
import Modal from 'react-native-modal'

export default class App extends React.Component {
  state = {
    isModalVisible: false,
    barStyle: 'dark-content'
  }
  _showModal = () => this.setState({ isModalVisible: true, barStyle: 'light-content' })

  _hideModal = () => this.setState({ isModalVisible: false, barStyle: 'dark-content' })
  render() {
    return (
      <View style={styles.container}>
        <StatusBar translucent barStyle={this.state.barStyle}/>
        <TouchableOpacity onPress={() => this._showModal()}>
          <Text>Show Modal</Text>
        </TouchableOpacity>
        <Modal
          isVisible={this.state.isModalVisible}
          backdropColor='transparent'
          transparent={false}
          style={styles.modalWindow}>
          <View style={styles.modalContent}>
            <TouchableOpacity onPress={() => this._hideModal()}>
              <Text style={{color: 'white'}}>Close</Text>
            </TouchableOpacity>
            <Text style={{color: 'white'}}>Modal full!</Text>
          </View>
        </Modal>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  modalWindow: {
    margin: 0,
  },
  modalContent: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.8)',
    alignItems: 'center',
    justifyContent: 'center',
  }
});

To scan my "working" code here is the expo link:
https://exp.host/@gasparteixeira/modal-exp

webraptor · 2017-12-20T14:49:42Z

Can be fixed with facebook/react-native#7474 (comment)

RichardLindhout · 2019-06-24T10:49:32Z

Just use the portal branch of this modal ;)

fangasvsass · 2019-06-28T05:47:09Z

the issue still react native 0.59.9

TheNerdGuyLulu · 2019-07-13T02:58:49Z

A possible work around...
I took a printscreen and "picked" the color.

Then inside the modal with the StatusBar component I assigned the background color with the previous value.

<Modal>
    <View>
          <StatusBar barStyle="dark-content" backgroundColor={'#4A4B4D'} />  // Assign the background 
          <Text>Test</Text>
    </View>
</Modal>

And... voilá.

It's not perfect when it comes to open and close transition, but far better than all white status bar in my opinion.

P.S.
Adding animated={true} to the component, creates a smooth animation when the statusbar background color changes

headfire94 · 2019-08-30T14:42:51Z

Possible workaround:

Create simple modal component wrapped with View instead of native Modal.
Use https://github.com/headfire94/react-native-gateway to render modal on top of everything (above statusBar, content, tabBat and so on), it works just like react Portal.
apply back handler from react-navigation-backhandler to allow close it on hardware back button on Android

Modal works just like native in this case (If i'm not missing something)

sidlu-company · 2019-08-31T02:46:03Z

I had fix this issue

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

perfect!

Daniyal857 · 2019-10-04T11:37:55Z

a better solution for this issue: https://github.com/23mf/react-native-translucent-modal

a perfect one

wenkangzhou · 2019-11-06T11:29:38Z

Has any progerss?

viktor992 · 2019-12-10T01:46:11Z

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>

shels107 · 2019-12-12T11:14:45Z

@viktor992 thanks, it's work for me

rdgomt · 2020-01-03T01:40:14Z

Didn't work for me :(

ifsnow · 2020-04-01T23:15:53Z

statusBarTranslucent property has been added to Modal of RN 0.62

<Modal ... statusBarTranslucent>...</Modal>

I think this problem has been solved. :)

iroslehu · 2020-06-25T20:22:47Z

Hey Guys,

I had same problem. I just put this transparent={false} props and everything is working on Android.

Thanks, it works for me.

yalcinozer · 2020-08-24T08:33:55Z

statusBarTranslucent property has been added to Modal of RN 0.62
<Modal ... statusBarTranslucent>...</Modal>
I think this problem has been solved. :)

How did I miss that? Thanks bro.

rayj10 · 2020-09-09T07:40:24Z

Anyone experiencing this?
I made my app full screen on Android, the modal is clashing with the hidden android nav bar and status bar
this happens on most android devices with soft nav bar for me, but this screenshot is from emulator (Nexus 5 API 27)
this is used in conjunction with RNRF

any pointers would be awesome

gregogalante · 2020-12-03T13:41:48Z

@rayj10 have you found a solution for the problem?

Linkitsoft · 2021-03-06T13:13:23Z

I have a component with status bar set to hidden like this:
<View style={ style.container } >
   <StatusBar hidden={true} />

        ...
        
   <Modal isVisible={this.state.isModalVisible}>
     <Text>Modal</Text>   
   </Modal>

</View>
When the modal is visible, status bar is hidden but instead there is an empty white block at the top with the exact height of the status bar:

react-native : 0.45.1
react-native-moda l: 2.5.0
android : 5.1.1

    <Modal
      visible={showModal}
       backdropColor='#ee535d' <-- Add this
        transparent={false} <-- Add this
        statusBarTranslucent <-- Add this

    >
        ..
        .
        .
    </Modal>

neilfranci · 2021-11-28T07:07:06Z

11/2021

To anyone that facing this if you tried all from top solutions but doesn't look like what you think then here try mine.

- Because I used stack in a tab so this is what it look like:

The code:

<Modal 
        statusBarTranslucent    //Add this if you trying to Make the StatusBarTranslucent like mine.
        backdropOpacity={0.5}
        backdropColor="#000"
        coverScreen={true}
        deviceHeight={Dimensions.get('screen').height}
        animationIn={'slideInUp'}
        .......   //Other option you want to use.
>
//Your Content
</Modal>

But if you remove this: deviceHeight={Dimensions.get('screen').height}
This's what is look like:

Did you see that weird gray thing at the bottom ? jesus

Or you follow someone above and see this:
coverScreen={false}

You will see nothing

So keep in mind coverScreen={true} must be TRUE

And because I use tab with stack to present the modal like in the docs they have this:
screenOptions={{presentation: 'transparentModal'}
and
<StatusBar translucent backgroundColor="transparent" />
in the stack screen
My project structure look like this

Tab
- Stack Navigation
- - Home Screen
- - Modal Screen(container real modal)

So with those too setup above I can have a modal transparent background so when I press tabButton
I can change to the Modal Screen with navigation and the Home Screen will show behind the modal with the transparent StatusBar . Show when it come up with modal screen it look beautiful.

abdulrehmanicm · 2022-04-05T10:18:35Z

nkutechologies · 2022-08-06T15:20:43Z

backdropColor='#ee535d' <-- Add this
transparent={false} <-- Add this
statusBarTranslucent <-- Add this

this works for me Thanks

cocoa-1012 · 2022-10-04T09:28:39Z

Hi, there.
I've made a Android app without statusbar. But when I show the modal, it includes statusbar and it makes the app is poor.

Is there any way to hide the statusbar in modal?
I doesn't mean transparent, I need to hide the statusbar.

Thanks.

lucas-ssv · 2022-10-17T18:58:52Z

Hi there.
There's a modal option that makes this. Try statusBarTranslucent:

` <Modal
animationType="fade"
transparent={true}
statusBarTranslucent
visible={isVisible}

`

PramelaDevi-S · 2023-01-19T12:26:35Z

statusBarTranslucent property has been added to Modal of RN 0.62
<Modal ... statusBarTranslucent>...</Modal>
I think this problem has been solved. :)

Thank you, it's helpful :)

goxr3plus · 2023-04-17T13:37:14Z

Unbelievable this was the solution . Unbelievable i was searching for 1.5 year i love you !!! I will cry lol

I have no words no joking .

I am giving you a full example guyz:

				<Modal
			      ...
					useNativeDriverForBackdrop
					hideModalContentWhileAnimating
					style={{ maxWidth: windowWidth, marginLeft: 0, marginRight: 0, marginTop: 0, marginBottom: 0 }}
					coverScreen={false}
					deviceHeight={screenHeight}
				>

As you can see no status bar anymore !!!!!!!

goxr3plus · 2023-04-17T14:17:53Z

You will find some problems though if you stuck 2 modals on top of each other etc so you have to be careful with the above solution .

CAglarBilkent · 2024-01-16T05:19:03Z

@cocoa-1012
Were you able to find a solution? I am facing the same issue. This is so weird

Jainam1224 · 2024-05-07T17:22:54Z

When using statusBarTranslucent then also in some devices it has some weird gap at the top and bottom of the phone screen and the background is visible. Any final solve for this issue?

Mohitkumawat6260 · 2024-05-23T12:27:42Z

I have a component with status bar set to hidden like this:
add this line style.xml

        <item name="android:windowFullscreen">true</item>

Mohitkumawat6260 · 2024-05-23T12:28:17Z

StatusBar put inside Modal wrap from a View worked for me
  <Modal>
    <View>
      <StatusBar backgroundColor="rgba(0,0,0,0.7)"  barStyle="light-content"/>
    </View>
  </Modal>
Note for react-native-elements Overlay component: only backgroundColor works while barStyle has no effect and always light-content. Tested in simulator with android 8.1 and on Xiaomi Mi5 8.1

I have a component with status bar set to hidden like this:
add this line style.xml

        <item name="android:windowFullscreen">true</item>

Mohitkumawat6260 · 2024-05-23T12:28:48Z

statusBarTranslucent property has been added to Modal of RN 0.62
<Modal ... statusBarTranslucent>...</Modal>
I think this problem has been solved. :)

I have a component with status bar set to hidden like this:
add this line style.xml

        <item name="android:windowFullscreen">true</item>

mmazzarolo added the question label Aug 13, 2017

mmazzarolo closed this as completed Aug 16, 2017

mmazzarolo reopened this Sep 15, 2017

mmazzarolo added the on hold label Sep 19, 2017

headfire94 mentioned this issue Aug 30, 2019

Android - Transparent Modal messes up StatusBar style. facebook/react-native#20623

Closed

3 tasks

The statusbar turns white when the modal is open (only on certain devices) #50

The statusbar turns white when the modal is open (only on certain devices) #50

Comments

nidaorhan commented Aug 1, 2017

mmazzarolo commented Aug 2, 2017

nidaorhan commented Aug 4, 2017

mmazzarolo commented Aug 13, 2017

mmazzarolo commented Aug 16, 2017

When reporting a bug, please be sure to check if the issue still persists with react-native original modal:

When reporting a bug, please be sure to include the following:

When you open an issue for a feature request, please add as much detail as possible:

Please note by far the quickest way to get a new feature is to file a Pull Request.

kallrobin commented Sep 15, 2017 • edited Loading

mmazzarolo commented Sep 15, 2017

orestis-z commented Sep 19, 2017

EnriqueDev commented Sep 26, 2017

mmazzarolo commented Sep 26, 2017

EnriqueDev commented Sep 26, 2017 • edited Loading

mmazzarolo commented Sep 26, 2017

kallrobin commented Sep 26, 2017

mmazzarolo commented Sep 26, 2017

kallrobin commented Sep 26, 2017

gasparteixeira commented Sep 27, 2017

Stophface commented Sep 28, 2017

mmazzarolo commented Sep 28, 2017

gasparteixeira commented Sep 28, 2017

mmazzarolo commented Oct 13, 2017

zmartell commented Oct 14, 2017

mmazzarolo commented Oct 18, 2017

kallrobin commented Oct 19, 2017

gasparteixeira commented Oct 19, 2017

Norfeldt commented Oct 21, 2017

gasparteixeira commented Oct 22, 2017 • edited Loading

webraptor commented Dec 20, 2017

RichardLindhout commented Jun 24, 2019

fangasvsass commented Jun 28, 2019

TheNerdGuyLulu commented Jul 13, 2019 • edited Loading

headfire94 commented Aug 30, 2019

sidlu-company commented Aug 31, 2019

Daniyal857 commented Oct 4, 2019

wenkangzhou commented Nov 6, 2019

viktor992 commented Dec 10, 2019

shels107 commented Dec 12, 2019

rdgomt commented Jan 3, 2020

ifsnow commented Apr 1, 2020

iroslehu commented Jun 25, 2020

yalcinozer commented Aug 24, 2020

rayj10 commented Sep 9, 2020 • edited Loading

gregogalante commented Dec 3, 2020

Linkitsoft commented Mar 6, 2021

neilfranci commented Nov 28, 2021

11/2021

To anyone that facing this if you tried all from top solutions but doesn't look like what you think then here try mine.

You will see nothing

abdulrehmanicm commented Apr 5, 2022 • edited Loading

nkutechologies commented Aug 6, 2022

cocoa-1012 commented Oct 4, 2022

lucas-ssv commented Oct 17, 2022

PramelaDevi-S commented Jan 19, 2023

goxr3plus commented Apr 17, 2023 • edited Loading

goxr3plus commented Apr 17, 2023

CAglarBilkent commented Jan 16, 2024

Jainam1224 commented May 7, 2024 • edited Loading

Mohitkumawat6260 commented May 23, 2024

Mohitkumawat6260 commented May 23, 2024

Mohitkumawat6260 commented May 23, 2024

kallrobin commented Sep 15, 2017 •

edited

Loading

EnriqueDev commented Sep 26, 2017 •

edited

Loading

gasparteixeira commented Oct 22, 2017 •

edited

Loading

TheNerdGuyLulu commented Jul 13, 2019 •

edited

Loading

rayj10 commented Sep 9, 2020 •

edited

Loading

abdulrehmanicm commented Apr 5, 2022 •

edited

Loading

goxr3plus commented Apr 17, 2023 •

edited

Loading

Jainam1224 commented May 7, 2024 •

edited

Loading