I'm working on a React Native project with expo and am trying to have the Android Navigation bar rest on top of my view (as shown below and described here)
However I am having difficulty getting my desired result instead I get a gray bar at the bottom.
Thus far I've tried to set the navigation bar to transparent in my app.json file or use NavigationBar.setBackgroundColorAsync(color) both ending with the same result.
//app.json
"androidNavigationBar": {
"backgroundColor":"#00000000"
},
//App.js
//also tried flex: 1
<View style={{height: Dimensions.get("screen").height, backgroundColor: "blue"}}></View>
Related
I would like to hide my bottom navigation bar on mobile device when keyboard is show.
I use Expo 40
I have added in definition option bottom bar keyboardHidesTabBar: true, such as:
const TabBot = createMaterialBottomTabNavigator();
...
return(
<TabBot.Navigator
initialRouteName="np"
tabBarOptions={{
keyboardHidesTabBar: true
}}
barStyle={TabBotOpt}>
...
I have add "softwareKeyboardLayoutMode": "pan" in android section into app.json file,
but when I open the website from mobile phone (android) I have this:
It is possible to hide bottom Tab Navigation when keyboard is open?
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"} />
Im using react native navigation V1 and i set my nav bar transparent to true, in my IOS emulator looks good but in Android emulator show me something like a border, and i don't know how hide or remove this section.
//add this to change top bar navigator.
navigatorStyle: {
drawUnderNavBar: true,
navBarTranslucent: true,
navBarTransparent: true,
navBarBackgroundColor: 'transparent',
},
Example how looks in Android
I'm building a React Native app with React Navigation 2.5.x. I have a transparent navigation bar. On iOS everything is fine, but on Android the title, back button and any barButton I put there is missing.
The navigation options is defined like this:
const navigationOptions = {
headerStyle: {
borderBottomWidth: 0,
},
headerTransparent: true,
headerTintColor: Colors.barTintColor,
};
If I try to inspect the view I get the header component when tapping, but on Android I get the scenes content view instead.
Previously I had the header style positioned absolutely and a transparent background color. I would like the bar to be transparent and visible above the rest of content screen. But positioning it absolutely, setting headerMode och headerTransparent all makes the headers disappear.
What am I doing wrong?
I have noticed that there is no props for the StatusBar component (React Native) to include an icon or logo of any kind as in this documentation:
https://facebook.github.io/react-native/docs/statusbar.html#statusbar
I would like for an icon (or even just a small widthxheight square) to appear next to the networks bar continuously while the app is running in the background. I tried combining the View component with the status bar to create a small red rectangle like this:
<View style={styles.container}>
<StatusBar
backgroundColor="blue"
barStyle="light-content"
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
width: 20,
height: 20,
backgroundColor: 'red'
}
})
However the red square just appeared below the status bar. Any ideas?
Edit:
What I want is to have my app logo on the status bar even when the app is in the background. (apps that provide VPN and location services do this sometimes).
For iOS it's not possible to add any custom icons in the status bar, apple doesn't allow it.
For Android you should use Notification and Notification Manager. Just write a native module in java who do this when your app is launching.
React Native allow you to call Native Module written in Java, take a look here https://facebook.github.io/react-native/docs/native-modules-android.html
You should also read this for Notification How to show an icon in the status bar when application is running, including in the background?
There are 2 kinds of icons in Android status bar.
One kind is system icons that come from framework-res.apk and extracted to the /system/framework , you can't change those without having some elevated privileges on the device and mounting the system image read/write.
The other kind is the notification icons as mentioned here before.
For iOS you can't really change much.
Your screenshot shows both kinds and you want to put your icon next to the Network bars icon but those are system icons (on Android)
Here is a plugin that deals with notifications (and notification icons) both platforms and wraps everything, easy to use with react
You can find a sample native code for iOS notification here and Android here:
You can't change the status bar. Apple only allows you to change the appearance of the status bar. For the ios app maybe changing the appearance globally works for you.
Open the .xcproj file generated by ReactNative and:
In your Info.plist you need to set "View controller-based status bar appearance" to a boolean value.
set it to NO set the style in AppDelegate adding this code on the didFinishLaunchingWithOptions function: UIApplication.sharedApplication().setStatusBarStyle(UIStatusBarStyle.LightContent, animated: true)