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.

Add Stream's Video SDK and its peer dependencies

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 @notifee/react-native
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.
• @notifee/react-native - is used to keep calls alive in the background on Android.

Android Specific installation

Update the compileSdk, targetSdk and minSdk versions

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

buildscript {
    ext {
        ...
        minSdkVersion = 24
        compileSdkVersion = 34
        targetSdkVersion = 33
    }
    ...
}

INFO

We have to temporarily use targetSdkVersion 33 due to a lack of support for dynamically setting foreground service types in the notifee library. We are aware of the August 31, 2024 deadline for updating to targetSdkVersion 34 and we are actively working on adding support in the notifee library.

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
}

Disable desugaring

In android/gradle.properties add the following:

# This one fixes a weird WebRTC runtime problem on some devices.

android.enableDexingArtifactTransform.desugaring=false

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"

note

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" />

Optional peer dependencies

Some of the optional features we provide require additional dependencies to be installed in order to work properly.

Ringing flow

The ringing flow is a feature that allows you to render a native ringer when the app is in background/dead mode. To enable this feature you need to install the following dependencies:

• react-native-callkeep utilises CallKit (iOS) and ConnectionService (Android). SVRN's uses this dependency to render native ringers and handle accepting/declining a call when the app is in background/dead mode.
• @react-native-firebase/app and @react-native-firebase/messaging to receive notifications on Android.
• @react-native-voip-push-notification to receive notifications on iOS.

More about how to enable this feature can be found in our push notification guide.

Troubleshooting

Error: Super expression must either be null or a function

This occurs on RN 0.73+. React Native uses event-target-shim@5 which is not compatible with react-native-webrtc's dependency on event-target-shim@6. To fix this, you may need to add a redirection in your metro.config.js file:

const {getDefaultConfig} = require('@react-native/metro-config');
const resolveFrom = require("resolve-from");

const config = getDefaultConfig(__dirname);

config.resolver.resolveRequest = (context, moduleName, platform) => {
  if (
    // If the bundle is resolving "event-target-shim" from a module that is part of "react-native-webrtc".
    moduleName.startsWith("event-target-shim") &&
    context.originModulePath.includes("react-native-webrtc")
  ) {
    // Resolve event-target-shim relative to the react-native-webrtc package to use v6.
    // React Native requires v5 which is not compatible with react-native-webrtc.
    const eventTargetShimPath = resolveFrom(
      context.originModulePath,
      moduleName
    );

    return {
      filePath: eventTargetShimPath,
      type: "sourceFile",
    };
  }

  // Ensure you call the default resolver.
  return context.resolveRequest(context, moduleName, platform);
};

module.exports = config;

Reference: https://github.com/react-native-webrtc/react-native-webrtc/issues/1503

Android Only Error: Could not find any matches for app.notifee:core:+ as no versions of app.notifee:core are available.

This occurs on projects with a monorepo configuration. Notifee is unable to find the compiled AAR android library. You can do the following workaround in your android/build.gradle to mitigate this:

allprojects {
  repositories {
    maven { url '../../node_modules/@notifee/react-native/android/libs' }
  }
}

This will add the Notifee library to the list of repositories that Gradle will search for dependencies. Please note that the exact path will vary depending on your project's structure.

Reference: https://github.com/invertase/notifee/issues/808

Android Only Error: One of receiver_exported or receiver_not_exported

This occurs due to having targetSdk 34 in Android. This is a known issue in react-native-incall-manager library. You can temporarily workaround this by downgrading your targetSdk to 33 until this issue is resolved.

Reference: https://github.com/GetStream/stream-video-js/issues/1263