Suppose I have a Tab Navigator where each tab contains nested stack navigators (refer to the code snippet below). My goal is to have the tab bar visible only on the default screen of each nested stack, similar to how the current Twitter Android app operates.
Although the documentation provides a method for hiding the tab bar in screens using tab bar hiding, I found it not suitable for my specific scenario. The V5 documentation suggests an alternative approach involving the tabBarVisible option, but advises against using it.
const Tab = createBottomTabNavigator()
const HomeStack = createStackNavigator()
const ProfileStack = createStackNavigator()
const HomeStackScreens = () => (
<HomeStack.Navigator initialRouteName="DefaultHomeScreen">
<HomeStack.Screen name="DefaultHomeScreen" component={DefaultHomeScreen} /> {/* Show tab only here (default) */}
<HomeStack.Screen name="OtherHomeScreen" component={OtherHomeScreen} /> {/* Hide tab here */}
</HomeStack.Navigator>
)
const ProfileStackScreens = () => (
<ProfileStack.Navigator initialRouteName="DefaultProfileScreen">
<ProfileStack.Screen name="DefaultProfileScreen" component={DefaultProfileScreen} /> {/* Show tab only here (default) */}
<ProfileStack.Screen name="OtherProfileScreen" component={OtherProfileScreen} /> {/* Hide tab here */}
</ProfileStack.Navigator>
)
const App = () => (
<NavigationContainer>
<Tab.Navigator initialRouteName="Home">
<Tab.Screen name="Home" component={HomeStackScreens } />
<Tab.Screen name="Profile" component={ProfileStackScreens} />
</Tab.Navigator>
</NavigationContainer>
)
How can I adjust the navigators and screens to achieve this desired behavior for my particular use case?
P.S. I am currently using React Navigation version v5, but considering migrating to v6. Both versions are acceptable solutions.