CODEWITHSUNDEEP
reactjstypescriptreact-native
Alvin Cheng
Alvin Cheng

Reputation: 427

React native error: JSX element type 'AppLoading' does not have any construct or call signatures?

I am creating a react native expo application and trying to import some custom fonts. I want the app to render a AppLoading component when the fonts are loading. However, when I insert it into the code and run it, it returns an error saying:

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;

Thanks!

Upvotes: 2

Views: 517

Answers (1)

Alex Wayne
Alex Wayne

Reputation: 187064

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

Upvotes: 1

Related Questions