i am learning react native and i was importing a AppLoading to use custom fonts i a got this error:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a 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.

my app.js

import React, { useState } from 'react';
import * as Font from 'expo-font';
import Home from './screens/Home';
import { AppLoading } from 'expo-app-loading';

const getFonts = () =>
  Font.loadAsync({
    'nunito-regular': require('./assets/Fonts/Nunito-Regular.ttf'),
    'nunito-bold': require('./assets/Fonts/Nunito-Bold.ttf'),
  });

export default function App() {
  const [fontsLoaded, setFontsLoaded] = useState(false);

  if (fontsLoaded) {
    return <Home />;
  } else {
    return <AppLoading startAsync={getFonts} onFinish={() => setFontsLoaded} />;
  }
}

my Home.js

import React from 'react';
import { StyleSheet, View, Text } from 'react-native';

export default function Home() {
  return (
    <View style={styles.container}>
      <Text style={styles.titleText}>Home Screen</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 24,
  },

  titleText: {
    fontFamily: 'nunito-bold',
    fontSize: 18,
  },
});

CodePudding user response：

or you might have mixed up default and named imports.

This is the problem.

You import this:

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

The docs say to import this:

import AppLoading from 'expo-app-loading';