Fonts in React Native for Android vs iOS

howto

REACT NATIVE IOS vs ANDROID FONT USE

Tested for React Native 0.41+

IOS:
- Place the fonts in the assets and make sure they are bundled along
- On iOS, fontFamily in Text match the Font Family name as described in Font Book (macOS). Font weights can be specified exactly.

ANDROID:
On Android, there are two ways of using fonts:

METHOD 1: using the font family without, or with _bold or _bold_italic suffix. This requires your fonts to be named as follows `fontname_bold.ttf or otf`, `fontname_bold_italic.ttf or otf` etc. You can then access these fonts using `style={ fontFamily: 'Font Family Name', fontWeight: 'bold', fontStyle: 'italic'}.
Unfortunately this only works for these styles -- there is no light, semibold, black, etc.

METHOD 2: full font support. In this case, on Android, fontFamily in Text must EXACTLY match the FILENAME of the font file (OTF or TTF) and be placed in /assets/fonts. 
Font Weight MUST be set to '400' or less or it will break. The font weight should be set by specifying the correct file to use.

It is probably easiest to use a mapping like this and use that to set the fontFamily on your Text:

const ANDROID_MAPPINGS = {
    'Brandon Text': {
        100: 'BrandonTextLight',
        200: 'BrandonTextLight',
        300: 'BrandonTextLight',
        400: 'BrandonTextBold',
        500: 'BrandonTextBold',
        600: 'BrandonTextBold',
        700: 'BrandonTextBold',
        800: 'BrandonTextBold'
    },
    'Open Sans': {
        100: 'OpenSansLight',
        200: 'OpenSansLight',
        300: 'OpenSansLight',
        400: 'OpenSansRegular',
        500: 'OpenSansSemibold',
        600: 'OpenSansBold',
        700: 'OpenSansBold',
        800: 'OpenSansExtraBold'
    }
}

OVERALL it should be possible to submit a PR to RN to allow full font usage, but it would require the user mapping the various possibilities to the appropriate font files.
This is probably best done on the native side to preserve perf and allow for a unified API, and involve something like
```
.addFontFamily("Open Sans", "500", "OpenSansBold.ttf")
.addFontFamily("Open Sans", "600", "OpenSansBold.ttf")
.addFontFamily("Open Sans", "700", "OpenSansBold.ttf")
```

which would allow use such as
`<Text style={{ fontFamily: 'Open Sans', fontWeight: "700"}`

In addition we could define a mapping from things like `light` and `bold` to their stringy numeric counterparts.

References:
Source code here: https://github.com/facebook/react-native/blob/0.42-stable/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactFontManager.java
https://developer.android.com/reference/android/graphics/Typeface.html
http://stackoverflow.com/questions/19691530/valid-values-for-androidfontfamily-and-what-they-map-to