Couldn't find a 'component' or 'children' prop for the screen 'Home'. This can happen if you passed 'undefined'. Error with react-navigate v5?

Question

I'm trying to use react-navigate v5 to setup a stacknavigator for four screens. Currently I'm getting this error while trying to run the app:

My App.js:

import React from 'react';
import SafeAreaView from 'react-native-safe-area-view';
import MainStackNavigator from './navigation/Navigator';
import {LocalizationProvider} from './utils/localization/LocalizationContext';
import { NavigationContainer } from '@react-navigation/native';

const App: () => React$Node = () => {
    return (
    <NavigationContainer>
      <LocalizationProvider>
        <MainStackNavigator />
      </LocalizationProvider>
    </NavigationContainer>
    );
};

export default App;

My Navigator.js:

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {Map} from '../components/Map';
import {HomeScreen} from '../components/HomeScreen';
import {LanguageSettings} from '../components/LanguageSettings';
import {MarkerDetails} from '../components/MarkerDetails';
// import screens

const Stack = createStackNavigator();

function MainStackNavigator() {
    return (
    <Stack.Navigator
      initialRouteName='Home'>
      <Stack.Screen
        name='Home'
        component={HomeScreen}
        />
      <Stack.Screen
        name='LanguageSettings'
        component={LanguageSettings}
        />
      <Stack.Screen
        name='MainMap'
        component={Map}
        />
      <Stack.Screen
        name='MarkerDetails'
        component={MarkerDetails}
        />
    </Stack.Navigator> 
    );
}

export default MainStackNavigator;

And the home screen itself that's generating the error (the other screens do too):

import React, {useContext} from 'react';
import {
    View,
    Image,
    StyleSheet,
    Dimensions,
    ImageBackground,
    Layout,
    Text,
    Modal,
    Button
} from 'react-native';

const { width, height } = Dimensions.get('window');
const frameWidth = width;
const columnWidth = frameWidth / 3;

class HomeScreen extends React.Component {
    static navigationOptions = {};
    constructor(props) {
    super(props);

    this.state = {
        firstLaunch: null,
        condUpdate: null
    };
    }
///....///
    render() {
    return(
        <View
          style={{
          flex: 1,
          alignItems: 'center',
          justifyContent: 'center',
          margin: 20,
          }}>
        </View>
    );
    }
}

export default HomeScreen;

Not sure what's going on, would appreciate some help. Thanks!

Answer 1

This is happening because of the way you export and import HomeScreen.

If you export default you need to import the entire file. Your fix would be to change the import in the Navigator.js from:

import {HomeScreen} from '../' to import HomeScreen from '../'

---

A time you would use the destructuring import is with a workflow like so:

modules.export = {
    a: apple
    b: banana

}

----

import { a, b } from './fruits.jsx'

Answer 2

this is a problem with the export 

this error occurs when you define the components with default 
like this:-

    import Home from "./Home";
    import Room from "./Room";
    import Hall from "./Hall";
    
    export default{Home, Room, Hall};

so you have to define without it like this:-

    import Home from "./Home";
    import Room from "./Room";
    import Hall from "./Hall";
    
    export{Home, Room, Hall};