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

[react-native-modal]

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

[ifsnow]

statusBarTranslucent property has been added to Modal of RN 0.62

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

I think this problem has been solved. :)

[gasparteixeira]

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

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

[callmejm]

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>

[viktor992]

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>

[listenzz]

I had fix this issue

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

[gasparteixeira]

Hey Guys,

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

[neilfranci]

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.

[remigallego]

If you are using React Navigation, here is a way to avoid this issue:

• Instead of creating a component wrapped in Modal, create a screen with transparent background using transition config: react-navigation/react-navigation#1528 (comment)
• Now instead of conditionally showing/hiding your Modal, navigate to your newly created screen and pass your dialog markup as param:

this.props.navigation.navigate({
        routeName: 'OverlayScreen',
        key: 'OverlayScreen',
        params: {
          content: () => this.renderComponent()
        }
      });

Inside 'OverlayScreen' you can just render your component like so and customize your StatusBar with more params if you want:

const content = this.props.navigation.getParam('content');
return (
  <View>
    <StatusBar
      backgroundColor={choseBackgroundColor()}
      barStyle={choseBarStyle()}
      hidden={false}
    />
    {content()}
  </View>
);

[swayok]

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

[mmazzarolo]

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

[TheNerdGuyLulu]

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

[mmazzarolo]

Ok, I gave it another try and the issue is indeed related to the original react-native modal.
The following code has the same "white statusbar" issue, caused by transparent={true}:

import React from "react";
import { Modal, View } from "react-native";

export default class Root extends React.Component<{}> {
  render() {
    return (
      <View style={{ flex: 1 }}>
        <Modal transparent={true} style={{ flex: 1 }}>
          <View style={{ backgroundColor: "blue", flex: 1 }} />
        </Modal>
      </View>
    );
  }
}

I'm trying the code above on different devices before opening an issue on the official react-native/expo repo.

The following devices have the issue:

• Google Nexus 9 - 6.0.0 - API 23
• Google Nexus 5 - 5.1.0 - API 22

The following devices work as expected:

• 10.1_WGXA_Tablet_API_26

I guess it might be related to the API then, as the StatusBar Expo docs suggest.

Please notices that apps created using react-native (react-native init AppName) work correctly on all devices mentioned above, only Expo apps have the issue.

[Daniyal857]

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

a perfect one

[kallrobin]

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

[yalcinozer]

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.

[goxr3plus]

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 !!!!!!!

[wkoutre]

@listenzz nice! Simple and effective.

I had to do part of the linking manually (as I wrote in this issue: listenzz/react-native-modal-translucent#1) but other than that, good to go.

Doesn't solve (and doesn't intend to solve) completely eliminating the StatusBar for Android when a Modal from react-native is visible, but that's a separate topic.

[alex-mironov]

Why is this issue closed? It's still there.

[lucas-ssv]

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

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

`

[PramelaDevi-S]

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

[mmazzarolo]

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

[kallrobin]

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

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

[GollyJer]

@wkoutre Very cool! Nice work.
Hopefully someone on the core team can use what you've done to get this into the native modal.

We're using Expo so I'm unable to get your fix because I can't react-native link.

[mmazzarolo]

@alex-mironov because unfortunately we cannot do too much about it since it's a RN issue 😞

[leshphonc]

I had fix this issue

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

nice!

[jpamarohorta]

Oh I understand. If that's the case then this one should be closed. You are right sorry.

[RichardLindhout]

New issue: facebook/react-native#20623

[pinguo-zhouwei]

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

[fangasvsass]

the issue still react native 0.59.9

[shels107]

@viktor992 thanks, it's work for me

[Linkitsoft]

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>

[nidaorhan]

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

[mmazzarolo]

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

[mmazzarolo]

Closing, feel free to create a new issue if needed 👍

Also, please be aware that I created the following "new issue template" that, if followed correctly, will speed up a lot the issue resolution:

---

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

Under the hood react-native-modal uses react-native original Modal component.
Before reporting a bug, try swapping react-native-modal with react-native original Modal component to check if the problem persists.

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

• The outcome of the react-native-modal swap described above
• A descriptive title
• An isolated way to reproduce the behavior (example: GitHub repository with code isolated to the issue that anyone can clone to observe the problem)
• What version of react-native-modal you're using, and the platform(s) you're running it on (iOS, Android, device)
• What packages or other dependencies you're using
• The behavior you expect to see, and the actual behavior

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

• A descriptive title
• A description of the problem you're trying to solve, including why you think this is a problem
• An overview of the suggested solution
• If the feature changes current behavior, reasons why your solution is better

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

[mmazzarolo]

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

+1

[EnriqueDev]

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

[EnriqueDev]

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]

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

[kallrobin]

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]

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

[kallrobin]

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.

[Stophface]

@gasparteixeira where exactly do you pass these props?

[mmazzarolo]

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

[mmazzarolo]

Can anyone confirm @gasparteixeira solution?

[zmartell]

@mmazzarolo doesn't seem to work.

[mmazzarolo]

Might be related to this issue

[gasparteixeira]

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

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

[webraptor]

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

[toussa]

@webraptor well, this workaround does not work with Expo.

By the way, I can confirm the problem with react-native: 0.50.3, expo and Google Nexus 9 - 5.0.0 (API 21) (emulator)

[mmazzarolo]

For everyone having the issue, could you try placing the modal on the root of you app and see if it still shows the white bar?
By root level I mean outside of your Navigator too (if you're using a navigation library at all).

[mmazzarolo]

I also had the same issue using react-native-material-dropdown (which uses the native modal), see this related issue

[toussa]

@mmazzarolo I did the test (modal on Root component, outside of navigator) => same issue 😞

[wkoutre]

@GollyJer It can always be manually linked.

Haven't used Expo in over a year so I can't speak to the process/possibility but.. react-native link is finicky as it is, so I usually either use Cocoapods (if supported) or manually link.

[jiangbophd]

so bad, the issue still there

[jpamarohorta]

Why is this issue closed?

@listenzz package indeed fixes it but, isn't this still a bug?

[mmazzarolo]

Why is this issue closed?

Because, as far as I know, it's caused by RN own Modal, and not by react-native-modal.
I'll reopen it, but if this is still the case the issue should be addressed directly in react-native :(

[mmazzarolo]

No worries, here's the issue: facebook/react-native#9090 (comment)

[swayok]

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

I'm using react-native-elements Ovarlay component so it does not solve my case easily =(
Maybe I should reconsider this choice.

[RichardLindhout]

Just use the portal branch of this modal ;)

[headfire94]

Possible workaround:

1. Create simple modal component wrapped with View instead of native Modal.
2. 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.
3. 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]

I had fix this issue

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

perfect!

[wenkangzhou]

Has any progerss?

[rdgomt]

Didn't work for me :(

[iroslehu]

Hey Guys,

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

Thanks, it works for me.

[rayj10]

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]

@rayj10 have you found a solution for the problem?

[abdulrehmanicm]

<StatusBar backgroundColor={visibleModal? "rgba(0,0,0,0.7)": 'transparent'} barStyle={visibleModal ? 'light-content' : 'dark-content'} />

[nkutechologies]

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

this works for me Thanks

[cocoa-1012]

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.

[goxr3plus]

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]

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