Font family Roboto light and bold in react native - text

Question

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:
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?

Answer 1

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.

Answer 2

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

Answer 3

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.

Answer 4

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:
Download Roboto font from Google Fonts
Add it to your assets folder ./assets/fonts/Roboto
Add assets folder to your package.json:
{
...
"rnpm": {
"assets": [
"./assets/fonts"
]
}
}
Run: react-native link (it links ttf files on iOS and copy them on Android)
Remove Roboto files added in android/app/src/main/assets/fonts
Rebuild your app and 🎉.
I really don't know why this type of content is not in official docs. :(

Answer 5

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>

Answer 6

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;
npm i react-native-asset or yarn add react-native-asset
create a react-native.config.js file in the root folder of your project.
Add the following to the file
module.exports = { project: { ios: {}, android: {}, }, assets: ['./assets/fonts/'], };
create a assets/fonts folder at the root of your project.
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.