Programming Tutorials

loadAsync() vs useFonts() in expo - react native

By: Karthik Gupta in React-Native Tutorials on 2023-04-13  

expo-font provides two methods for loading custom fonts in React Native: loadAsync() and useFonts(). Here are some key differences between the two:

  1. loadAsync() is an asynchronous method that returns a promise. It loads the font(s) and returns an object with the loaded fonts.

useFonts() is a synchronous hook that returns an array. It loads the font(s) and returns a boolean value indicating whether the fonts are loaded or not.

  1. loadAsync() allows you to load multiple fonts at once, whereas useFonts() can only load one font at a time.

  2. loadAsync() is more suitable for situations where you need to load the fonts dynamically or conditionally (e.g., based on user settings or screen size).

useFonts() is more suitable for situations where you want to load the fonts globally and use them throughout the app.

  1. useFonts() is a React hook, so it can only be used within a functional component.

loadAsync() can be used in both functional and class components.

In summary, if you need to load fonts dynamically or conditionally, use loadAsync(). If you want to load fonts globally and use them throughout the app, use useFonts().






Add Comment

* Required information
1000

Comments

No comments yet. Be the first!

Most Viewed Articles (in React-Native )

Start background location tracking after login in expo react native

use axios in Expo to call APIs

Remove all installed dependencies and install them again

react-native-background-job alternative in expo app

Some dependencies are incompatible with the installed expo version:

loadAsync() vs useFonts() in expo - react native

npm install vs npx expo install

Session variables in React Native - Expo

disable the back arrow in the header of a screen in a React Navigation Stack Navigator

'import' and 'export' may only appear at the top level - React Native

Error Handling in TextInput - React Native

expo-secure-store vs expo-file-system in expo - react native

expo-secure-store to store sensitive data securely in React Native

Layout direction property in React Native

set up a global error handler in React Native (expo)

Latest Articles (in React-Native)

Session variables in React Native - Expo

use axios in Expo to call APIs

Start background location tracking after login in expo react native

set up a global error handler in React Native (expo)

SafeAreaView in React Native

Some dependencies are incompatible with the installed expo version:

disable the back arrow in the header of a screen in a React Navigation Stack Navigator

react-native-android-location-services-dialog-box alternative in expo

Error Handling in TextInput - React Native

react-native-background-job alternative in expo app

'import' and 'export' may only appear at the top level - React Native

OpenType (OTF) vs TrueType (TTF)

loadAsync() vs useFonts() in expo - react native

expo-secure-store vs expo-file-system in expo - react native

Send push notifications to android/ios sample code using expo - react native