0
478
ViewsHide header in stack navigator React navigation
I'm trying to switch screens using both stack and tab navigator.
const MainNavigation = StackNavigator({
otp: { screen: OTPlogin },
otpverify: { screen: OTPverification},
userVerified: {
screen: TabNavigator({
List: { screen: List },
Settings: { screen: Settings }
}),
},
});
In this case stack navigator is used first and then tab navigator. I want to hide the headers from stack navigator. Which is not working properly when I use navigation options like::
navigationOptions: { header: { visible: false } }
i'm trying this code on first two components which are using in stacknavigator. if i use this line then getting some error like:
3 answers
Answer question0
UPDATE as of version 5
As of version 5 it is the option headerShown in screenOptions
Example of usage:
<Stack.Navigator
screenOptions={{
headerShown: false
}}
>
<Stack.Screen name="route-name" component={ScreenComponent} />
</Stack.Navigator>
If you want only to hide the header on 1 screen you can do this by setting the screenOptions on the screen component see below for example:
<Stack.Screen options={{headerShown: false}} name="route-name" component={ScreenComponent} />
See also the blog about version 5
UPDATE
As of version 2.0.0-alpha.36 (2019-11-07),
there is a new navigationOption: headershown
navigationOptions: {
headerShown: false,
}
https://reactnavigation.org/docs/stack-navigator#headershown
https://github.com/react-navigation/react-navigation/commit/ba6b6ae025de2d586229fa8b09b9dd5732af94bd
Old answer
I use this to hide the stack bar (notice this is the value of the second param):
{
headerMode: 'none',
navigationOptions: {
headerVisible: false,
}
}
When you use the this method it will be hidden on all screens.
In your case it will look like this:
const MainNavigation = StackNavigator({
otp: { screen: OTPlogin },
otpverify: { screen: OTPverification },
userVerified: {
screen: TabNavigator({
List: { screen: List },
Settings: { screen: Settings }
}),
}
},
{
headerMode: 'none',
navigationOptions: {
headerVisible: false,
}
}
);
0
On v4 simply use below code in the page you want to hide the header
export default class Login extends Component {
static navigationOptions = {
header: null
}
}
refer to Stack Navigator
0
In the given solution Header is hidden for HomeScreen by- options={{headerShown:false}}
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} options={{headerShown:false}}/>
<Stack.Screen name="Details" component={DetailsScreen}/>
</Stack.Navigator>
</NavigationContainer>