Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

this error appear when i run my app: Error: Element 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. #12

Open
jasonleewimi opened this issue Jan 13, 2021 · 3 comments

Comments

@jasonleewimi
Copy link

No description provided.

@jasonleewimi
Copy link
Author

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

const getFonts = () => {
return 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 (

);
}else {
return(
<AppLoading
startAsync = {getFonts}
onFinish = {() => setFontsLoaded(true)}
/>
);
}
}`

@furkanbk
Copy link

furkanbk commented Mar 1, 2021

Hello. Please type this in the command pannel:
expo install expo-app-loading
Also, do not destructure AppLoading while importing. Use:
import AppLoading from 'expo-app-loading';
Finally, do not forget onError prompt of AppLoading. Use it like this:
<AppLoading startAsync = {getFonts} onFinish = {() => setFontsLoaded(true)} onError={() => console.log('error')} />

@efosblack
Copy link

efosblack commented Dec 20, 2023

use this code in your App.js file instead after pasting your custom fonts in your assets/fonts folder.

import { useCallback } from 'react';
import { useFonts } from 'expo-font';
import * as SplashScreen from 'expo-splash-screen';
import Home from './screens/home';
import {View} from 'react-native';

SplashScreen.preventAutoHideAsync();

export default function App() {
const [fontsLoaded, fontError] = useFonts({
'Nunito-Bold': require('./assets/fonts/Nunito-Bold.ttf'),
'Nunito-Regular': require('./assets/fonts/Nunito-Regular.ttf'),

});

const onLayoutRootView = useCallback(async () => {
if (fontsLoaded || fontError) {
await SplashScreen.hideAsync();
}
}, [fontsLoaded, fontError]);

if (!fontsLoaded && !fontError) {
return null;
}
return (



);
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants