In React Native (With EXPO), I'm showing a Modal.
The Modal gets drawn behind the StatusBar in iOS but it's not happening on Android.
Do you know why? I could not find any solution for this.
The StatusBar has already set the translucent={true} prop. That's why you are able to see the Map behind the StatusBar on Android. But I can not draw the Modal component behind it (as I can do on iOS).
Here I add a couple of screenshots and an online viewer to check this behavior: https://snack.expo.io/BJR4oF4A7
Another weird behavior that I'm seeing is that it doesn't matter which translucent value I set, it always works in the same way (it's always translucent, even when I set it to false).
In case that this is impossible, how can I set the background to #FFF and the font-color to #000 on the StatusBar on Android?
I want to know:
Why there are different behaviors in iOS and Android.
Why changing the props of StatusBar still not changing its behavior (can be seen in the online viewer, changing translucent, or backgroundColor values)
If it's impossible to get the modal drawn behind the StatusBar, so, how can I change the background and the font-color of it when a Modal is opened? (in Android) (with no hiding it)
Android
iOS
I believe you need to try the app as a standalone application, not using the Expo client. It somehow sometimes has hard time dealing with StatusBar (I've already experienced it too).
You may use the hidden property that is working on both platforms, based on your current state: <StatusBar hidden={!!this.state.isModalShown} />
This will simply hide the status bar whenever your modal is opened.
Set the barStyle to be the contrasting backgroundColor.
Black writing on white background, so have dark-content on white status bar.
<StatusBar barStyle="dark-content" backgroundColor={"#fff"} />
Related
I use React Native CLI. With Alert, the full screen of the app is covered and the navigation bar becomes transparent. However this does not happen with a Modal, which does not cover the navigation bar. (and it looks a bit bad). I don't understand why that happens and I'd be grateful if someone could help me out.
Example when using Modal.
Example when using Alert.
Try setting transparent prop to 'true' - https://reactnative.dev/docs/modal#transparent
Is it possible to change it for the whole system instead of just for your own app? I found this app called Navbar Apps that does just that. It only uses the draw overlay permission for changing the color. How does it do it?
I have a strange black bar (around 30 dp), which is over the navigation bar (see attached image).
It is preventing my app from fully wrapping it's view. Probably it is some system window border, which I can't yet find how to disable/resize.
It is observed in some apps, and in some it is not (which seems that applying some theme or window flag should remove it).
Here is what I've tried up to now:
Changed app theme to a different one (e.g. #android:style/Theme.DeviceDefault.Settings).
Applied this in oncreate:
getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN |View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION);
Changed the nav bar size - it only gets smaller, but the black line stays in the same position
Using uiautomatorviewer doesn't seem to show the view (and id) of the navigation bar at all.
Any help for removing this line would be appreciated.
Hello again and thanks for the support.
Finally I've found the issue. It was due to the api which was used (android-23). After updating to android-29, the issue is resolved. Seems that somehow theming or windowing mechanism is affected by the old api (and the app does not cover the whole screen - the rest is covered by a black background).
PS: I needed to restart the phone in order this to be applied. Killing of the app after adb push didn't apply the setting.
I am currently trying to make the statusbar transparent and it's working absolutely perfect on iOS but on Android, the react-navigation header is going behind it and thus making the title and left/right menu icons touching the statusbar, not sure how to add extra gap between it and make it look like earlier.
I have just added translucent and backgroundColor="transparent" on statusbar to make it work.
Please provide me a generic solution so that the change should occur throughout the application
I want the statusbar to be transparent as I am using backgroundImage
This question has been asked several times -- and answered, but the answers don't seem to "add up".
Yes, one can simply set android:windowTranslucentStatus to true and set the WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS flag. (See Android Completely transparent Status Bar?) That produces a completely transparent status bar (in recent Android releases). That's great!
The issue is that this then results in the soft navigation bar being drawn over the lower contents (e.g. controls) within one's activity. I've tried resolving this with fitSystemWindows, but currently am clearly getting something wrong. Overall, it seems quite wrong that one has to get into any of this mess just to get a completely transparent vs. a translucent status bar!