Skip to content
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

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

Closed
nidaorhan opened this issue Aug 1, 2017 · 78 comments
Closed

Comments

@nidaorhan
Copy link

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:

screenshot

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

@mmazzarolo
Copy link
Member

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
Copy link
Author

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

@mmazzarolo
Copy link
Member

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

@mmazzarolo
Copy link
Member

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.

@kallrobin
Copy link

kallrobin commented Sep 15, 2017

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
Copy link
Member

@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
Copy link

+1

@EnriqueDev
Copy link

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

@mmazzarolo
Copy link
Member

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

@EnriqueDev
Copy link

EnriqueDev commented Sep 26, 2017

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
Copy link
Member

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

@kallrobin
Copy link

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
Copy link
Member

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

@kallrobin
Copy link

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
Copy link

Hey Guys,

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

@Stophface
Copy link

@gasparteixeira where exactly do you pass these props?

@mmazzarolo
Copy link
Member

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

@gasparteixeira
Copy link

@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
Copy link
Member

Can anyone confirm @gasparteixeira solution?

@zmartell
Copy link

@mmazzarolo doesn't seem to work.

@mmazzarolo
Copy link
Member

Might be related to this issue

@kallrobin
Copy link

@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
Copy link

@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
Copy link

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

@gasparteixeira
Copy link

gasparteixeira commented Oct 22, 2017

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

modalandroid
modalios

@webraptor
Copy link

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

@RichardLindhout
Copy link
Contributor

Just use the portal branch of this modal ;)

@fangasvsass
Copy link

the issue still react native 0.59.9

@TheNerdGuyLulu
Copy link

TheNerdGuyLulu commented Jul 13, 2019

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

asas

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

asdasd

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
Copy link

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
Copy link

I had fix this issue

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

perfect!

@Daniyal857
Copy link

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

after-pop1

a perfect one

@wenkangzhou
Copy link

Has any progerss?

@viktor992
Copy link

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
Copy link

@viktor992 thanks, it's work for me

@rdgomt
Copy link

rdgomt commented Jan 3, 2020

Didn't work for me :(

@ifsnow
Copy link
Contributor

ifsnow commented Apr 1, 2020

statusBarTranslucent property has been added to Modal of RN 0.62

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

I think this problem has been solved. :)

@iroslehu
Copy link

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
Copy link

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
Copy link

rayj10 commented Sep 9, 2020

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
Screenshot_1599637240

@gregogalante
Copy link

@rayj10 have you found a solution for the problem?

@Linkitsoft
Copy link

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:

screenshot

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
Copy link

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
Copy link

abdulrehmanicm commented Apr 5, 2022

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

@nkutechologies
Copy link

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

this works for me Thanks

@cocoa-1012
Copy link

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
Copy link

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

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

`

@PramelaDevi-S
Copy link

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
Copy link

goxr3plus commented Apr 17, 2023

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

image

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

@goxr3plus
Copy link

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
Copy link

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

@Jainam1224
Copy link

Jainam1224 commented May 7, 2024

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
Copy link

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

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

@Mohitkumawat6260
Copy link

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
Copy link

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>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests