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: false
not 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