React Navigation `material-bottom-tabs` breaks nested Stack Navigators

Current behaviour

On Android, the tab content is not visible the second time the tab is viewed. This is when using @react-navigation/material-bottom-tabs, with a Stack Navigator nested within one of the tabs.

To reproduce:

1. Press the tab that contains the Stack Navigator. (The content will be visible at this point)
2. Press a different tab.
3. Press the first tab again, and nothing will be displayed.

The React Navigation docs said I should open an issue on this repo, and I believe the bug is related to @react-navigation/material-bottom-tabs. Let me know if is not the correct repo for this issue.

Expected behaviour

The content should always be displayed for the selected tab.

Code sample

import React from "react";
import { Button, Text, View, StyleSheet } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createMaterialBottomTabNavigator } from "@react-navigation/material-bottom-tabs";
import { createNativeStackNavigator } from "@react-navigation/native-stack";

const Tab = createMaterialBottomTabNavigator();
const Stack = createNativeStackNavigator();

// Top level "Bottom Tab" screens
function FirstTabScreen() {
  // THIS IS THE TAB THAT DOESN'T DISPLAY CORRECTLY
  return (
    <Stack.Navigator initialRouteName="StackOne">
      <Stack.Screen name="StackOne" component={StackScreenOne} />
      <Stack.Screen name="StackTwo" component={StackScreenTwo} />
    </Stack.Navigator>
  );
}
function SecondTabScreen() {
  return (
    <View style={styles.screen}>
      <Text>Second Tab!</Text>
    </View>
  );
}

// Inner "Stack" screens
function StackScreenOne({ navigation }) {
  return (
    <View style={styles.screen}>
      <Text>Stack One!</Text>
      <Button
        title="Go to Stack Screen Two"
        onPress={() => {
          navigation.navigate("StackTwo");
        }}
      />
    </View>
  );
}
function StackScreenTwo({ navigation }) {
  return (
    <View style={styles.screen}>
      <Text>Stack Two!</Text>
      <Button
        title="Go to Stack Screen One"
        onPress={() => {
          navigation.navigate("StackOne");
        }}
      />
    </View>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator initialRouteName="FirstTab">
        <Tab.Screen
          name="FirstTab"
          component={FirstTabScreen}
          options={{
            tabBarLabel: "FirstTab",
            tabBarIcon: "home-outline",
          }}
        />
        <Tab.Screen
          name="SecondTab"
          component={SecondTabScreen}
          options={{
            tabBarLabel: "SecondTab",
            tabBarIcon: "bell-outline",
          }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  screen: { flex: 1, justifyContent: "center", alignItems: "center" },
});

Screenshots (if applicable)

N/A

What have you tried

• I tested on iOS and the bug is not present.
• I downgraded to version 5.3.19 and the bug was no longer present.
• I found an old stackoverflow question that sounds similar, so maybe the same bug has returned?
  • I tried setting a height/width on the “stack” screens using screenOptions on the Stack.Navigator, but it had no effect.

Your Environment

software	version
android	12 (real device, I have not tested on an emulator)
react-native	0.64.3
react-native-paper	4.10.1
node	14.18.2
npm or yarn	yarn
expo sdk	43.0.2

Snacky Snack

https://snack.expo.dev/AWE08jYKr

[traviswimer]

@amirfrd if you haven’t figured it out yet, this bug has apparently been fixed if you upgrade to react-native >0.65.0 (I haven’t personally tested this yet though)

There is also a simple fix if you don’t want to upgrade: https://github.com/software-mansion/react-native-screens/issues/1197#issuecomment-993682256

Basically just wrap your stack navigator with <View style={{flex: 1}} collapsable={false}></View>

[github-actions[bot]]

Couldn’t find version numbers for the following packages in the issue:

• react-native-vector-icons
• npm
• yarn
• expo

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• react-native (found: 0.64.3, latest: 0.66.3)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?