If you are not familiar with ReactJS or React Native , then we highly recommend that you read, these frameworks already have a significant impact on where the world of mobile and web application development is heading. Our article is about how to enable a web developer to make iOS applications with audio / video calls and other pleasures of the voximplant platform. Creating native modules for React Native is such an extensive topic that you can write about it endlessly and there are still a lot of materials about it on the network. When creating the module, we relied on a number of ready-made examples with github, which really helped not to dig in with this for centuries.

What is React Native

')

I suspect that the vast majority of readers Habra knows about it. But just in case: it is a framework from Facebook that allows you to create native iOS applications in javascript, while ReactJS is used to create the user interface. Which, in turn, creates native operating system widgets instead of HTML DOM. Moreover, the authors promise to do the same for Android in the future.

What is Native Modules

In React Native, there are already a number of ready-made modules that come with the framework and allow you to do a lot of useful things, but obviously not all that a mobile application developer may want, and here come native modules to help:

“Sometimes the corresponding module yet doesn’t need a corresponding module yet. If you want to use it, it can be javascript, it can be javascript, it can be javascript or

This is our case, we have a lot of pieces in the voximplant client SDK that will work normally only if they are written at a sufficiently low level: video / audio codecs, webrtc, srtp, ws, and other scary words. And developers of React Native applications are not very interested in this, they want to deal with a clear high-level javascript API, since all of their applications are almost continuous javascript / jsx. Packaging low-level code into the React Native module allows developers to focus on application development and not worry about magic under the hood.

Native module architecture

A native module can contain c / c ++ code, objective-c code, and javascript. In the low-level code, we carried the network interaction with our cloud (c, c ++, libwebrtc and a small handful of libraries on a trifle) and video display (objective-c). The high-level javascript code left the cloud wrapper and two React widgets: one for previewing your own video and the second for watching the interlocutor's video:







Technically, the division into low-level and high-level code is as follows: you create an objective-c class that inherits from the RCTBridgeModule class provided by React. Using RCT_EXPORT_METHOD type macros you specify interaction points with javascript code, while in objective-c code you can interact with the operating system, c / c ++ libraries, create native iOS widgets and do other useful and useful things.



A ready-made native module can be distributed in different ways, the easiest one is to collect the source code in the form of .npm package and publish it in the repository. In this case, to add a module to your project, you just need to do “npm install”, add the .xcodeproj and the assembled library (because users obviously don’t want to build libwebrtc with patches - something else is fun) and build your project.

Functional

In our case, everything is simple - the functionality of the module should repeat the functionality of voximplant mobile sdk, that is, support both audio and video calls through the platform, give the opportunity to turn on / off the loud speaker, microphone, change camera, etc. In general, there is no way to restrict the developer due to the fact that he chose the path of the warrior react native.

Using the module in React Native application

Installing the module looks quite simple, in the project directory we execute:

npm install react-native-voximplant@latest --save 

After that, open your project in Xcode, in the project navigator, right-click Add Files to , go to node_modules / react-native-voximplant and select VoxImplant.xcodeproj .











Next, in the Xcode project navigator, select the project, switch to the “Build Phases” tab, and in the “Link Binary with Libraries” section specify GLKit.framework , libc ++. Dylib , libvoximplant.a and react-native-voximplant / VoxImplantSDK / libVoxImplantSDK.a











In the “Build Settings” tab, we check that 'All' is selected (and not 'Basic'), find the Header Search Paths and make sure that there is $ (SRCROOT) /../ react-native / React and $ (SRCROOT) / ../../React and both are marked as “recursive”.



That's all, then we write our application that uses the connected module:







To simplify the task of familiarizing with the module, we made a demo application that can be taken from github and assembled by following the instructions on the page. The result is:

Conclusion

Many criticize React Native, speaking of the performance of javascript with respect to the “native” code. In fact, such technologies allow to combine the best of both worlds: high-level and concise javascript is used for application logic code, while low-level c / c ++ / objective-c code is used for libraries and speed-critical sections of logic. This approach allows you to evenly smear the complexity in parts of the application, avoiding its accumulation in one place - which often leads to over-complicated and unsupported code.



Questions, comments, criticism? We are traditionally ready to communicate.