How to create and use many Tab Navigator in react native? - react-native

Question

I'm trying to create differents bottom tab navigator in a single application in react native.
At the moment I can create and use a single one properly, but I'd like to display another one when I've connected to the application by the authentification form.
Is it possible ?
Here is an example of my code that will help you to understand what I'd like to do if you didn't :
export default function AppNavigation() {
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="SignUp" component={SignUpFunction} />
<Tab.Screen name="SignIn" component={SignInFunction} />
</Tab.Navigator>
</NavigationContainer>
);
}
and I would like to create another one like :
export default function AppNavigation() {
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="SignUp" component={SignUpFunction} />
<Tab.Screen name="SignIn" component={SignInFunction} />
</Tab.Navigator>
<Tab.Navigator>
<Tab.Screen name="Profil" component={ProfilPageFunction} />
</Tab.Navigator>
</NavigationContainer>
);
}
My problem is that it is not possible having two Tab.Navigator
I don't find documentation talking about it on the internet. If you guys have one or are able to explain me how to do it would be awesome.

Answer 1

By mentioning 'Different tab navigators' I'll assume that you want to have tab navigators in different screens.
There are options to do this.
First one based on the tab names that you have provided, you are trying to have an authentication flow, the approach would be to render tabs based on the login state.
export default function AppNavigation() {
return (
<NavigationContainer>
{!isloggedIn?(<Tab.Navigator>
<Tab.Screen name="SignUp" component={SignUpFunction} />
<Tab.Screen name="SignIn" component={SignInFunction} />
</Tab.Navigator>):
(<Tab.Navigator>
<Tab.Screen name="Profil" component={ProfilPageFunction} />
</Tab.Navigator>)}
</NavigationContainer>
);
}
Here isloggedIn will come from your context or state or however you manage the state.
Second option is to have multiple screen in a stack navigator with tab navigators, this is called nesting navigators
inside each screen
function Home() {
return (
<Tab.Navigator>
<Tab.Screen name="Feed" component={Feed} />
<Tab.Screen name="Messages" component={Messages} />
</Tab.Navigator>
);
}
//inside the NavigationContainer
<Stack.Screen name="Home" component={Home} />
Both approaches would work