CODEWITHSUNDEEP
textfontsreact-nativefont-familyroboto
user3521011
user3521011

Reputation: 1521

Font family Roboto light and bold in react native

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?

Upvotes: 10

Views: 46263

Answers (6)

Bismark Amanor
Bismark Amanor

Reputation: 1

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.

Upvotes: 0

Tanver Hasan
Tanver Hasan

Reputation: 1773

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.

Upvotes: 7

Erick M. Sprengel
Erick M. Sprengel

Reputation: 2219

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

Upvotes: 5

Benoit
Benoit

Reputation: 1921

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>

Upvotes: 3

Roman Akash
Roman Akash

Reputation: 872

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.

Upvotes: 11

RRikesh
RRikesh

Reputation: 14411

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

Upvotes: 10

Related Questions