React Native Custom Fonts // Pro Tip

In this tutorial, we look at why you need to use custom font files with react native and how you can use custom font files for iOS and well and Android as simply as possible.
Thanks to all the channel supporters, I can create this full course for React Professionals looking to quickly level up to React Native.
-- React Native for Professionals --
Complete Playlist for Subscribers (free 🤗): • Professional React Native
Complete Playlist for Members (early release - no ads - 🙏🏻 for your support): • Members - React Native...
🏷 #basarat #TypeScript #JavaScript #React #ReactNative #Tutorial
👇 ❤️ Subscribe for MOORE ❤️ 👇
th-cam.com/users/basaratali?su...
🌹 Support 🌹
Join: / basaratali
~
/ basarat
github.com/basarat
basarat.com/

[@jonathanaplacador9803]

doesn't work

[@Vincetroid]

Thanks, it works, really straightforward. Do you think can also be done with babel?

[@malhartrivedi8365]

Thanks, it works, it was really handy

[@patresito]

My font wasn't working on Android and this is exactly why. Thanks a lot!

[@gleamofcolor]

It doesn't work. It throws error the font family is not a system font family and suggest to use font..loadasync

[@andrejkling3886]

All works very nice ... that´s great lesson 🔥💯 thank you

[@basarat]

Thanks 🫰 it’s great to see your comments, keep em coming 🌹🔥

[@starzzspace2003]

best explaanation , only content not time wasting. thanks you👌👌😃

[@user-gj5mz4xo3o]

doesnt work

[@mymy3031]

what happens if we have 2 kind of fonts?

[@crisbinjoseph-jt5me]

Thank you brother😊😊

[@abdullahisa7547]

thaaaaaaaaaaaaaaaaaaaaaaaaaaankssss sooooo muuuuuuuuuuuuuuuchhhh works

[@ajayvishwakarma2648]

Awesome Bro

[@Lovepreet-xs5qi]

Thank you Sir

[@RVKAWAAA]

thanks mate

[@roadtrpr]

Great. Font Size 60, now get the font sized on every type of screen, and handle phone font size systemsettings.
That's what I want to know. On some screens 60 is too big, and on other its too small. I want the same proportion on every screen. Can anyone help me with that ?

[@ibrahimali1926]

bro its not wroking for bold fontweight only working for regular font

[@zeeshanalikhan8258]

Hi! How can one setup it globally? I tried this way but its not ideal because you have to manually type fontFamily for each Text Input. Please make tutorial to setup it once globally as default. I have seen package name "react-native-global-font" but that wasn''t useful in my case. TIA

[@manuelcasares7270]

Just create a wrapper for that TextInput and add the fontFamily once

[@ferwchi]

It worked on iOS, but not on Android. Am I missing any step? Like changing something in gradle or any other config file?
The files are present on android/app/src/main/assets/fonts, but when I open Android Studio there's ANOTHER fonts folder on the same hierarchy level with some default fonts (I guess).

[@pujadey2771]

same here

[@ferwchi]

​@@pujadey2771 the way I solved it:
Separate the tff font files by normal/lighter/bold/etc... before doing the assets stuff, and name them according to their font names, but replace the spaces with underscore or hyphen (stick with one for consistency) for example Inter-SemiBold.ttf
Once they're included on android and ios, you create a theme or font file that exports the correct spelling for each platform:
```export default Platform.select({
android: {
...
INTER_SEMI_BOLD: 'Inter-SemiBold',
INTER_BOLD ....
ios: {
INTER_SEMI_BOLD: 'Inter SemiBold',
INTER_BOLD ...
```
After that you can import these constants and use them on your typography file or wherever you want
And here's a troubleshooting: if you done everything correct, but you still not getting your fonts on specific places, maybe you're using forbidden css properties, such as font-weight (that's why you split your font files on style and weight)

[@chan-te6re]

cool

[@Reyescult]

Man, the 'Font Full Name' saved by bacon. Thank you!

[@basarat]

Thanks for the comment 🙏🏻 I’m glad to be of service 😊

[@EntropyOnTheCrosshair]

fontFamily was not loaded through FontLoadAsync

[@wiaanduvenhage3082]

Hi! Thanks for the tutorial! But I'm getting an error "If this is a custom font, be sure to load it with Font.loadAsync. " So does this method not work anymore?

[@user-gj5mz4xo3o]

me too, did u fix this

[@kuhupandit7616]

same here, do you know how to fix this?

[@user-gj5mz4xo3o]

@@kuhupandit7616 I ended up switching to flutter, its much better than react native anyways

[@wiaanduvenhage3082]

@@user-gj5mz4xo3o Hi, yes. Refer to my response from @kuhupandit7616

[@luabfr]

Can you share the answer? @@wiaanduvenhage3082

[@rickcode22]

Sonora OS doesn't have the Full Name.

[@saulesau6004]

you're the best

[@basarat]

Just the kind of validation I love waking up to ❤️. Thank you 🤗🌹

[@ahmadnurahsan8162]

i cant do that on windows

[@TalhaKhan-uy3qc]

Brother can you make videos of react-native by using class method ? I think its a bit better and simple than functional method.

[@basarat]

Thanks for the comment ❤️
class components are not recommended for new React code!
One big reason: The greatest feature of modern react aka Hooks are not supported by classes

[@azharuddinmulla-pn2ym]

yes, right but point of view most of the company having legacy code base project (class base component)@@basarat

[@JohnSmith-co1zv]

Didn't work

[@mohammadumar443]

bhai ap jaisi videos banai ho tou kya kya learn krna pary ga related to video editing ?

[@basarat]

to set yourself for success you can get Final Cut Pro X (use a student bundle - one time payment for lifetime)
alternatively you can use adobe premier (I have used this in a while as it is a monthly subscription)

[@gobicorner]

brother please continue testing series on react native right after this

[@basarat]

Noted :) ❤️🌹

[@gobicorner]

@@basarat pakka sir ? bcz codevolution , yours provide very good react content , but there is need to react native a lot .

[@basarat]

@@gobicorner Its all a matter of time. The Professional JavaScript course (which is scheduled after the current Professional React course) is a lot of work, because I've really raised my own personal standards 🤗. But, react native testing is definitely something I can share a lot about when I get the time 🌹

[@gobicorner]

@@basarat thank you for reply..!!

[@CosmoVision1]

doest work

[@dcsalim4384]

Doesn't work 👎

[@megatronskneecap]

This video doesn't work. If you're using expo you need to use expo-fonts.

[@derboss66]

Guys. This method is outdated.

[@C5S6]

dog

[@basarat]

cat