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?