Fix Error: The component for route 'Home' must be a React component
Try with:
Home: {
screen: () => <HomeScreen/>,
},
I think that react is having a problem figuring out what to import
Since you're exporting one thing by default
You should replace
import { HomeScreen } from './screens/HomeScreen';with
import HomeScreen from './screens/HomeScreen';
I think that if you change this line:
import { HomeScreen } from './screens/HomeScreen';
to:
import HomeScreen from './screens/HomeScreen';
(i.e. removing the braces around HomeScreen
) then it will work. Because you used export default
in the HomeScreen
component's source file, you don't need the destructuring on the import
. This is attempting to access a variable called HomeScreen
on the component, which is resolving to undefined
and causes the error you saw.
Alternatively, you can remove the default
from export default
and keep the import
the same. I personally prefer removing the braces as the code looks cleaner.
There's also a missing closing brace on this line:
import { JoinScreen from './screens/JoinScreen';
But I assumed that was a typo ;)