React native error: JSX element type 'AppLoading' does not have any construct or call sign-CodePudding

I am coding an react native app, and I am trying to import some custom fonts in the app. But, when the font is loading, I want to display the expo's loading screen or AppLoading Component and when I insert the component in the render tree it gives me this error: JSX element type 'AppLoading' does not have any construct or call signatures.

Code:

// Importing packages
import { StyleSheet, View } from "react-native";
import React, { useState } from "react";
import redux, { createStore } from "redux";
import { Provider } from "react-redux";
import reducers from "./redux/index";
import AppLoading from "expo";
import Router from "./Router";
import loadFonts from "./fonts";

// App component
const App:React.FC = () => {
  // Redux store
  const store: redux.Store = createStore(reducers);

  // State
  let [loaded, setLoaded] = useState(false);

  if (loaded) {
    // Render app
    return (
      <React.StrictMode>
        <Provider store={store}>
          <View style={styles.container}>
            {/* Router */}
            <Router />
          </View>
        </Provider>
      </React.StrictMode>
    );
  } else {
    return (
      <AppLoading startAsync={loadFonts} onFinish={() => setLoaded(true)} />
    );
  }
};

// Export app
export default App;

I have no idea how this error works please note that I have just came from reactjs so I might make some silly mistakes.

Thanks!

CodePudding user response：

import AppLoading from "expo";

That would assume that AppLoading is the default export of the entire expo package, which is definitely not the case.

As per the documention you need to import AppLoading like this:

import AppLoading from 'expo-app-loading';