Integrating React Native SDK for iOS

The React Native SDK encapsulates our React JS SDK, streamlining dependency management for a more efficient development experience.

Step 1: Install the SDK.

The simplest way to get started is by installing the SDK in your application using the provided command:

Npm

npm install "@videosdk.live/react-native-sdk"

Yarn

yarn add "@videosdk.live/react-native-sdk"

Step 2: Install @videosdk.live/react-native-incallmanager to manage media-routes/sensors/events during a audio/video chat on React Native.

Npm

npm install "@videosdk.live/react-native-incallmanager"

Yarn

yarn add "@videosdk.live/react-native-incallmanager"

Step 3: Install all the dependencies via CocoaPods.

IMPORTANT: Make sure to use CocoaPods version 1.10 or higher.

$[sudo] gem install cocoapods

Step 4: Manually link react-native-incall-manager (if it is not linked automatically).

• Select Your_Xcode_Project/TARGETS/BuildSettings, in Header Search Paths, and add "$(SRCROOT)/../node_modules/@videosdk.live/react-native-incall-manager/ios/RNInCallManager"

Step 5: Include this in the Podfile of your react-native ios directory:

Podfile

pod 'react-native-webrtc', :path => '../node_modules/@videosdk.live/react-native-webrtc'

Step 6: Change the platform field of podfile to 12.0 or above.

You need to change the platform field in the Podfile to 12.0 or above because react-native-webrtc doesn't support iOS versions earlier than 12.0. Update the line: platform : ios, ‘12.0’.

Step 7: Install pods

Pod install

Step 8: Declare permissions in your Info.plist file.

ios/projectname/info.plist

<key>NSCameraUsageDescription</key>
<string>Camera permission description</string>
<key>NSMicrophoneUsageDescription</key>
<string>Microphone permission description</string>

Step 9: Register the services in the index page of your project.

React Native CLI

import { register } from '@videosdk.live/react-native-sdk';
import { AppRegistry } from 'react-native';
import { name as appName } from './app.json';
import App from './src/App.js';
​
// Register the service
register();

AppRegistry.registerComponent(appName, () => App);

Expo

import { register } from '@videosdk.live/react-native-sdk';
import App from './App';
import { registerRootComponent } from 'expo';

// Register the service
register();

registerRootComponent(App);