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
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
I'm using React Navigation Wix for my App and I want to achieve something similar to the below design (Attached image).
Actually the problem with the wix is that we don't have the ability to customize too much things, we can config the text and the icon only.
Note that its hard for me to convert to the react navigation library right now.
Right now there is no way to add a custom component as Bottom Tab Bar in "react-native-navigation" by Wix.
But you can implement the approach briefly described here
disable bottom tabs showing
create your own tabs component
add it to every screen
get fun :-)
But you need to be aware that you will lose the default badge showing behavior (small red circles near the icon) provided by this lib.
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"} />
So I'm having a small issue with the theme of my app. I have the android:windowTranslucentStatus set to true in the base theme and also have the android:fitsSystemWindows="true" to allow the background image to draw under the status bar. However this leads to another problem with my ListView. Basically it draws under the navigation bar and when you scroll to the end of the list it stuck under the navbar like this
I'm thinking about giving the listview a margin or padding value to avoid this but it seems ugly and probably not the right way. Anyone has a solution to this?
I want to overlay a transparent view on the entire screen including the bottom most Navigation Bar in Android 4.4.
I am able to do so in Android 4.3 by defining the window Manager LayoutParams as TYPE_SYSTEM_OVERLAY, but when I use the same definition the layout is now pushed behind the navigation bar. could you please let me know if it due to the recent updates in KitKat? or If any one have a solution please share with me.
regards