Getting this error for my App.js file in expo tab application

Question

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

import { AppLoading } from 'expo';
import { Asset } from 'expo-asset';
import * as Font from 'expo-font';
import React, { useState } from 'react';
import { Platform, StatusBar, StyleSheet, View } from 'react- 
native';
import { Ionicons } from '@expo/vector-icons';
import AppNavigator from './navigation/AppNavigator';

export default function App(props) {
  const [isLoadingComplete, setLoadingComplete] = useState(false);

  if (!isLoadingComplete && !props.skipLoadingScreen) {
    return (
      <AppLoading
        startAsync={loadResourcesAsync}
        onError={handleLoadingError}
        onFinish={() => handleFinishLoading(setLoadingComplete)}
      />
    );
  } else {
    return (
      <View style={styles.container}>
        {Platform.OS === 'ios' && <StatusBar barStyle="default" 
/>}
        <AppNavigator />
      </View>
    );
  }
}

async function loadResourcesAsync() {
  await Promise.all([
    Asset.loadAsync([
      require('./assets/images/robot-dev.png'),
      require('./assets/images/robot-prod.png'),
    ]),
    Font.loadAsync({

  'space-mono': require('./assets/fonts/SpaceMono-Regular.ttf'),
    }),
  ]);
}

function handleLoadingError(error) {

  console.warn(error);
}

function handleFinishLoading(setLoadingComplete) {
  setLoadingComplete(true);
} 

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

'''

this is my app.js '''

I expected my app to load, but instead I am getting this error.

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of App. - node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:5715:8 in createFiberFromTypeAndProps - node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:5743:14 in createFiberFromElement - ... 8 more stack frames from framework internals

I'm not sure I see anything wrong with this, it could be related to one of the components you are trying to render in App. Potentially AppNavigator, can you add AppNavigator file to the above or share a github repo? — Paddy Hamilton, Aug 20 '19 at 13:59
This might help - https://stackoverflow.com/questions/34130539/uncaught-error-invariant-violation-element-type-is-invalid-expected-a-string — vipulp, Aug 20 '19 at 14:07
@PaddyHamilton import React from 'react'; import {createAppContainer, createSwitchNavigator, createStackNavigator } from 'react-navigation'; import LoginScreen from '../screens/LoginScreen'; import MainTabNavigator from './MainTabNavigator'; const AppStack = createStackNavigator({ Home: MainTabNavigator}) const AuthStack = createStackNavigator({Login: LoginScreen}) const AppNavigator = createStackNavigator( { Login: LoginScreen}, { Main: MainTabNavigator}, ) export default createAppContainer(createSwitchNavigator( { Auth: AuthStack, App: AppStack, },)); — devikank, Aug 20 '19 at 15:27

score 1 · Accepted Answer · answered Aug 20 '19 at 15:43

It is some problem with import/export as error message indicates. File App.js looks good, probably error is in some another component.
Check that you use correct import and export with right pathes and do not miss export somewhere.
For export default MyComponent import should be import MyDefaultComponent from "./MyDefaultExport";
For export MyComponent import should be import { MyComponent } from "./MyComponent";

Getting this error for my App.js file in expo tab application

1 Answers1