Voximplant. Blog

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:

      1. cd VoximplantDemo
      2. wget https://github.com/voximplant/react-native-demo/archive/master.zip
      3. unzip -j master.zip
      4. rm -rf master.zip
      5. mkdir android/app/src/main/assets android/app/src/main/assets/fonts && cp Custom.ttf android/app/src/main/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. `react-native-voximplant` example:

      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 `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

              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
          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

          1. <uses-permission android:name="android.permission.CAMERA" />
          2. <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
          3. <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
          4. <uses-permission android:name="android.permission.RECORD_AUDIO" />
          5. <uses-permission android:name="android.permission.INTERNET" />
      6. 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.

Comments

  • Sebastián Lara

    Hi there!

    This can be used with android? (or only iOS?)

    • Alexey Aylarov

      It will work on Android soon, we are already testing VoxImplant SDK for React Native Android

  • I got this error when building {{ /…/AppDelegate.m:44:48: No visible @interface for ‘RCTRootView’ declares the selector ‘initWithBundleURL:moduleName:initialProperties:launchOptions:’}} please help

    • Please make sure that you have added all libs to your project. “No visible @interface” means that XCode can’t find a code corresponding to RCTRootView

      • thank for you response. I tried to upgrade RN to 0.14 and fixed that error. But another error have appeared `library not found for -lVoxImplantSDK` although I tried to remove then add libs again.

        • Make sure that in “Build Phases”, “Link Binary with Libraries” settings following files are added: GLKit.framework, libc++.dylib, libvoximplant.a и react-native-voximplant/VoxImplantSDK/libVoxImplantSDK.a

          Also check “Build Settings”, make sure “Header Search Paths” contains “$(SRCROOT)/../react-native/React” and “$(SRCROOT)/../../React”

  • Basanth Kumar Varma Alluri

    Thank for the great demo. I am getting following response when i am using react native or html module.
    callfailed{“name”:”Failed”,”call”:{“eventListeners”:{“Connected”:[null],”Failed”:[null],”Disconnected”:[null]}},”code”:404,”reason”:”Not Found”}

    Please suggest me.

    • Alexey Aylarov

      Looks like you don’t have application rule connected to VoxEngine scenario that works for a number you are trying to call

  • Robbie Moore

    Hey, does this module support PSTN calls?

  • Eldad Caspi

    Hi there, I’m getting a black screen on my preview camera on ios.
    Could you please sum up the latest status in regard to using your platform for developing a video chat app on ios and android using REACT NATIVE? Is it working? Is there any plan to update your github demos/apps/modules with the latest JS api?

    Many thanks in advance

    • Alexey Aylarov

      Hi, please set camera resolution using setCameraResolution function
      VoxImplant.SDK.setCameraResolution(480, 640);

      • Eldad Caspi

        Thanks for the rapid reply. I’ll try it today. Everything else should work? IOS and Android?

        P.S
        We really like your platform concept, it’s the easiest integration (with your Scenarios and Rules server side settings via your admin backend), keep up the good work!

        • Alexey Aylarov

          Yes, it should work. If you see some problem or bug – please report either on Github in issues, or write to our support

          • Eldad Caspi

            Hi there,
            I’m getting a black screen on my preview camera on ios again, have set it to 480,640, any clue? Thanks

          • Eldad Caspi

            Oh, your width and height were flipped, it works great with VoxImplant.SDK.setCameraResolution(640, 480);

            Thanks!

  • Steve Tran

    I got this error with ColorSwitch before login success

  • Harmanpreet singh

    Hi
    i am using this with android. when i start the app. it show the error. how i can handle it. https://uploads.disquscdn.com/images/03cd64cbc0127ba9b5e5dba798f6c7b12449df3e031c65f135a00ef6c9329812.png