How to use Custom Fonts in React Native Expo

using custom fonts in reality native expo is really simple you first have to install expo font and expo uploading so we run expo install under command line if you have a font file you can add it to your project it is common practice to keep your font files in a font directory under assets otf and ttf are the font extensions accepted by expo if you have any other format you need to convert it to one of these inside the file you want to use the fonts we need to import the used font hook from expo font a used font hook will take an object argument and return a font loaded property which is a boolean inside the object we give our font a name and require the file by supplying the path now if the provided font loaded property is false we return the uploading component and we apply our fonts through the font's family property an even easier approach to getting custom fonts is to make use of google fonts and expo has a package just for that for a quick overview of the fonts available we can visit directory.vessel identifying a font that you like we copy the exposed package and install it with espo to actually use the font we copied the whole import statement that we've been provided with now we add the font name to the use font hook we can assign a more readable name to it and proceed to style our text with it for a more global application you can add it to the text property of your style sheet for an even more global access to your custom font you can create a text component style it and use it wherever you need text in your project once your custom fonts are working you need to ensure that your app size is not overly huge the video on your screen now will help you out so leave a like on this video and check it out

Channel: ToThePointCode

Views: 12,179

Keywords: react native, using custom fonts in react native, using custom fonts in react native expo, react native fonts, react native for beginners, react native custom fonts, react native custom fonts expo, custom fonts, react, react native tutorial, ios, react native tutorial for beginners, react tutorial, fonts, react native expo, tutorial, expo, react native ui, beginners, react vs react native, how to use custom fonts, coding, android, google fonts react native expo, react native components

Id: UBP0MfHCgo4

Length: 1min 37sec (97 seconds)

Published: Tue Nov 23 2021