Expo

Our SDK is not available on Expo Go due to native code being required, but you can use the expo-dev-client library to run your Expo app with a development build.

Development Build

If you haven't already, prepare your project for expo development builds.

SDK Installation

Add the SDK and its required dependencies to your project:

Terminal

npx expo install @stream-io/video-react-native-sdk
npx expo install @stream-io/react-native-webrtc
npx expo install @config-plugins/react-native-webrtc
npx expo install react-native-incall-manager
npx expo install react-native-svg
npx expo install @react-native-community/netinfo
npx expo install @notifee/react-native

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 your app.json file add the following to the expo-build-properties plugin:

app.json

{
  "expo": {
    ...
    "plugins": [
      "expo-build-properties",
      {
        "android": {
          "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.

Add config plugin

Add the config plugin for @stream-io/video-react-native-sdk and react-native-webrtc to your app.json file:

app.json

{
  "expo": {
    ...
    "plugins": [
      "@stream-io/video-react-native-sdk",
      [
        "@config-plugins/react-native-webrtc",
        {
          // optionally you can add your own explanations for permissions on iOS
          "cameraPermission": "Allow $(PRODUCT_NAME) to access your camera",
          "microphonePermission": "Allow $(PRODUCT_NAME) to access your microphone"
        }
      ]
    ]
  }
}

note

The POST_NOTIFICATIONS and BLUETOOTH_CONNECT permissions need to be requested and granted by the user as well. PermissionsAndroid module can be used to request permissions in Android. For example, below is a way to request permissions in Android:

import { useEffect } from 'react';
import { PermissionsAndroid, Platform } from 'react-native';

useEffect(() => {
  const run = async () => {
    if (Platform.OS === 'android') {
      await PermissionsAndroid.requestMultiple([
        'android.permission.POST_NOTIFICATIONS',
        'android.permission.BLUETOOTH_CONNECT',
      ]);
    }
  };
  run();
}, []);

Troubleshooting

Error: Super expression must either be null or a function

This occurs on Expo 50+. 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('expo/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 Expo 49+ with a monorepo configuration. Notifee is unable to find the compiled AAR android library. You can do the following workaround in your app.json to mitigate this:

const config = {
  expo: {
    // ...
    plugins: [
      [
        'expo-build-properties',
        {
          android: {
            extraMavenRepos: ['../../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 for extraMavenRepos 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