Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 483
user3521011 Avatar asked May 04 '17 09:05

user3521011


1 Answers

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' }
  })
}
like image 123
RRikesh Avatar answered Sep 29 '22 12:09

RRikesh