Skip to main content

Getting Started - React Native IOS SDK

React JS SDK wraps up out JavaScript SDK into usable hooks API. It simplifies the code for React Native SDK.

Install a React Native SDK in IOS#

Step 1: Install SDK from Npm or Yarn#

The easiest way to get started is by installing the sdk in your app.

npm install "@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#

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

Step 3: Install all the dependecies via CocoaPods#

IMPORTANT: Make sure you are using CocoaPods 1.10 or higher.

$[sudo] gem install cocoapods

Step 4: Manual linking (if react-native-incall-manager is not linked automatically)#

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

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

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

Step 6: Change platform field of podfile to 11.0 or above it#

You have change platform field of podfile to 11.0 or above it, as react-native-webrtc doesn’t support IOS < 11 platform :ios, ‘11.0’

Step 7: Install pods#

$ Pod install

Step 8: Declare permissions in Info.plist#

IOS/projectname/info.plist
<key>NSCameraUsageDescription</key><string>Camera permission description</string><key>NSMicrophoneUsageDescription</key><string>Microphone permission description</string>

Step 9: Register services at index page of project#

App.js
// Import the libraryimport { 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 serviceregister();AppRegistry.registerComponent(appName, () => App);

Use hooks API#

Our React JS SDK provides two important hooks API:

  • useMeeting : Responsible to handle meeting environment.
  • useParticipant : Responsible to handle Participant

Also, React Provider and Consumer to listen changes in meeting environment.

  • MeetingProvider : Meeting Provider is Context.Provider that allows consuming components to subscribe to meeting changes
  • MeetingConsumer : Meeting Consumer is Context.Consumer that subscribes to meeting changes.
note

Check out official example of React Native SDK implementation: videosdk-rtc-react-native-sdk-example