Font family Roboto light and bold in react native

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.

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. :(

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.

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' }
  })
}