Stack Navigator inside Drawer Navigator is giving error

Question

I am trying to use react-navigation(Version: 5.x) but I am getting an error while using nested navigation, ie using Stack navigation inside Drawer navigation. The error is:

Error: Couldn't find a 'component' or 'children' prop for the screen 'Home'. This can happen if you passed 'undefined'. You likely forgot to export your component from the file it's defined in, or mixed up default import and named import when importing.

import React, { Component } from 'react';
import Menu from './MenuComponent';
import Home from './HomeComponent';
import Dishdetail from './DishdetailComponent';
import { View, Platform } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import Constants from 'expo-constants';

const MenuStack = createStackNavigator();
const HomeStack = createStackNavigator();
const Drawer = createDrawerNavigator();

function MenuNavigator()
{
    return(
        <MenuStack.Navigator
            initialRouteName = "Menu"
            screenOptions = {{
                headerStyle: {backgroundColor: '#512DA8'},
                headerTintColor: '#fff',
                headerTitleStyle: {
                    color: '#fff'
                }
            }}
        >
            <MenuStack.Screen
                name = "Menu"
                component = {Menu}
                options = {{title: 'Menu'}}
            />
            <MenuStack.Screen
                name = "Dishdetail"    
                component = {Dishdetail}
                options = {{title: 'Dish Details'}}
            />
        </MenuStack.Navigator>
    );
}

function HomeNavigator()
{
    return(
        <HomeStack.Navigator
            screenOptions = {{
                headerStyle: {backgroundColor: '#512DA8'},
                headerTintColor: '#fff',
                headerTitleStyle: {
                    color: '#fff'
                }
            }}
        >
            <HomeStack.Screen name = "Home" component = {Home} options = {{title: 'Home'}}/>
        </HomeStack.Navigator>
    );
}

function MainNavigator()
{
    return(
        <NavigationContainer>
            <Drawer.Navigator
                screenOptions = {{
                    drawerBackgroundColor: '#D1C4E9'
                }}    
            >
                <Drawer.Screen name = "Home" Component = {HomeNavigator} options = {{ drawerLabel: 'Home' }}/>
                <Drawer.Screen name = "Menu" Component = {MenuNavigator} options = {{ drawerLabel: 'Menu' }}/>        
            </Drawer.Navigator>
        </NavigationContainer>
    );
}

export default function Main()
{
    return(
        <View style = {{ flex: 1, paddingTop: Platform.OS === 'ios' ? 0 : Constants.statusBarHeight }}> 
            <MainNavigator />
        </View>
    );
}

And this is the HomeComponent.js:

import React, { Component } from 'react';
import { View, Text } from 'react-native';

class Home extends Component
{
    constructor(props)
    {
        super(props);

    }

    render() {
        return(
            <View>
                <Text>Home Component</Text>
            </View>
        );
    }

}

export default Home;

I explored this site, and found that Home and Menu should be imported like this only, as I have written, because I exported them as export default Home;

I am new here, so if anything is wrong please help me with it.

Answer 1

Ok the issue is really simple you are using Component = {HomeNavigator} instead of component = {HomeNavigator} its not a capital c change that and it should work. Your exports are correct as well.