10

I',m making some changes to the text in my react native application: I need to specify Roboto light for paragraphs and Roboto Bold for titles. I need to have the same look of the text in both iOS and Android apps: so I need to make it work for both I tried this code line of code

text    : {
       fontFamily: 'sans-serif-light'
   },

but I get this error: enter image description here

I tried this type from the official documentation and it's working fine

title   : {
       fontFamily: 'Cochin'
   },

--> So I think the problem is in the Roboto font family itself. Any help?

Neeraj Sewani
  • 3,952
  • 6
  • 38
  • 55
user3521011
  • 1,481
  • 5
  • 20
  • 35

6 Answers6

11

To add custom fonts to your app store all your ttf files in a directory. Add the following code to your package.json file.

"rnpm": { "assets": [ "./fonts" // yours fonts directory ] }

Then run react-native link To use the font use the same name on the ttf file in fontFamily.

Roman Akash
  • 842
  • 1
  • 6
  • 11
10

sans-serif-light and Roboto are Android-only fonts. You need different fonts for iOS. This repository has a list of fonts available for iOS and Android - https://github.com/react-native-training/react-native-fonts

You can use Platform.select() to target different fonts for each OS:

title: {
  ...Platform.select({
       ios: { fontFamily: 'Arial', }, 
       android: { fontFamily: 'Roboto' }
  })
}
RRikesh
  • 14,112
  • 5
  • 49
  • 70
  • Thank you ...So, there is no way to use it on both iOS and android (because i need to look both apps to be identical) .. i've read somewhere that i can add it manually .ttf file and then add in the package.json and then run react native link https://hiddentao.com/archives/2017/03/10/get-custom-fonts-working-in-react-native/ .. So may that be a solution ? – user3521011 May 04 '17 at 09:41
  • Yes, if you want the same font to be used, you could add it, else keep with the default fonts – RRikesh May 04 '17 at 09:46
7

I recently had the same issue . It turns out that rnpm command is deprecated and you can add custom assets using react native cli configuration. https://github.com/react-native-community/cli/blob/master/docs/configuration.md

To add fonts in the project:

  • Download the font and place it in the assets/fonts folder

Create a file in the project root directory as react-native.config.js Add the following code 

module.exports={
    assets:[
        "./assets/fonts"
    ]
}

Run react-native link

Run the project : npx react-native run-ios

Note: if build failed for IOS, open xocde workspace settings and change the build system to Legacy Build System.

Tanver Hasan
  • 1,687
  • 13
  • 12
5

Setup Roboto for both Android/iOS:

Usage

As Roboto is the default font family for Android. We can add Roboto to iOS and just use RRikesh solution omiting fontFamily for Android:

import {
  Platform,
  StyleSheet,
} from 'react-native'

const stylesByPlatform = Platform.select({
  ios: { fontFamily: 'Roboto' },
  android: { },
})

export default StyleSheet.create({
  text: {
    ...stylesByPlatform,
    color: '#000000',
  },
})

Setup

For iOS we need to add Roboto fontFamily:

  1. Download Roboto font from Google Fonts
  2. Add it to your assets folder ./assets/fonts/Roboto

  3. Add assets folder to your package.json:

    {
  ...
  "rnpm": {
    "assets": [
      "./assets/fonts"
    ]
  }
}

  4. Run: react-native link (it links ttf files on iOS and copy them on Android)

  5. Remove Roboto files added in android/app/src/main/assets/fonts
  6. Rebuild your app and .

I really don't know why this type of content is not in official docs. :(

Erick M. Sprengel
  • 1,921
  • 1
  • 17
  • 20
3

If it can help, I had a similar issue. Using "react-native link" did indeed referenced the fonts in "Build Phases > Copy Bundle Resource", but it didn't add anything to the Info.plist file.

Adding the fonts in Info.plist solved the issue.

<key>UIAppFonts</key>
<array>
    <string>Roboto-Black.ttf</string>
</array>
Benoit
  • 1,922
  • 16
  • 25
0

for react-native +v0.69, npx react-native link will produce an error. If you are using this version of react-native the solution is;

  1. npm i react-native-asset or yarn add react-native-asset

  2. create a react-native.config.js file in the root folder of your project.

  3. Add the following to the file

    module.exports = { project: { ios: {}, android: {}, }, assets: ['./assets/fonts/'], };

  4. create a assets/fonts folder at the root of your project.

  5. then in the terminal, run npx react-native-asset.

That should solve your problem.

NB: As of rn-v0.69, react-native link has been discontinued and replaced with autolinking, but this feature doesn't work with adding custom fonts to your project so react-native-asset provides the same fixes as react-native link.

Bismark Amanor
  • 1
  • 1