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

Question

Hi I am starting to use react native, but I have problem using nativebase with expo. When using the code in the documentation this error appears: Element type is invalid: expected a string (for built-in components) or class / function (for composite components) but got: undefined. 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' [Here the error] (https://ibb.co/nQpBqYv)

import React from 'react';
import { AppLoading } from 'expo-app-loading';
import { Container, Text } from 'native-base';
import * as Font from 'expo-font';
import { Ionicons } from '@expo/vector-icons';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isReady: false,
    };
  }

  async componentDidMount() {
    await Font.loadAsync({
      Roboto: require('native-base/Fonts/Roboto.ttf'),
      Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
      ...Ionicons.font,
    });
    this.setState({ isReady: true });
  }

  render() {
    if (!this.state.isReady) {
      return <AppLoading />;
    }

    return (
      <Container>
        <Text>Open up App.js to start working on your app!</Text>
      </Container>
    );
  }
}

@ShivamJha I'm not really sure, it's an example from the nativebase documentation [docs.nativebase.io/docs/GetStarted.html ] — Bovver Boy
So, you have not defined <AppLoading />? That's why it is showing error? Make a component named <AppLoading /> containing just one line of <Text>. since you have not defined it, it is undefined, and hence the error — Shivam Jha
Replace line 2 with this >>>> import AppLoading from 'expo-app-loading'; — Alish Giri

Alish Giri Alish Giri · Accepted Answer · 2021-04-02T21:23:58

The problem is not with the nativebase. You actually need to correct the following import statement,

import { AppLoading } from 'expo-app-loading';

to the following,

 import AppLoading from 'expo-app-loading';

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

1 Answers