Use custom-font in React-Native

Question

I would like to use custom font in my app, but I keep getting error

[RCTLog][tid:0x78f70450][RCTConvert.m:581]>Unrecognized font family \'Roboto\'
         


        

Answer 1

If you are using Create React Native App, when running react-native link you will see this:

react-native link can not be used in Create React Native App projects. If you need to include a library that relies on custom native code, you might have to eject first. See https://github.com/react-community/create-react-native-app/blob/master/EJECTING.md for more information.

If all you are trying to do is to add custom fonts, instead of ejecting, you could use Expo, which is also included by default with CRNA. Essentially, you do:

await Font.loadAsync({
  'open-sans-bold': require('./assets/fonts/OpenSans-Bold.ttf'),
});

Also, you can only do ttf or otf formatted fonts, no ttc fonts: https://developer.apple.com/documentation/uikit/text_display_and_fonts/adding_a_custom_font_to_your_app

Here is a detailed doc from Expo: https://docs.expo.io/versions/latest/guides/using-custom-fonts