Comments (3)
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')} />
from react-native-tutorial.
`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)}
/>
);
}
}`
from react-native-tutorial.
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 (
);
}
from react-native-tutorial.
Related Issues (15)
- i have this error when i run my expo app
- this error appear when i run the code HOT 1
- TypeError: interpolate is not a function :(
- Running the app in the browser
- AppLoading component needs fixing HOT 1
- Navigation
- Error: Invariant Violation: requireNativeComponent: "RNGestureHandlerRootView" was not found in the UIManager. HOT 1
- Lesson 13:
- import error
- It seems like npm is unable to find the package.json file
- Setting up environment for react-native crash your machine HOT 1
- TouchableWithoutFeedback component breaks FlatList scrolling... HOT 3
- an issue in branches 😅😅😅😅
- Error when running expo init myproject on Windows machine
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-tutorial.