Manual.md

Manual install

Voximplant

1. Make sure you have "React Native" project created with react-native init

2. cd into a project directory where package.json file is located.

3. Run npm install react-native-voximplant@latest --save

4. Open up android/app/main/java/[...]/MainApplication.java

   • Add import com.voximplant.reactnative.VoxImplantReactPackage; to the imports at the top of the file
   • Add new VoxImplantReactPackage() to the list returned by the getPackages() method

5. Append the following lines to android/settings.gradle:

   include ':react-native-voximplant'
   project(':react-native-voximplant').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-voximplant/android')
   

6. Insert the following lines inside the dependencies block in android/app/build.gradle:

   compile project(':react-native-voximplant')
   

7. And finally, in android/src/main/AndroidManifest.xml add user permissions

   <uses-permission android:name="android.permission.CAMERA" />
   <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
   <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
   <uses-permission android:name="android.permission.RECORD_AUDIO" />
   <uses-permission android:name="android.permission.INTERNET" />
   

Automatic install via rnpm

$ rnpm link

All events are described at http://voximplant.com/docs/references/mobilesdk/ios/Protocols/VoxImplantDelegate.html

react-native-button

$ npm install react-native-button --save

$ react-native link

react-addons-update

$ npm install react-addons-update --save

$ react-native link

react-native-vector-icons

Run: $ npm install react-native-vector-icons --save

$ react-native link react-native-vector-icons

Android

Option: With Gradle (recommended)

This method has the advantage of fonts being copied from this module at build time so that the fonts and JS are always in sync, making upgrades painless.

Edit android/app/build.gradle ( NOT android/build.gradle ) and add the following:

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

To customize the files being copied, add the following instead:

project.ext.vectoricons = [
    iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf' ] // Name of the font files you want to copy
]

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

Option: Manually

• Copy the contents in the Fonts folder to android/app/src/main/assets/fonts (note lowercase font folder).

Integrating library for getImageSource and ToolbarAndroid support

These steps are optional and only needed if you want to use the Icon.getImageSource function or using custom icons in the Icon.ToolbarAndroid component.

• Edit android/settings.gradle to look like this (without the +):

  rootProject.name = 'MyApp'
  
  include ':app'
  
  + 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.1"
    compile "com.facebook.react:react-native:+"  // From node_modules
  + compile project(':react-native-vector-icons')
  }

• Edit your MainApplication.java (deep in android/app/src/main/java/...) to look like this (note two places to edit):

  package com.myapp;
  
  + import com.oblador.vectoricons.VectorIconsPackage;
  
  ....
  
    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
        new MainReactPackage()
  +   , new VectorIconsPackage()
      );
    }
  
  }

Note: If you're using React Native (Android) <= 0.17, follow this instructions

Option: With rnpm

$ react-native link