useFonts hook randomly failing to load fonts
Problem
Summary When I use the {useFonts, Abel_400Regular} hook from "@expo-google-fonts/abel" and {HankenGrotesk_300} from "@expo-google-fonts/hanken-grotesk" the Abe font will fail to load on my iOS Expo Go app and my Android studio emulator. However, when I add the function [code block] and save my editor the font loads fine. But when I reload each app from Expo Cli the font refuses to load again unless I remove the function, save in my editor, add the function, and save again. I had this issue earlier with locally saved .otf font files, so I believe the issue is with the { useFonts } hook. I've tried all fixes I can find online and nothing's helped. EDIT: I found out it's loading the fonts whenever I hot-reload after changing any code in the render return statement for a function component. I just added an if (fontsLoaded) {} and saved and it loaded the fonts. I'm guessing it's throwing the Font not loaded error slightly before the font gets a chance to load, but when I use a splashscreen to wait for it to load it gets stuck on the splashscreen forever. What platform(s) does this occur on? Android, iOS SDK Version ~48.0.9 Environment [code block] Minimal reproducible example Here is the minimum code I was able to reproduce the error with. When I change the return statement and hot-save the project, the render update fixes the font. [code block] Here is one of the screens the font is running on ```
Error Output
error slightly before the font gets a chance to load, but when I use a splashscreen to wait for it to load it gets stuck on the splashscreen forever.
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Solution: useFonts hook randomly failing to load fonts
`useFont` will randomly return false for loaded. It appears to be completely random. There must be some loading timing or thread issue Seeing this in Expo 49 currently, if you implemented `useFont` per the documentation: [code block] Your app will randomly hang on the splash screen on iOS. I haven't confirmed on Android. It's easy to reproduce this. Force quit 10-15 times and you will get t
Trust Score
5 verifications
- 1
`useFont` will randomly return false for loaded. It appears to be completely ra
`useFont` will randomly return false for loaded. It appears to be completely random. There must be some loading timing or thread issue
- 2
Seeing this in Expo 49 currently, if you implemented `useFont` per the documenta
Seeing this in Expo 49 currently, if you implemented `useFont` per the documentation:
- 3
Your app will randomly hang on the splash screen on iOS. I haven't confirmed on
Your app will randomly hang on the splash screen on iOS. I haven't confirmed on Android. It's easy to reproduce this. Force quit 10-15 times and you will get the app to hang on the splashscreen.
- 4
I also added a `setTimeout` to force the splash to hide because this is a pretty
I also added a `setTimeout` to force the splash to hide because this is a pretty bad issue to have out in the wild. It possible a fresh install will never get into the app, I've seen this a few times now.
Validation
Resolved in expo/expo GitHub issue #21885. Community reactions: 9 upvotes.
Verification Summary
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep