Migration Guide

Our team is glad to introduce a new version of React Native SDK – 1.0.0. If you're using any of previous versions (from now on "Legacy"), we recommend to start using the new version due to its new handy features:

  1. Extended control for audio devices and camera with the ability to handle events about new audio devices, audio device changes, camera errors
  2. Ability to indicate video directions on call creation or answering
  3. New APIs for mid-call operations: hold and start receive video during the call
  4. Promises support
  5. An easy way to subscribe to Voximplant React Native SDK events with on/off APIs instead of DeviceEventEmitter 
  6. Video resize modes for android
  7. Support for multiple video streams and easy control for them
  8. Endpoints, VideoStream and VideoView

This guide inherits the structure of the Using React Native SDK guide, showing what has changed in each section.

Add Voximplant React Native SDK to the project


Automatic install (React Native 0.60+)

CLI autolink feature links the module while building the app.


Automatic install

  • React Native 0.60+
    CLI autolink feature links the module while building the app.
  • React Native <= 0.59
    Run react-native link react-native-voximplant

It is required to add Java 8 support 

  1. Open the android/app/build.gradle file and add the following lines to the ‘android’ section: 
    compileOptions {
       sourceCompatibility JavaVersion.VERSION_1_8
       targetCompatibility JavaVersion.VERSION_1_8
  2. If you're using gradle version < 3.0.0, do this step and the next one OR run the gradle sync command in Android Studio, then follow the provided hints.
    Open the android/build.gradle file and update the Android plugin for gradle: 
    dependencies {
       // use the latest available version
       classpath 'com.android.tools.build:gradle:3.1.3'
  3. Open the android/gradle/wrapper/gradle-wrapper.properties file and edit the distributionUrl to gradle-4.4-all.zip: 



There were no classes, just:



Voximplant.Client is a singleton and the main class of the SDK that provides access to Voximplant’s functions, Voximplant.getInstance method is used to get its instance:

let clientConfig = {};
clientConfig.enableVideo = true; // Android only option
clientConfig.saveLogsToFile = true; // iOS only option
let client = Voximplant.getInstance(clientConfig);

We also replaced the VoxImplantClientConfig object with the brand new Voximplant.ClientConfig, which contains more options. Note that the settings are platform dependent, i.e., some parameters work only for iOS, others – for Android.

Connect and Login


Previously the connection to the Voximplant cloud looked like this:

VoxImplant.SDK.connect({connectivityCheck: false});

// result of connect
   () => {
       console.log('Connection successful’);

VoxImplant.SDK.login("user", "password");

// result of login
   (loginSuccessful) => {
       console.log('Login successful ' + loginSuccessful.displayName);

Note that the connectivityCheck option in Legacy was true by default.


Now React Native SDK supports promises, and currently, there is no need for DeviceEventEmitter.

Actually, you can use:

  • both promises and on/off API
  • only on/off API
  • only promises

to handle Voximplant events.

Once you got the Voximplant.Client class instance, you can call its methods to connect and login.

To check the status of the connection to the Voximplant cloud, you can use the new Client.getClientState method.

async function login() {
   try {
       let state = await client.getClientState();
       if (state === Voximplant.ClientState.DISCONNECTED) {
           await client.connect();
       let authResult = await client.login("userName", "password");
   } catch (e) {
       console.log(e.name + e.message);

Note that the connectivityCheck option now is false by default.

Make calls


The call processing was available via a unique call identification (call id).

// Make a video call – the second argument is true
VoxImplant.SDK.createCall("number", true, null, function(callId) {

   (callConnected) => {
       console.log('Call connected. Call id = ' + callConnected.callId);


Now there is the Voximplant.Call class with all methods for call management.

All events related to a call now are grouped in the Voximplant.CallEvents enum; you can subscribe to them via Voximplant.Call.on/off. The Client.call method has replaced both VoxImplant.createCall and VoxImplant.startCall methods; it also returns the created call as a promise. 


There is a difference between resolving the Client.call promise and handling Voximplant.CallEvents

If the promise is resolved, the SDK sends a call to the cloud. However, it doesn't mean that a call is connected; to catch this call state, subscribe to the CallEvents.Connected event.

If the promise is rejected, that indicates the issues in the application's code (e.g., a try to make a call without login to the Voximplant cloud); if the CallEvents.Failed event is triggered, that means a telecom-related issue (e.g., another participant rejects a call).

async function makeCall() {
   const callSettings = {
       video: {
           sendVideo: true,
           receiveVideo: true,
   // create and start a call
   let call = await client.call("number", callSettings); 
   call.on(Voximplant.CallEvents.Connected, _onCallConnected);
function _onCallConnected(event) {
   // 'event' here is the instance of
   // the Voximplant.CallEvents.Connected object;
   // use event.call to get the instance of Voximplant.Call

Receiving calls


Handling an incoming call:

   (incomingCall) => {
       const isVideo = incomingCall.videoCall;
       console.log(`Incoming call: is video ${isVideo}`);


To handle an incoming call, you have to subscribe to the ClientEvents.IncomingCall event, which contains the Voximplant.Call object. Additionally, now you have control over video directions:

client.on(Voximplant.ClientEvents.IncomingCall, _incomingCall);
function _incomingCall(event) {
   const callSettings = {
       video: {
           sendVideo: event.video,
           receiveVideo: event.video



Previously, the RemoteView component and callId were used to show remote video.


The Voximplant.Endpoint class represents any remote media unit in a call. When an endpoint is added, the appropriate event is triggered – CallEvents.EndpointAdded.

We added the event to catch when a remote video was added and removed. These events are in the Voximplant.EndpointsEvents enum; use Endpoint.on/off for subscribing.


The subscribing to the Voximplant.EndpointsEvents is strictly required in order to render a remote video in your application. See the next section for details on rendering.

call.on(Voximplant.CallEvents.EndpointAdded, _onCallEndpointAdded);

function _onCallEndpointAdded(event) {

function _onRemoteVideoStreamAdded(event) {
   this.setState({remoteVideoStreamId: event.videoStream.id});

Video streams and video views


There were two components for rendering of the local and remote video; video and its rendering were linked via the callid:

<VoxImplant.Preview style={styles.selfview} />

   callId={currentCallId} />


Now both local and remote renderings are performed via the VideoView component; video stream and its rendering are linked via VideoStream.id. It allows strictly define what video stream should be rendered and where. Moreover, we implemented the render scaling functionality for both platforms. You can pass scaleType through the VideoView component's props (possible values are SCALE_FIT, SCALE_FILL).

Due to the link between the VideoView component and video stream id, you have to handle the CallEvents.LocalVideoStreamAdded event to render local video.


Mid-call operations


Legacy API has a sendVideo API that enables or disables video during the call. It doesn't provide the changes to video status (successful or not, what was the error).



The new Call.sendVideo API is promise-based, so it either successfully resolves or provides the error code and description:

async function sendVideo(doSend) {
   try {
       await call.sendVideo(doSend);
   } catch (e) {
       // e.code is one of the Voximplant.CallError enum constants
       console.warn(`${e.code} ${e.message}`);

Audio device management


It is possible to enable/disable only speaker:



The device management is implemented in the separate module – Hardware.AudioDeviceManager. Current version supports not only speaker, but Bluetooth headset and wired headset; they are represented in the Hardware.AudioDevice enum. 


In case of success, an audio device changes and the AudioDeviceEvents.DeviceChanged event is triggered.

Camera management


The methods for camera management are VoxImplant.switchToCamera and VoxImplant.setCameraResolution.


The camera management methods are represented in the Voximplant.CameraManager class; the class provides the ability to handle the result of camera switch and camera errors (currently on Android only).


Legacy API support

Legacy API will be supported till the end of 2018; then it will be completely removed. The support includes only the bug fixes in the master branch; there will be no new functionality added.

How to continue using of Legacy API

In order to keep using Legacy API, please do the following:

  1. Change imports from 
    import VoxImplant from 'react-native-voximplant';
    import {
    } from 'react-native-voximplant';
  2. Replace all occurrences of
    1. VoxImplant.SDK to VoximplantLegacy
    2. VoxImplant.RemoteView to RemoteView
    3. VoxImplant.Preview to Preview
  3. Don't forget to add Java 8 support for Android