React-native-vector-icons: Unable to load Custom font file on Android

[arjs1000]

Hi there,

I have created my own font file with custom SVG's following the documentation. This works absolutely fine for iOS. However when I try run the application on Android the font is not loaded correctly and the Icon's do not appear.

I am creating the Icon component as follows:

import { createIconSet } from 'react-native-vector-icons' 
import custConfig from './configIcon.json' // Configuration json for matching characters to SVG icons
const custFontFamily = 'mainframe-clients' // Name of font
const pathToFont = '../../../android/app/src/main/assets/fonts/mainframe-clients.ttf' // Android font path
const Icon = createIconSet(custConfig, custFontFamily, pathToFont) 

_Note: this _Icon_ component is then used anywhere a SVG icon should be shown in the project. By supplying the relevant name property._

Other config tasks

Added the following to package.json:

"dependencies": {
    "react-native-vector-icons": "^2.0.3",
    ....
    }

Successfully linked the assets folder to the react-native-icon lib using rnpm link

Included the following in app/build.gradle:

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

dependencies {
...
  compile project(':react-native-vector-icons')
}

Included the following in MainApplication.java for the Android project:

+ import com.oblador.vectoricons.VectorIconsPackage;

public class MainApplication extends Application implements ReactApplication {
....
  @Override
  protected List<ReactPackage> getPackages() {
     return Arrays.<ReactPackage>asList(
        new FabricPackage(),
       + new VectorIconsPackage(),
        new MainReactPackage()
       );
    }
....

}

Please let me know what I should do to load the icons correctly.

FYI, I am using React native version 0.30.0

[oblador]

Hey, the font path is relative to the android font folder, so try const pathToFont = 'mainframe-clients.ttf' instead.

[arjs1000]

Awesome, that did the trick!

Thanks for your quick response :)

[jordanmkoncz]

@oblador I ran into the same issue, I think the current docs are very unclear and most people would make this same mistake.

They currently say "Optionally pass the third fontFile argument for android support, it should be a path to the font file in you asset folder.", which doesn't say or imply that the path is relative to the Android fonts folder, i.e. android/app/src/main/assets/fonts/, and it also has a typo ("you" instead of "your").

I suggest changing this to the following:

Optionally pass the third fontFile argument for Android support, which is the path to the font file relative to the Android fonts folder, i.e. android/app/src/main/assets/fonts/. For example, if your custom font file is located at android/app/src/main/assets/fonts/Fontello.ttf, the fontFile argument would be 'Fontello.ttf'.