SIGN UP

Using VoxImplant module for React Native

React

Web developers have been using React JS for a while, this javascript library from Facebook has changed the way how many developers were building their apps. At some point React team decided that it would be great to let mobile developers use the same approach to build their iOS/Android apps and released React Native framework. Now javascript developers can build native apps for iOS & Android. React Native has some built-in components that can be used for application development, but since native app developers like to use a lot of different mobile OS features there is a way to create React Native modules and components:

“Sometimes an app needs access to platform API, and React Native doesn't have a corresponding module yet. Maybe you want to reuse some existing Objective-C, Swift or C++ code without having to reimplement it in JavaScript, or write some high performance, multi-threaded code such as for image processing, a database, or any number of advanced extensions.”

We like React Native and believe in its bright future, that's why we created react-native-voximplant module.

Building demo application

We have created demo application that lets you make/receive audio/video calls using the module and your VoxImplant account. Its code is available at https://github.com/voximplant/react-native-demo

To setup your VoxImplant account for a standard peer-to-peer audio/video call scenario check our Peer-to-peer video chat tutorial. Complete the following steps to build the demo app:

        1. Install React Native as described at

https://facebook.github.io/react-native/docs/getting-started.html#content

        2. Create new application using
react-native init VoximplantDemo
        3. Execute:
cd VoximplantDemo
wget https://github.com/voximplant/react-native-demo/archive/master.zip
unzip -j master.zip
rm -rf master.zip
mkdir android/app/src/main/assets android/app/src/main//sitecdn.voximplant.com/assets/fonts && cp Custom.ttf android/app/src/main//sitecdn.voximplant.com/assets/fonts/Custom.ttf
        4. Run
npm install
        , all required components will be installed automatically
        5. Read the instructions for installed react native modules (they will be placed into node_modules folder) , some of them will require additional steps.

iOS

  1. In XCode, in the project navigator, right click  `Libraries` ➜  `Add Files to [your project's name]`
  2. Go to `node_modules` `react-native-voximplant/ios` and add  `VoxImplant.xcodeproj`
  3. In XCode, in the project navigator, select your project. Add `libvoximplant.a, react-native-voximplant/VoxImplantSDK/libVoxImplantSDK.a, libc++.dylib or libc++.tbd, GLKit.framework` to your project's `Build Phases` `Link Binary With Libraries`
  4. Click the `VoxImplant.xcodeproj` in the project navigator and go the `Build Settings` tab. Make sure 'All' is toggled on (instead of 'Basic'). Look for `Header Search Paths` and make sure it contains  `$(SRCROOT)/../node_modules/react-native/React` and mark as `recursive`. Look for `Library Search Paths` and add $(SRCROOT)/../node_modules/react-native-voximplant/ios/VoxImplantSDK/lib`
  5. Right click on you project in XCode and select  **Add files to "_NameOfYourProject_"** and add `Custom.ttf` from the project folder
  6. Edit `Info.plist` and add a property called **Fonts provided by application** (if you haven't added one already) and type in the file you just added:

Android

  1. Open up android/app/main/java/[...]/MainActivity.java and add import com.voximplant.reactnative.VoxImplantReactPackage; to the imports at the top of the file. After that add new VoxImplantReactPackage() to the list returned by the getPackages() method
  2. 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')​
  3. Insert the following lines inside the dependencies block in android/app/build.gradle:
    compile project(':react-native-voximplant')
    ​
  4. And finally, in android/src/main/AndroidManifest.xml add user permissions
  5. Run your project (`Cmd+R`)

Result

VoxImplant module for React Native offers the same functionality as the native SDK for iOS. Now react native developers can easily embed real-time communications into their apps.

Add your comment

Please, enter valid email

Get your free developer account or talk with our sales team to learn more about Voximplant solutions
SIGN UP
Contact sales

Please complete this field.

Please complete this field.

Please complete this field.

Choose the solution

Please complete this field.

Please complete this field.