I am totally confused to achieve something like below, this is working fine but can’t hide tab bar for EditPage and PageTwo
- Login
- SignUp
- TabNavigator(TabNavigator)
- FirstTab
- SecondTab(StackNavigator)
- ListPage
- EditPage
- ThirdTab(StackNavigator)
- PageOne
- PageTwo
- Settings
Below is my configuration for it.
import { createStackNavigator, createSwitchNavigator, createBottomTabNavigator } from 'react-navigation';
//Other required imports here
const SignedOut = createStackNavigator({
Signup: { screen : Signup},
Login: { screen : Login}
});
const SignedIn = createBottomTabNavigator({
Dashboard: {
screen: Dashboard
},
Rewards: {
screen: createStackNavigator({
Rewards:{
screen: Rewards,
navigationOptions:{
header:null
}
},
AddReward:{
screen: AddReward,
navigationOptions:{
header:null,
tabBarVisible: false
}
}
})
},
Activities: {
screen: createStackNavigator({
Rewards:{
screen: Activities,
navigationOptions:{
header:null
}
},
NewActivity:{
screen: NewActivity,
navigationOptions:{
header:null,
tabBarVisible: false
}
}
})
},
Settings: {
screen: Settings
}
},{
tabBarComponent: ({navigation}) => <FooterComponent navigation={navigation} />,
tabBarPosition: 'bottom',
animationEnabled: false,
swipeEnabled: false
});
export const createRootNavigator = (signedIn) => {
return createSwitchNavigator(
{
SignedIn: {
screen: SignedIn
},
SignedOut: {
screen: SignedOut
}
},
{
initialRouteName: (signedIn) ? "SignedIn" :"SignedOut",
headerMode: 'none'
}
);
};Problems
- I can’t hide tab bar for AddReward and NewActivity
tabBarVisible: falsenot working for StackNavigator inside TabNavigator
Thanks
Advertisement
Answer
You could use one StackNavigator with all your stacks, and set the TabNavigator as default route :
- SwitchNavigator
- Login
- SignUp
- StackNavigator
- TabNavigator
- FirstTab
- ListPage
- Settings
- EditPage
- PageTwo
- TabNavigator