title: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. React-Native
body: <p>So I have been doing a lot of research as to why this isn't working and wasn't able to find anything.
  Does anyone know what this error pertains to?</p>
  <pre><code>Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
      
      Check the render method of `App`.
      
      This error is located at:
          in App (created by ExpoRoot)
          in ExpoRoot
          in RCTView (created by View)
          in View (created by AppContainer)
          in RCTView (created by View)
          in View (created by AppContainer)
          in AppContainer
      - node_modules\expo\build\logs\LogSerialization.js:160:14 in _captureConsoleStackTrace
      - node_modules\expo\build\logs\LogSerialization.js:41:26 in serializeLogDataAsync
      - ... 9 more stack frames from framework internals
  </code></pre>
  <p>Here is my <strong>App.js:</strong></p>
  <pre><code>import * as Icon from '@expo/vector-icons'
  import * as AppLoading  from 'expo-app-loading'
  import {Asset} from 'expo-asset'
  import * as Font from 'expo-font'
  import React from 'react'
  import { StatusBar, StyleSheet, View } from 'react-native'
  import AppNavigator from './navigation/AppNavigator'
  
  export default class App extends React.Component {
    state = {
      isLoadingComplete: false,
    }
  
    render() {
      if (!this.state.isLoadingComplete &amp;&amp; !this.props.skipLoadingScreen) {
        return (
          &lt;AppLoading
            startAsync={this._loadResourcesAsync}
            onError={this._handleLoadingError}
            onFinish={this._handleFinishLoading}
          /&gt;
        )
      } else {
        return (
          &lt;View style={styles.container}&gt;
            &lt;StatusBar hidden /&gt;
            &lt;AppNavigator /&gt;
          &lt;/View&gt;
        )
      }
    }
  
    _loadResourcesAsync = async () =&gt; {
      return Promise.all([
        Asset.loadAsync([
          require('./assets/images/splash.png'),
          require('./assets/images/icon.png'),
        ]),
        Font.loadAsync({
          //This is the font that we are using for our tab bar
          ...Icon.MaterialIcons.font,
          ...Icon.MaterialCommunityIcons.font,
          ...Icon.FontAwesome.font,
          ...Icon.Feather.font,
        }),
      ])
    }
  
    _handleLoadingError = error =&gt; {
      // In this case, you might want to report the error to your error
      // reporting service, for example Sentry
      console.warn(error)
    }
  
    _handleFinishLoading = () =&gt; {
      this.setState({ isLoadingComplete: true })
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
    },
  })
  </code></pre>
  <p>I have installed all the necessary modules, reset the cache, checked the import statements, but nothing seems to work.</p>