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.
JavaScript
x
72
72
1
import { createStackNavigator, createSwitchNavigator, createBottomTabNavigator } from 'react-navigation';
2
//Other required imports here
3
4
const SignedOut = createStackNavigator({
5
Signup: { screen : Signup},
6
Login: { screen : Login}
7
});
8
9
const SignedIn = createBottomTabNavigator({
10
Dashboard: {
11
screen: Dashboard
12
},
13
Rewards: {
14
screen: createStackNavigator({
15
Rewards:{
16
screen: Rewards,
17
navigationOptions:{
18
header:null
19
}
20
},
21
AddReward:{
22
screen: AddReward,
23
navigationOptions:{
24
header:null,
25
tabBarVisible: false
26
}
27
}
28
})
29
},
30
Activities: {
31
screen: createStackNavigator({
32
Rewards:{
33
screen: Activities,
34
navigationOptions:{
35
header:null
36
}
37
},
38
NewActivity:{
39
screen: NewActivity,
40
navigationOptions:{
41
header:null,
42
tabBarVisible: false
43
}
44
}
45
})
46
},
47
Settings: {
48
screen: Settings
49
}
50
},{
51
tabBarComponent: ({navigation}) => <FooterComponent navigation={navigation} />,
52
tabBarPosition: 'bottom',
53
animationEnabled: false,
54
swipeEnabled: false
55
});
56
57
export const createRootNavigator = (signedIn) => {
58
return createSwitchNavigator(
59
{
60
SignedIn: {
61
screen: SignedIn
62
},
63
SignedOut: {
64
screen: SignedOut
65
}
66
},
67
{
68
initialRouteName: (signedIn) ? "SignedIn" :"SignedOut",
69
headerMode: 'none'
70
}
71
);
72
};
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