Different Fonts for iOS and Android

[amitbravo]

I want to link Robot Font Family to Android and SF-Pro-Display/SF-Pro-Text to iOS . should I create separate subfolders in assets folder something like assets/ios/fonts , assets/android/fonts ? ... and link something like

react-native-asset -ios-a /assets/ios/fonts --ios-assets
react-native-asset -android-a /assets/android/fonts --android-assets

and package.json would be like ?

"rnpm": {
    "assets": [
      "assets/ios/fonts",
      "assets/android/fonts"
    ]
  }

[unimonkiez]

If you are using the -ios-a or -android-a you don't need to config those in your package.json.
Also you don't need to write --ios-assets twice, -ios-a is a short cut for it, same for android.

I would suggest adding those scripts to you prebuild script, for instance, you have a script npm run build:ios, so simply add this to your package json:

{
  "scripts": {
    "build:ios": "...",
    "prebuild:ios": "react-native-asset -ios-a /assets/ios/fonts",
    "build:android": "...",
    "prebuild:android": "react-native-asset -ios-a /assets/android/fonts",
  }
}

But font are used differently between android and ios, so you need different js files:
font.ios.js

export default {
  mainFont: 'SF-Pro-Display', // Need to be display name of the font
}

font.android.js

export default {
  mainFont: 'robot_700', // Need to be file name of the font
}

[unimonkiez]

I've also built a boilerplate which does it WAY more simple:
font.ios.js

import sfProDisplayFont from 'asset/ios/fonts/sf-pro-display.ttf';

export default {
  mainFont: sfProDisplayFont, // the import automatically links the file and gives you the display name back
};

font.android.js

import robotFont from 'asset/android/fonts/robot_700.ttf';

export default {
  mainFont: sfProDisplayFont, // the import automatically links the file and gives you the file name back
};

and in other files:
text.jsx

import React, { Component } from 'react';
import { Text } from 'react-native';
import fonts from 'src/font';

export default CustomText extends Component {
  render() {
    const { children } = this.props;

    return (
      <Text style={{ fontFamily: fonts.mainFont }}>
        {children}
      <Text>
    );
  }
}