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?
Related
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>
I am using Persistent Bottom Nav Bar package and I want to Navigate to a desired page using a button on the AppBar, however the NavBar disappears if I do it like this. I understand this may be because they are apart of the same class (Working with the example project from Persistent Nav Bar git hub).
I have tried different ways of routing without luck.
How can I work around this so the drawer and the AppBar buttons would keep the Nav Bar?
You could try something like this:
Scaffold( appBar: AppBar(), body: PersistentTabView() );
solution from - https://github.com/BilalShahid13/PersistentBottomNavBar/issues/171
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?
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
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