How to hide React Native NavigationBar
I solved this by defining a custom NavigationBar which can inspect the current route. Would look something like this:
class NavigationBar extends Navigator.NavigationBar {
render() {
var routes = this.props.navState.routeStack;
if (routes.length) {
var route = routes[routes.length - 1];
if (route.display === false) {
return null;
}
}
return super.render();
}
}
Using your example:
render: function(){
return (
<Navigator
initialRoute={{
component: UserSetting,
rightButtonTitle: 'Done',
title: 'My View Title',
display: false,
}}
style={styles.container}
renderScene={this.renderScene}
navigationBar={
<NavigationBar
routeMapper={NavigationBarRouteMapper}
style={styles.navBar}
/>
}
/>
);
}
I did this:
Dashboard:{
screen: Dashboard,
navigationOptions: {
headerStyle: {display:"none"},
headerLeft: null
},
},
Because some old methods are deprecated i used stacknavigator. It works for me, if you are using StackNavigator.
//******For Older Versions. But Will be Deprecated in future*******
//static navigationOptions = { title: 'Welcome', header: null };
//For Latest Version Use:
static navigationOptions = { title: 'Welcome', headerShown: false};
Feel free to contact, if any issue.
In the React Navigation (5.x,6.x) [Current Version Is 6.x]
Set headerShown
property to false
to hide navigation bar as below :
<Stack.Screen name="Login" component={LoginScreen} options={{ headerShown: false }} />
complete example :
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
// Screen
import LoginScreen from '../screens/auth/LoginScreen';
const Stack = createStackNavigator();
const CareAndCarersNavigation = () => {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Login" component={LoginScreen} options={{ headerShown: false }} />
</Stack.Navigator>
</NavigationContainer>
)
}
export default MainNavigation
In the React Navigation (4.0)
to hide navigation bar you have 3 options :
1. For the single screen, you can set header null in navigationOptions
static navigationOptions = {
//To hide the ActionBar/NavigationBar
header: null,
};
2. For the single screen, you can set header null in createStackNavigator like this
const App = createStackNavigator({
First: {
screen: HomeActivity,
navigationOptions: {
header: null,
},
},
});
3. Hide the header from all the screens in once using defaultNavigationOptions
const App = createStackNavigator(
{
First: {
screen: HomeActivity,
},
},{
defaultNavigationOptions: {
header: null
},
}
);
UPDATED
As @DarthVanger said in the comment below, to hide all headers in the stack, use screenOptions
like the following:
<NavigationContainer>
<Stack.Navigator screenOptions={{ headerShown: false }}>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Profile" component={ProfileScreen} />
</Stack.Navigator>
</NavigationContainer>