React Native

Installation and usage of our React Native SDK is simple and involves the following steps:

Prerequisites

First things first, make sure you have set up the development environment for React Native. You can find the official guide here.

SDK Installation

In order to install the Stream Video React Native SDK, run the following command in your terminal of choice:

Terminal

yarn add @stream-io/video-react-native-sdk

Stream Video React Native SDK requires installing some peer dependencies to provide you with a great calling experience. You can run the following command to install them:

Terminal

yarn add @stream-io/react-native-webrtc \
   react-native-incall-manager react-native-svg \
   @react-native-community/netinfo
npx pod-install

So what did we install precisely?

@stream-io/video-react-native-sdk (SVRN) is Stream’s Video SDK which contains UI components, hooks and util functions that will enable audio/video calls.
@stream-io/react-native-webrtc is a WebRTC module for React Native, SVRN depends on this dependency, it’s components and utilities to render audio/video tracks and interact with the phone’s media devices.
react-native-incall-manager handles media-routes/sensors/events during an audio/video call.
react-native-svg provides SVG support to React Native, SVRN’s components and it’s icons are reliant on this dependency.
@react-native-community/netinfo - is used to detect the device’s connectivity state, type and quality.

Android Specific installation

Update the minSdk version

In android/build.gradle add the following inside the buildscript section:

buildscript {
    ext {
        ...
        minSdkVersion = 24
    }
    ...
}

Enable Java 8 Support

In android/app/build.gradle add the following inside the android section:

compileOptions {
	sourceCompatibility JavaVersion.VERSION_1_8
	targetCompatibility JavaVersion.VERSION_11
}

Optional: R8/ProGuard Support

If you require R8/ProGuard support then in android/app/proguard-rules.pro add the following on a new line:

-keep class org.webrtc.** { *; }

Declaring Permissions

Making video or audio calls requires the usage of the device’s camera and microphone accordingly. In both platforms, we must declare the permissions.

iOS

Add the following keys and values to Info.plist file at a minimum:

Privacy - Camera Usage Description - “{'<Your_app_name>'} requires camera access to capture and transmit video”
Privacy - Microphone Usage Description - “{'<Your_app_name>'} requires microphone access to capture and transmit audio”

You should replace {'<Your_app_name>'} (or also use your custom strings instead).

Android

In AndroidManifest.xml add the following permissions before the <application> section.

<uses-feature android:name="android.hardware.camera" />
<uses-feature android:name="android.hardware.camera.autofocus" />
<uses-feature android:name="android.hardware.audio.output" />
<uses-feature android:name="android.hardware.microphone" />

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.CHANGE_NETWORK_STATE" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.INTERNET" />

If you plan to also support Bluetooth devices then also add the following.

<uses-permission android:name="android.permission.BLUETOOTH" android:maxSdkVersion="30" />
<uses-permission android:name="android.permission.BLUETOOTH_ADMIN" android:maxSdkVersion="30" />
<uses-permission android:name="android.permission.BLUETOOTH_CONNECT" />

Permissions need to be granted by the user as well. Requests for Camera and Microphone usage are automatically asked when the stream is first requested by the app. But other permissions like BLUETOOTH_CONNECT in Android need to be requested manually. However, we recommend that all necessary permissions be manually asked at an appropriate place in your app for the best user experience.

We recommend the usage of react-native-permissions library to request permissions in the app.

Run on device

iOS

In iOS simulators, recording audio or video is not supported. So always test your app on an actual device for the best experience.

Android

In Android emulators, a static video stream can be sent and so it can be used for testing. However, we recommend that you always test your app on an actual device for the best experience.

New Architecture (Fabric)

The SDK’s native modules and views are compatible with the New Architecture and Bridgeless mode through the New Renderer Interop Layers. These layers are automatically enabled when you turn on the New Architecture in React Native 0.74 and above. We recommend that you use React Native 0.74+ if you are using the New Architecture with the SDK.

Troubleshooting

Introduction

Expo