The Roboto font family fits lightly and boldly into the native

Question

I make some changes to the text in my own application: I need to specify Roboto light for paragraphs and Roboto Bold for headings. I need to have the same kind of text in apps for iOS and Android: so I need it to work for both I tried this line of code

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

but I get this error:

I tried this type from the official documentation and it works fine

title : { fontFamily: 'Cochin' },

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

Answer 1

, ttf . package.json.

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

react-native link , ttf fontFamily.

Answer 2

sans-serif-light Roboto - Android. iOS. , iOS Android - https://github.com/react-native-training/react-native-fonts

Platform.select() :

title: {
  ...Platform.select({
       ios: { fontFamily: 'Arial', }, 
       android: { fontFamily: 'Roboto' }
  })
}

Answer 3

, . "- " " > ", Info.plist.

Info.plist .

<key>UIAppFonts</key>
<array>
    <string>Roboto-Black.ttf</string>
</array>

Answer 4

Roboto Android/iOS:

Roboto - Android. Roboto iOS RRikesh, fontFamily Android:

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

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

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

Setup

Setup iOS Roboto fontFamily:

1. Roboto Google Fonts
2. ./assets/fonts/Roboto

3. package.json:

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

4. : react-native link ( ttf iOS Android)

5. Roboto, android/app/src/main/assets/fonts
6. 🎉.

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