Unrecognized font family 'Roboto' - React Native iOS

Question

When building iOS app on React Native, the simulator launches successfully but the app reports an error: "Unrecognized font family 'Roboto'", 'Roboto-Thin', or some variation.

Screenshot below:

Command I ran:

react-native run-ios

Answer 1

Like @theoretisch and @JoseVf mentioned before I have, please provide more information and what you've tried so far.

By putting in time to ask a question, you will increase the chance of getting a good answer quickly. Also please refer to How do I ask a good question? section for more info on that.

All that said, in the spirit of helping you out the following would fix your issue.

Use fontFamily: 'System' instead of fontFamily: 'Roboto'

Explanation You are trying to find Roboto font on iOS where it's not included by default in the operating system. On Android however, it is.

So by giving fontFamily: 'System' you are saying to React Native pick the default system font family thats default to the current platform your running on. For iOS this is going to be San Francisco and for Android this will be Roboto

Note that if you want to show Roboto font family on both platforms (your design might be as such) then you need to include that said font in your react native app bundle and then you wouldn't get this issue.

Answer 2

I had exactly same issue. Project building perfect in android and build failing in iOS.

To fix this I did these steps:

1) Added Roboto.tff file in <projectRoot>/assets/fonts folder

2) Added file in Xcode project Resources:

3) Added line <string>Roboto.ttf</string> in UIAppFonts key in Info.plist file

  <key>UIAppFonts</key>
  <array>
        ....
        <string>Roboto.ttf</string>
  </array>

4) Checked that file exists in Build Phases Copy Bundle Resources

Ran Product->Clean Build Folder, Restarted JS server, Rebuilt