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:
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:
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
}
...
}
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"
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