CODEWITHSUNDEEP
react-nativenative-base
Bovver Boy
Bovver Boy

Reputation: 5

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

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>
    );
  }
}

Upvotes: 0

Views: 6751

Answers (1)

Alish Giri
Alish Giri

Reputation: 2238

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';

Upvotes: 2

Related Questions