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 Stream Video React Native SDK and its required dependencies to your project:

npx expo install @stream-io/video-react-native-sdk \
  @stream-io/react-native-webrtc \
  @config-plugins/react-native-webrtc \
  react-native-svg \
  @react-native-community/netinfo \
  expo-build-properties

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.
• @config-plugins/react-native-webrtc config plugin to auto-configure @stream-io/react-native-webrtc when the native code is generated (npx expo prebuild).
• 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.
• expo-build-properties is a config plugin for configuring the native build properties.

Android Specific installation

Update the minSdk version

In your app.json file add the following to the expo-build-properties plugin:

{
  "expo": {
    ...
    "plugins": [
      "expo-build-properties",
      {
        "android": {
          "minSdkVersion": 24
        }
      }
    ]
  }
}

Add config plugin

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

{
  "expo": {
    ...
    "plugins": [
      "@stream-io/video-react-native-sdk",
      [
        "@config-plugins/react-native-webrtc",
        {
          // add your explanations for camera and microphone
          "cameraPermission": "$(PRODUCT_NAME) requires camera access in order to capture and transmit video",
          "microphonePermission": "$(PRODUCT_NAME) requires microphone access in order to capture and transmit audio"
        }
      ]
    ]
  }
}

If Expo EAS build is not used, please do npx expo prebuild --clean to generate the native directories again after adding the config plugins.

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

GestureDetector must be used as a descendant of GestureHandlerRootView

Our SDK uses react-native-gesture-handler library if it has been installed for smooth gestures. To fix this error, wrap your entry point with or gestureHandlerRootHOC.

For example:

import { GestureHandlerRootView } from "react-native-gesture-handler";

export default function App() {
  return <GestureHandlerRootView>{/* content */}</GestureHandlerRootView>;
}

Error: Super expression must either be null or a function

This was a known issue in @stream-io/react-native-webrtc library.

It has been fixed on version 118.1.0 of the @stream-io/react-native-webrtc library.

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: [
              "$rootDir/../../../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