I have a the following Tab Navigator
export const MainNavigator = () => { return (<Tab.Navigator><Tab.Screen name="Home" options={{ title: "Home" }} component={MainStackScreen} /><Tab.Screen name="Favorite" options={{ title: "Favorite" }} component={MainStackScreen} /></Tab.Navigator> );};
Where the (simplified) MainStackScreen
looks like this:
export const MainStackScreen = () => { return (<Stack.Navigator screenOptions={{ headerBackTitleVisible: false }}><Stack.Screen name="Home" component={HomeScreen} /><Stack.Screen name="Favorite" component={FavoriteHomeScreen} /><Stack.Screen name="Organisation" component={OrganisationScreen}/><Stack.Screen name="Leagues" component={LeaguesScreen}/><Stack.Screen name="Groupes" component={GroupesScreen}/></Stack.Navigator> );};
Basically I would like to have a different <Stack.Navigator> initialRouteName
depending on which tab is selected.
To give more context, the favorite tab allows user to skip some navigation steps you have on Home tab but let the user navigates threw the same screens. This is why these two tabs share the same stack.