Stack nested inside Material Bottom Tab dont show the content when you navigate the second time (React Navigation v6)

Question

Problem:

When I navigate to the Stack inside the Material Bottom the first time, all works fine, after that you change tab and when you return the content don't render any more.

Expected behavior:

Every time you select the tab the Stack must be render. In other words, I am able to see the content of the Stack inside the Tab every time I navigate to the Tab.

package	version
@react-navigation/native	6.0.6
@react-navigation/material-bottom-tabs	6.0.9
@react-navigation/native-stack	6.2.5
react-native-safe-area-context	3.3.2
react-native-screens	3.8.0
react-native	0.64.2
expo	43.0.0

Answer 1

Faced the same problem.

Found solution here: https://github.com/software-mansion/react-native-screens/issues/1197#issuecomment-993682256

You should wrap your nested navigator with a View that has collapsable false. Example with my code:

const MealsNavigator = () => (
    <NavigationContainer>
        <TabNavigator />
    </NavigationContainer>
)

const TabNavigator = () => (
    <Tab.Navigator initialRouteName="Meals" {...TabProps} >
        <Tab.Screen name="Meals" component={StackNavigator} options={{ headerShown: false, tabBarIcon: ({ color }) => (<Ionicons name='ios-restaurant' size={24} color={color} />), tabBarColor: Colors.primaryColor }} />
        <Tab.Screen name="Favorites" component={FavoritesScreen} options={{ tabBarIcon: ({ color }) => (<Ionicons name='ios-star' size={24} color={color} />), tabBarLabel: 'Favorites!', tabBarColor: Colors.accentColor }} />
    </Tab.Navigator>
)

const StackNavigator = () => (
    <View style={{ flex: 1 }} collapsable={false}>
        <Stack.Navigator initialRouteName="Categories" screenOptions={{
            headerStyle: { backgroundColor: Platform.OS === "android" ? Colors.primaryColor : '' }, headerTintColor: Platform.OS === "android" ? 'white' : Colors.primaryColor
        }} >
            <Stack.Screen name="Categories" component={CategoriesScreen} options={{ title: 'Meal Categories' }} />
            <Stack.Screen name="CategoryMeals" component={CategoryMealsScreen} options={({ route }) => ({ title: route.params.title })} />
            <Stack.Screen name="MealDetail" component={MealDetailScreen} options={({ route }) => ({ title: route.params.title })} />
        </Stack.Navigator>
    </View>
)