Rate this page:

React Native SDK

Voximplant Mobile SDK module for React Native lets developers embed real-time voice and video communication into React Native apps. The SDK uses WebRTC for media processing. You can start by downloading our demo application.

Supported React Native Versions: React Native >= 0.47.0

Add React Native SDK to the iOS project

For React Native 0.60+ you can rely on the CLI autolink feature that links the module while building the app. In case of React Native <= 0.59, you have to perform manual installation:

  • Make sure you have a React Native project created with react-native init ProjectName. IMPORTANT: React Native SDK uses native modules. If you use the create-react-native-app utility, our SDK won't work because the utility doesn't allow to include custom native modules in a project.
  • cd into a project directory where the package.json file is located.
  • Run npm install react-native-voximplant@latest --save
  • Open or create ios/Podfile and add the following dependencies: pod ‘react-native-voximplant’, path: ‘../node_modules/react-native-voximplant’ Please take a look at the demo project Podfile as an example.
  • Run pod install from <your_project>/ios/
  • Start XCode and open generated .xcworkspace
  • Check that there are no *.xcodeproj in the project navigation (see the Libraries section). If there are some, please remove them. Since React dependencies are added via Podfile, double integration of its modules may lead to unpredictable/incorrect behavior of an application.
  • Run your project (Cmd+R)

Add React Native SDK to the Android project

Automatic installation depends on version of React Native:

  • 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

Manual installation:

  • Make sure you have a "React Native" project created with react-native init. IMPORTANT: React Native SDK uses native modules. If you use the create-react-native-app utility, our SDK won't work because the utility doesn't allow to include custom native modules in a project.
  • cd into a project directory where the package.json file is located.
  • Run npm install react-native-voximplant@latest --save
  • It is required to add Java 8 support.
    • 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 }
    • 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' }
    • Open the android/gradle/wrapper/gradle-wrapper.properties file and edit the distributionUrl to gradle-4.4-all.zip: distributionUrl=https\://services.gradle.org/distributions/gradle-4.4-all.zip
  • Run the react-native link command to link react-native-voximplant Android dependency OR perform the following steps:
    • 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
    • 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' )
    • Insert the following line inside the dependencies block in android/app/build.gradle: implementation project(‘:react-native-voximplant’)

Initialization

To use React Native SDK, firstly make an import from the react-native-voximplant:

import

import

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

getInstance

getInstance

You can pass Voximplant.ClientConfig during initialization, like this:

clientConfig

clientConfig

The Voximplant.ClientConfig object can be passed to the Voximplant.getInstance method as an optional parameter. It lets you specify SDK settings; note that these settings are platform-dependent, i.e., some parameters work only for iOS, others – for Android.

Connect and Log In

Note that React Native SDK supports promises, i.e., you can handle any type of login independently since promises provide you an async/await construction. For example, if login with a password is handled with its own handler, whereas login with a token could be handled in another way. But still, events are supported too.

The Client.getClientState method is used to get the current state of connection to the Voximplant cloud and perform the actions according to it.

Connect and Log In

Connect and Log In