React Native Tutorial #22 - Custom Fonts in React Native CLI & Expo Projects

Поділитися
Вставка
  • Опубліковано 11 гру 2024

КОМЕНТАРІ • 67

  • @mashschool
    @mashschool  3 роки тому +1

    If you have any questions about this or request tutorials in this style, be sure to leave a comment below, and thank you for liking the video. 😉

  • @fellypsantos_
    @fellypsantos_ 3 роки тому +2

    That was so simple and functional! Thank you man!

  • @krishnakantmodani353
    @krishnakantmodani353 3 роки тому +6

    I've done exactly like you did...
    I'm getting this error in my Expo Project:
    fontFamily "Nunito_600SemiBold" is not a system font and has not been loaded through Font.loadAsync.
    - If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.
    - If this is a custom font, be sure to load it with Font.loadAsync.
    Please help...

    • @danaahmed90
      @danaahmed90 3 роки тому +2

      its not working on expo . expo wont read modules

  • @arfinchowdhuryarif
    @arfinchowdhuryarif 3 роки тому

    Great Tutorials Man Thank you

  • @hassanmurtaza3915
    @hassanmurtaza3915 2 роки тому

    Thanks man you save my time🙂

  • @leongvincent9294
    @leongvincent9294 3 роки тому

    Thank you ..all your videos explanation on react native CLI are very informative, clear and precise.

  • @rakeshpk4991
    @rakeshpk4991 2 роки тому

    Hi, Thanks for the video!

  • @salug1987
    @salug1987 3 роки тому

    your tutorials are the best free react native resource out there! They are amazing :) Thank you

  • @glaucovillasboas8212
    @glaucovillasboas8212 2 роки тому

    Thank you, Mash, helped me! =D

  • @FernandoHernandez-pz9im
    @FernandoHernandez-pz9im 3 роки тому

    awesome job bro! thanks a lot

  • @saurabrakshit405
    @saurabrakshit405 2 роки тому

    Liked it !

  • @fedecalciano7518
    @fedecalciano7518 3 роки тому

    Worked for me! Awesome job bro

  • @peachesmm
    @peachesmm 3 роки тому

    thank you so much for this tutorial!!!

  • @mfk8475
    @mfk8475 3 роки тому

    thanks you from Turkey :)

  • @leo8964
    @leo8964 2 роки тому

    Thanks for saving my life lol

  • @xiaotingshao3689
    @xiaotingshao3689 Рік тому

    what does do here? is any doc to check it? thx

  • @amanda2348-g9j
    @amanda2348-g9j 2 роки тому

    7:33 Can I replace "require" with "import"?

  • @Kevin-gn8sw
    @Kevin-gn8sw 2 роки тому

    thank you !!!

  • @carlasalazar9951
    @carlasalazar9951 2 роки тому

    excellent !!!

  • @digitalhdr7768
    @digitalhdr7768 2 роки тому +1

    nice

  • @dieterlevin2665
    @dieterlevin2665 Рік тому

    i can not link it 😞get a "error: unknown command 'unlink'". what can be a problem ? thx

  • @hainguyenviet809
    @hainguyenviet809 Рік тому

    I am a newbie learning React Native, I am still curious about how you came up with calling the command 'react-native link' ? Where do you get that instruction ? Pls let me know so that I can dive into it

  • @padaithalaivan
    @padaithalaivan 3 роки тому

    Every videos I liked before u start

  • @dimaboguzki2944
    @dimaboguzki2944 2 роки тому

    tnx

  • @asemmuhammad7922
    @asemmuhammad7922 3 роки тому

    how can i use font in multiple components?

  • @umairali2360
    @umairali2360 3 роки тому

    please make a detailed video on modal also. how can we open and close a modal and specially how can we close modal on touch/tap at any place on screen . thanks in advance

    • @mashschool
      @mashschool  3 роки тому

      you're welcome. Session 14 is about Modal.

  • @BradEllis-q4t
    @BradEllis-q4t Рік тому

    When I run:
    npx react-native link
    I get...
    error: unknown command 'link'

    • @walidbakhouya5176
      @walidbakhouya5176 10 місяців тому

      Hey I had the same prob try this instead npx react-native-asset

  • @sikandarchishty
    @sikandarchishty 3 роки тому

    How can I override font for whole app at once and not adding fontFamily to each Text component?

    • @mashschool
      @mashschool  3 роки тому +1

      You can create a custom component and define the font just for it. And then, work with the component you created instead of the default component.

    • @sikandarchishty
      @sikandarchishty 3 роки тому

      @@mashschool Hey, thank you for responding, I got it fixed by using "react-native-global-props" and it works great, thanks :)

    • @4rled
      @4rled 3 роки тому

      @@sikandarchishty react-native-global-props hasn't been maintained since 2018. so becarful

  • @pradyumnakubear8561
    @pradyumnakubear8561 2 роки тому

    I am getting merge debug assets failed could you please help me out?

  • @vantungpham159
    @vantungpham159 3 роки тому

    Thank you ..all your videos ! You can make a lot of videos about animation in react native tutorial from beginner to advance ?
    Thank so much

  • @moghulkant3722
    @moghulkant3722 3 роки тому

    link doesn't work:
    Accessing non-existent property 'padLevels' of module exports inside circular dependency
    any ideas about this error?

    • @mashschool
      @mashschool  3 роки тому

      Try run in administrator mode.

  • @mcooling74
    @mcooling74 3 роки тому

    I'm having such problems with this. Hope you can help. As far as I know, I've followed your video to the letter, using bare React Native with iOS. All I get is 'Unrecognisable font family' in the iOS Simulator. Then when I restart the Simulator I get a build failure with a huge stack trace, which as a beginner means nothing at all to me. Could you help please?

    • @mashschool
      @mashschool  3 роки тому

      I've explained this here:
      ua-cam.com/video/O5K0c6_xScw/v-deo.html

    • @mcooling74
      @mcooling74 3 роки тому +1

      thanks for your reply. I've checked the video. problem is I'm not using Xcode. I'm using webstorm

    • @mashschool
      @mashschool  3 роки тому

      The problem is with the font name. See the "Solve the font problem" section. Xcode not required.

    • @mcooling74
      @mcooling74 3 роки тому

      @@mashschool I tried that as well, to no avail. I may be doing it wrong though. So if I take Ubuntu-Regular.ttf for example. The file name is 'Ubuntu-Regular.ttf' in both assets/fonts and info.plist. When I open the font in Font Book, the PostScript Name is Ubuntu-Regular and Full Name is Ubuntu Regular. So in my stylesheet code I apply the 'Full Name' value, i.e. text: { fontSize: 18, fontFamily: 'Ubuntu Regular' }. I have not changed the Ubuntu-Regular.ttf file name in assets/fonts or info.plist. Is that correct, or have I missed any steps?

    • @mashschool
      @mashschool  3 роки тому

      @@mcooling74 Try the font name without -Regular, it might work.

  • @markmarchant9111
    @markmarchant9111 3 роки тому

    How do you do this with not a google expo font?

    • @mashschool
      @mashschool  3 роки тому

      At 07:08, I have explained how to use custom fonts in Expo.

    • @markmarchant9111
      @markmarchant9111 3 роки тому

      Did not work for me… says font is not recognized as a system font

  • @ilsochrist8199
    @ilsochrist8199 2 роки тому

    Awesome! ty! Cli is better than expo heheheh

  • @notchad2743
    @notchad2743 3 роки тому +1

    not working for expo

    • @mashschool
      @mashschool  3 роки тому +1

      If you used react navigation in the expo project, it may interfere with one of its dependencies.

    • @notchad2743
      @notchad2743 3 роки тому

      @@mashschool Yes, I used. However I don't have any errors. It changed nothing. When I tried to make a different project it works. I don't know why

  • @danaahmed90
    @danaahmed90 3 роки тому

    this is not working on expo

  • @Dralsoft
    @Dralsoft 2 роки тому

    This gives a warning:
    expo-app-loading is deprecated in favor of expo-splash-screen

  • @SLabs-my7vr
    @SLabs-my7vr 3 роки тому

    Bro, you should be unique. what is "programming with mash" , a variant of programming with mosh??😕

    • @mashschool
      @mashschool  3 роки тому

      Mash is actually a combination of my first and last name, which I also mentioned in the About section of the channel.

  • @teymurlacinligitara
    @teymurlacinligitara 2 роки тому +1

    if someone gets an error:
    [fonts/AntDesign.ttf] E:\projects
    eactNative\LesMash2\android\app\src\main\assets\fonts\AntDesign.ttf [fonts/AntDesign.ttf] E:\projects
    eactNative\LesMash2\android\app\build\intermediates\ReactNativeVectorIcons\fonts\AntDesign.ttf: Error: Duplicate resources
    then use npx react-native unlink react-native-vector-icons

  • @AnotherJoao
    @AnotherJoao 3 роки тому +1

    For those who are trying to use .ttf, try to use .otf, for me it worked