Voximplant. Blog
Web developers have been using React JS for a while, this javascript library from Facebook has switched the way how many developers were building their apps. At some point React team determined that it would be excellent to let mobile developers use the same treatment 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 spectacle, multi-threaded code such as for pic 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/movie 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/movie call script check our Peer-to-peer movie talk tutorial. Accomplish the following steps to build the demo app:
, all required components will be installed automatically
-
Five. Read the instructions for installed react native modules (they will be placed into node_modules folder) , some of them will require extra steps. `react-native-voximplant` example:
-
1. In XCode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project’s name]`
-
Two. Go to `node_modules` ➜ `react-native-voximplant/ios` and add `VoxImplant.xcodeproj`
-
Three. 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`
-
Four. 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`.
-
Five. 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 fresh VoxImplantReactPackage() to the list returned by the getPackages() method
-
Two. Append the following lines to android/settings.gradle:
-
Four. And eventually, in android/src/main/AndroidManifest.xml add user permissions
Result
VoxImplant module for React Native offers the same functionality as the native SDK for iOS. Now react native developers can lightly embed real-time communications into their apps.
Using VoxImplant module for React Native
Voximplant. Blog
Web developers have been using React JS for a while, this javascript library from Facebook has switched the way how many developers were building their apps. At some point React team determined that it would be superb to let mobile developers use the same treatment 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 spectacle, multi-threaded code such as for photo 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/movie 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/movie call screenplay check our Peer-to-peer movie talk tutorial. Finish the following steps to build the demo app:
, all required components will be installed automatically
-
Five. Read the instructions for installed react native modules (they will be placed into node_modules folder) , some of them will require extra steps. `react-native-voximplant` example:
-
1. In XCode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project’s name]`
-
Two. Go to `node_modules` ➜ `react-native-voximplant/ios` and add `VoxImplant.xcodeproj`
-
Three. 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`
-
Four. 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`.
-
Five. 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 fresh VoxImplantReactPackage() to the list returned by the getPackages() method
-
Two. Append the following lines to android/settings.gradle:
-
Four. And eventually, in android/src/main/AndroidManifest.xml add user permissions
Result
VoxImplant module for React Native offers the same functionality as the native SDK for iOS. Now react native developers can lightly embed real-time communications into their apps.