Home Manual Reference Source Repository
Manual » Installation

Getting Started

Android Setup

(Note: If your react-native version is 0.16+, For now can't support mrn)

Install mrn

npm install mrn --save

Install react-native-vector-icons

npm install react-native-vector-icons@0.8.5 --save

Setting Your Project For Using react-native-vector-icons

react-native-material-design requires react-native-vector-icons, so you should set your project for using it.

  • Copy the whole Fonts folder from node_modules/mrn to android/app/src/main/assets.

  • Edit android/settings.gradle to look like this:

rootProject.name = 'MyApp'

include ':app'

//Add the following two lines:
include ':react-native-vector-icons'
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
  • Edit android/app/build.gradle (note: app folder) to look like this:
apply plugin: 'com.android.application'

android {
    ...
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:23.0.0'
    compile 'com.facebook.react:react-native:0.12.+'

    // Add this line:
    compile project(':react-native-vector-icons')
}
  • Edit your MainActivity.java (deep in android/app/src/main/java/...) to look like this:
package com.myapp;

// Add this line:
import com.oblador.vectoricons.VectorIconsPackage;

import android.app.Activity;
....

public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {

private ReactInstanceManager mReactInstanceManager;
private ReactRootView mReactRootView;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    mReactRootView = new ReactRootView(this);

    mReactInstanceManager = ReactInstanceManager.builder()
        .setApplication(getApplication())
        .setBundleAssetName("index.android.bundle")
        .setJSMainModuleName("index.android")
        .addPackage(new MainReactPackage())

        // and this line:
        .addPackage(new VectorIconsPackage())

        .setUseDeveloperSupport(BuildConfig.DEBUG)
        .setInitialLifecycleState(LifecycleState.RESUMED)
        .build();

    mReactRootView.startReactApplication(mReactInstanceManager, "MyApp", null);

    setContentView(mReactRootView);
}
...
}