React-native - tab navigator nested inside drawer

Question

So as title suggest I'm trying to create drawer navigator, which inside has a screen with bottomTabNavigator. Drawer navigator works fine but when I enter route containing tab navigator it's empty. Here's my code

Component with Drawer navigation:

//imports...
const Burger = ({ navigation }) => (
  <View style={styles.burger}>
    <TouchableOpacity onPress={navigation.toggleDrawer}>
      <MaterialCommunityIcons name="forwardburger" size={24} color="black" />
    </TouchableOpacity>
  </View>
);

const Home = ({ navigation }) => (
  <SafeAreaView style={styles.view}>
    <Burger navigation={navigation} />
    <HomeScreen />
  </SafeAreaView>
);

const Auth = ({ navigation }) => (
  <SafeAreaView style={styles.view}>
    <Burger navigation={navigation} />
    <AuthScreen />
  </SafeAreaView>
);

const Project = ({ navigation }) => (
  <SafeAreaView style={styles.view}>
    <Burger navigation={navigation} />
    <CreateProject />
  </SafeAreaView>
);

const Drawer = createDrawerNavigator();

function Navigation() { // main drawer navigation

  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component={Home} />
        <Drawer.Screen name="Project" component={Project} /> // screen with bottom tab navigation
        <Drawer.Screen name="Auth" component={Auth} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

export default function App() {
  return (
    <SafeAreaProvider>
        <Navigation />
    </SafeAreaProvider>
  );
}

Aaaaand component with bottom tab navigator:

const Tab = createBottomTabNavigator();

const CreateProject = ({ navigation }) => {
  console.log('navigation', navigation);
  return (
    <Tab.Navigator
      initialRouteName="Description"
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let icon;
          switch (route.name) {
            case 'Description': {
              const iconName = focused ? 'subtitles' : 'subtitles-outline';
              icon = (
                <MaterialCommunityIcons
                  name={iconName}
                  size={size}
                  color={color}
                />
              );
              break;
            }
            case 'Content': {
              const iconName = focused
                ? 'table-column'
                : 'table-column-plus-after';
              icon = (
                <MaterialCommunityIcons
                  name={iconName}
                  size={size}
                  color={color}
                />
              );
              break;
            }
            case 'Goals': {
              const iconName = focused ? 'target' : 'target-variant';
              icon = (
                <MaterialCommunityIcons
                  name={iconName}
                  size={size}
                  color={color}
                />
              );
              break;
            }
            default: {
              const iconName = focused ? 'cash-multiple' : 'cash';
              icon = (
                <MaterialCommunityIcons
                  name={iconName}
                  size={size}
                  color={color}
                />
              );
            }
          }

          return icon;
        },
      })}
      tabBarOptions={{
        activeTintColor: 'tomato',
        inactiveTintColor: 'gray',
      }}
    >
      <Tab.Screen name="Description" component={Description} />
      <Tab.Screen name="Content" component={Content} />
      <Tab.Screen name="Goals" component={Goals} />
      <Tab.Screen name="Prizes" component={Prizes} />
    </Tab.Navigator>
  );
};

export default CreateProject;

So. All drawer routes work fine, there is event stack navigator inside one of them and it also works fine. But when I enter "bottom tab route" there's nothing on the screen. No content from any of the sub routes, no bottom tab, nothing (no errors as well) Where am I making a mistake?

Answer 1

I found the solution. The problem is that I put Tab navigator inside SafeAreaView. That made impossible to see it. TabNavigator should be passed directly as DrawerNavigator screen