Using Custom Fonts in Expo React Native Apps with Splash Screen Loading - useFonts Hook

hi everyone today I'm going to show you how to load up some custom fonts so what you're going to use is the Expo font and Expo splash screen packages Expo font has the use fonts hook which will use to load the font and to check whether the fonts have been loaded and we're also going to use Expo splash screen which is going to just sort of keep it on the splash screen until our fonts are loaded we've imported some fonts lemon love and milky coffee and it's worth noting the type ttf and OTF those are fonts that are able to be used on Android and iOS there's a full list of what types can be used on the Expo documentation I'll link that in the description below and you can actually get free fonts for commercial use online there are a few websites and if you check out the free for commercial use fonts and check out any licensing related to them you can find some that are free for commercial use so first up we're using that use fonts hook that I mentioned and what we're passing in there is basically a mapping of the font to where it can be found in the assets so we've got the um lemon love font and the Milky coffee font here and I just specify the path to the font file that fonts loaded variable will basically be whether the fonts have been loaded or not and if the fonts haven't been loaded you're going to want to return undefined um basically that's because if you have your text components trying to be displayed it's not going to work out because it hasn't loaded that font and it'll give you an error if you reload you can sort of see like a very brief time where there's nothing on screen and that's when that undefined is being returned but it's pretty hard to notice is but it's just kind of like a flash on the screen so now I'm going to show you how to use the splash screen and that's basically if your font's taking a while to load or if you've got lots of different assets to load then you might want to delay the splash screen hiding so it sort of just looks a bit more seamless and the user's not like why is there nothing on screen um so yeah I'll just um show you that and to do that I'm going to use use effect basically what use effect is going to do in this case is it's going to be called once basically like the component did Mount um life cycle function that was available in class components um and what I'm going to do inside that is I'm going to call this um prevent the default hiding of the splash screen so what I'm going to do is I'm just awaiting the splashcoin dot prevent autohide async and by doing that it's just not going to hide the splash screen okay so I forgot to pass this extra parameter which is um which which values will cause this use effect to run um I need an empty array because I only want it to run once so I'm just going to reload and you can see it's showing that loading screen and it's not going away um that's because I have prevented autohide async so how to get around this and actually hide it once the font's loaded is I'm going to add this else statement and I'm going to manually hide the splash screen once everything is loaded so you can see now once everything's loaded my text component shows on screen and now I'm going to show you how to actually use those fonts that we have loaded earlier so I've got this text component it's just going to be my default text component and I'm going to add a few more text components for each of my imported fonts so basically how you specify that you want to use your custom font is you just specify the style and you can use the font family style property and you just pass in whatever you've specified in the options you've passed to use fonts hook so I've got my live and love font and I've also got my milky coffee font you can apply any other styling you want to to the text like size color and it'll just apply the same way as if it was a normal font that you hadn't um imported and so yeah there's my milky coffee one I want to go ahead and save that you can see that I've got my custom fonts on screen so I hope that this has been a useful tutorial to to you and if it has please like And subscribe for more content or my code will be available on GitHub

Channel: MissCoding

Views: 10,822

Keywords: expo-fonts, useFonts hook, expo react native tutorial, expo react native, react native for beginners, react native tutorial, expo-splash-screen, import fonts expo react native, expo-fonts tutorial, useFonts tutorial

Id: viIkcDYSBrI

Length: 5min 45sec (345 seconds)

Published: Sat Oct 08 2022