React Native Error: The component for route must be a React component-CodePudding

I'm trying to create a basic setup for react navigation, but for some reason, when I go to view the project, I get a blank screen and an error in terminal that says:

Error: The component for route 'screens' must be a React component. For example:

import MyScreen from './MyScreen';
...
screens: MyScreen,
}

You can also use a navigator:

import MyNavigator from './MyNavigator';
...
screens: MyNavigator,
}

I've looked at other Stack Overflow solutions, but none of them seem to apply in my case, so, is there something else I'm doing wrong here?

My App.js (Also importing fonts here, but these worked, it seems to be an issue with the routing)

import React, {useState} from 'react';
import * as Font from 'expo-font';
import AppLoading from 'expo-app-loading';
import Navigator from './routes/homeStack';

const getFonts = () => Font.loadAsync({
    'raleway-regular': require('./assets/fonts/Raleway-Regular.ttf'),
    'raleway-bold': require('./assets/fonts/Raleway-Bold.ttf')
  });
export default function App() {
  const [fontsLoaded, setFontsLoaded] = useState(false);
  
  if (fontsLoaded) {
    return (
      <Navigator />
    );
  } else {
    return (
      <AppLoading
        startAsync= {getFonts}
        onFinish= {()=> setFontsLoaded(true)}
        one rror= {()=> console.log('error')} 
      />
    );
  }
}

homeStack.js

import { createStackNavigator } from 'react-navigation-stack';
import { createAppContainer } from 'react-navigation';
import Home from '../screens/home';
import Scanner from '../screens/scanner';

const screens = {
    Home: {
        screen: Home
    },
    Scanner: {
        screen: Scanner
    },
};

const HomeStack = createStackNavigator({screens});
export default createAppContainer(HomeStack);

home.js

import React from 'react';
import { StyleSheet, View, Text, } from 'react-native';
import { globalStyles } from '../styles/global';

export default function Home() {
  return (
    <View style={globalStyles.container}>
      <Text style={globalStyles.titleText}>Home Screen</Text>
    </View>
  );
}

scanner.js

import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { globalStyles } from '../styles/global';

export default function Scanner() {
  return (
    <View style={globalStyles.container}>
      <Text>About Screen</Text>
    </View>
  );
}

My file directory

Any help would be much appreciated!

CodePudding user response：

The video you are following along with is really old and probably not up to date anymore. Please follow the installation guides and then follow along this guide. That should get you up and running in minutes.