The statusbar turns white when the modal is open (only on certain devices)
nidaorhan opened this issue · comments
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
Hey @nidaorhan, could you try replacing react-native-modal with the React-Native built in modal and see if it has the same issue?
Yes, I tried, no issues with the React-Native built in modal
Sorry for being late, I was on holiday.
Could you provide an exact code example to reproduce the issue?
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-modalswap 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-modalyou'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.
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
@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 :)
+1
I'm dealing with the same issue in RN0.48.
Guys, could you please provide the info I asked above?
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.
@EnriqueDev that's exactly what I suspected :(
I'll try to investigate, thanks for the info
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.
That's weird, I'm not having the issue on the N5 on simulator...
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.
Hey Guys,
I had same problem. I just put this transparent={false} props and everything is working on Android.
@gasparteixeira where exactly do you pass these props?
@Stophface in the StatusBar component i guess... 🤔
@mmazzarolo and @Stophface I put it in Modal from react-modal-native
<Modal
isVisible={this.state.isModalVisible}
backdropColor='transparent'
transparent={false}
style={styles.modalContent}>
Can anyone confirm @gasparteixeira solution?
@mmazzarolo doesn't seem to work.
Might be related to this issue
@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.
@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!
@gasparteixeira Would you mind sharing your "working" code?
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
Can be fixed with facebook/react-native#7474 (comment)
@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)
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).
I also had the same issue using react-native-material-dropdown (which uses the native modal), see this related issue
@mmazzarolo I did the test (modal on Root component, outside of navigator) => same issue 😞
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.
I had fix this issue
@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.
@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.
@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.
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>
);
Why is this issue closed? It's still there.
@alex-mironov because unfortunately we cannot do too much about it since it's a RN issue 😞
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>
I had fix this issue
nice!
so bad, the issue still there
Why is this issue closed?
@listenzz package indeed fixes it but, isn't this still a bug?
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 :(
Oh I understand. If that's the case then this one should be closed. You are right sorry.
No worries, here's the issue: facebook/react-native#9090 (comment)
New issue: facebook/react-native#20623
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
a better solution for this issue: https://github.com/23mf/react-native-translucent-modal
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.
Just use the portal branch of this modal ;)
the issue still react native 0.59.9
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
Possible workaround:
- Create simple modal component wrapped with
Viewinstead of nativeModal. - 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-backhandlerto allow close it on hardwarebackbutton on Android
Modal works just like native in this case (If i'm not missing something)
I had fix this issue
perfect!
a better solution for this issue: https://github.com/23mf/react-native-translucent-modal
a perfect one
Has any progerss?
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>
@viktor992 thanks, it's work for me
Didn't work for me :(
statusBarTranslucent property has been added to Modal of RN 0.62
<Modal ... statusBarTranslucent>...</Modal>I think this problem has been solved. :)
Hey Guys,
I had same problem. I just put this
transparent={false}props and everything is working on Android.
Thanks, it works for me.
statusBarTranslucentproperty 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.
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
@rayj10 have you found a solution for the problem?
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>
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.
<StatusBar backgroundColor={visibleModal? "rgba(0,0,0,0.7)": 'transparent'} barStyle={visibleModal ? 'light-content' : 'dark-content'} />
backdropColor='#ee535d' <-- Add this
transparent={false} <-- Add this
statusBarTranslucent <-- Add this
this works for me Thanks
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.
Hi there.
There's a modal option that makes this. Try statusBarTranslucent:
` <Modal
animationType="fade"
transparent={true}
statusBarTranslucent
visible={isVisible}
`
statusBarTranslucentproperty has been added to Modal of RN 0.62<Modal ... statusBarTranslucent>...</Modal>I think this problem has been solved. :)
Thank you, it's helpful :)
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 !!!!!!!
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 .
@cocoa-1012
Were you able to find a solution? I am facing the same issue. This is so weird
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?
I have a component with status bar set to hidden like this:
add this line style.xml
<item name="android:windowFullscreen">true</item>
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-elementsOverlaycomponent: onlybackgroundColorworks whilebarStylehas no effect and alwayslight-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>
statusBarTranslucentproperty 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>