Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. React-Native

Question

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?

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

Here is my App.js:

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 && !this.props.skipLoadingScreen) {
      return (
        <AppLoading
          startAsync={this._loadResourcesAsync}
          onError={this._handleLoadingError}
          onFinish={this._handleFinishLoading}
        />
      )
    } else {
      return (
        <View style={styles.container}>
          <StatusBar hidden />
          <AppNavigator />
        </View>
      )
    }
  }

  _loadResourcesAsync = async () => {
    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 => {
    // In this case, you might want to report the error to your error
    // reporting service, for example Sentry
    console.warn(error)
  }

  _handleFinishLoading = () => {
    this.setState({ isLoadingComplete: true })
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
})

I have installed all the necessary modules, reset the cache, checked the import statements, but nothing seems to work.

Answer 1

Please follow expo document: https://docs.expo.io/versions/latest/sdk/app-loading.

Replace

import * as AppLoading from 'expo-app-loading'

by

import AppLoading from 'expo-app-loading'

to resolve your problem.