React Native Tab Navigator within Stack Navigator - react-native

Question

I have the following Stack Navigator in App.js:
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Login" screenOptions={{headerShown:false}}>
{user ? (
<>
<Stack.Screen name="Home">
{(props) => <HomeScreen {...props} extraData={user} />}
</Stack.Screen>
<Stack.Screen name="Profile" component={ProfileScreen} />
<Stack.Screen name="Login" component={LoginScreen} />
</>
) : (
<>
<Stack.Screen name="Login" component={LoginScreen} />
<Stack.Screen name="Registration" component={RegistrationScreen} />
</>
)}
</Stack.Navigator>
</NavigationContainer>
);
I want to add a bottom tab navigator that shows up on the HomeScreen, and allows me to go back and forth between the HomeScreen and ProfileScreen. How can this be done?

Answer 1

The way to do this is to create a tab navigator component where Home and Profile are 2 screens of the navigator:
const Tab = createBottomTabNavigator();
function TabNavigator({route}) {
// Retrieve user from initalParams.
// The user is passed to initialParams in the snippet below.
const user = route.params?.user
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Profile" component={ProfileScreen} />
</Tab.Navigator>
);
}
Then the tab navigator can be a screen of your stack navigator:
return (
<NavigationContainer>
<Stack.Navigator
initialRouteName="Login"
screenOptions={{headerShown: false}}>
{user ? (
<>
<Stack.Screen name="Tabs" component={TabNavigator} initialParams={{user: user}}/>
</>
) : (
<>
<Stack.Screen name="Login" component={LoginScreen} />
<Stack.Screen name="Registration" component={RegistrationScreen} />
</>
)}
</Stack.Navigator>
</NavigationContainer>
);
If you need access to user from inside HomeScreen you can pass it using down using initialParams the same way it was passed down to the TabNavigator. If you don't want to keep passing stuff down like this you could try the Context api.
I removed the Login screen in the above example, because I assumed this was a mistake as you already have a Login screen defined for when you don't have an authenticated user.