Tab and Stack Navigator on same screen - react-native

Question

When I navigate to a Tab via push both the Tab Navigator and Stack Navigator are displayed; however, when I navigate to a Stack Navigator via Tab Navigator only the Stack Navigator is displayed. How do I display both the Tab Navigator and Stack Navigator when I push to a Stack Navigator Screen? My app module:
const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();
function TabNavigator() {
return (
<Tab.Navigator>
<Tab.Screen name="User" component={UserDetailScreen} />
<Stack.Screen name="Feed" component={FeedScreen} />
</Tab.Navigator>
)
}
function MyStack() {
return (
<Stack.Navigator initialRouteName='Logout'>
<Stack.Screen name="Logout" component={LoginScreen} />
<Stack.Screen name="User" component={TabNavigator} />
<Stack.Screen name="UserForm" component={UserFormScreen} />
<Stack.Screen name="ItemForm" component={ItemFormScreen} />
<Stack.Screen name="Swap" component={SwapDetailScreen} />
</Stack.Navigator>
);
}
export default function App() {
console.log("test");
console.log(UserDetailScreen);
return (
<NavigationContainer>
<MyStack />
</NavigationContainer>
);
}

Answer 1

The TabBar is only visible when you're inside the TabNav. In your case that's either the UserDetailScreen or the FeedScreen. In order to display both, TabNav and StackNav, you need to change your nesting accordingly.
StackNav
- LoginScreen // no TabBar displayed
- TabNav
- UserDetailScreen
- FeedScreen
- UserFormScreen // no TabBar displayed
- ItemFormScreen // no TabBar displayed
- SwapDetailScreen // no TabBar displayed
Solution A: put StackNavs into your Tabs (recommended):
- TabNav
-StackNav // e.g. all user related screens
- LoginScreen
- UserDetailScreen
- UserFormScreen
-StackNav // e.g. all feed related screens
- FeedScreen
- ItemFormScreen
- SwapDetailScreen
Hint: if you want to have your login without Tabs you could exclude it from any navigator:
- LoginScreen
- TabNav
-StackNav // e.g. all user related screens
- UserDetailScreen
- UserFormScreen
-StackNav // e.g. all feed related screens
- FeedScreen
- ItemFormScreen
- SwapDetailScreen
In your code you can do sth. like this (Pseudocode):
<!-- language: lang-js -->
...
render(){
if (this.state.userIsLoggedIn){
return <TabNav />;
}
else {
return <View> My Login Screen </View>
}
}
...
Solution B: use one single Stack and customize your TabNav (might be interesting for some use cases):
- TabNav
- StackNav
- LoginScreen
- UserDetailScreen
- UserFormScreen
- FeedScreen
- ItemFormScreen
- SwapDetailScreen
In your code you can do sth. like this (Pseudocode):
...
<Tabs.Navigator tabBar = { props => <CustomTabBar {...props} /> }>
<Tabs.Screen name="TabBar" component={ getScreenStack } />
</Tabs.Navigator>
...
const CustomTabBar = ({ navigation }) => {
return (
<View>
<Button
title="User"
onPress={() => { navigation.navigate('UserScreen') }}
/>
)
}
...
function getScreenStack(){
return (
<Stack.Navigator>
<Stack.Screen name="Login” component=”LoginScreen” />
...
</Stack.Navigator>
)
}
...
If performance is not an issue I would stick to solution A, because solution B has several drawbacks:
Tab Indicators need to be tracked manually
Back button behaviour is odd and needs to be adjusted, because Tabs are handled as part of Stack
Hope that helps.

Answer 2

Why your FeedScreen use <Stack.Screen/> instead of Tab.Screen/>?
<Tab.Navigator>
<Tab.Screen name="User" component={UserDetailScreen} />
<Stack.Screen name="Feed" component={FeedScreen} />
</Tab.Navigator>
I am confused about this, it may be the problem.