Integrating React Native VideoSDK with Expo

Introduction

This guide details integrating VideoSDK seamlessly into your Expo project. Expo is a popular framework for building cross-platform mobile applications using React Native.

info

Our SDK utilizes native code and cannot be directly used in the Expo Go app. However, you can leverage the expo-dev-client library to run your Expo app with a development build for testing purposes.

Prerequisites

• Node.js and npm (or yarn) installed on your system.

Creating a New Expo Project

1. Open your terminal and run the following command to create a new Expo project:

npx create-expo-app my-video-app

Replace my-video-app with your desired project name.

2. Navigate to your project directory:

cd my-video-app

Installing the VideoSDK

Use the following commands to install the VideoSDK and its dependencies:

npx expo install @videosdk.live/react-native-sdk
npx expo install @videosdk.live/react-native-webrtc
npx expo install @videosdk.live/react-native-incallmanager
npx expo install @videosdk.live/react-native-foreground-service
npx expo install @videosdk.live/expo-config-plugin
npx expo install @config-plugins/react-native-webrtc

Adding Configuration Plugins

Update your app.json file to include the configuration plugins:

{
  "expo": {
    // ...
    "plugins": [
      "@videosdk.live/expo-config-plugin",
      [
        "@config-plugins/react-native-webrtc",
        {
          "cameraPermission": "Allow $(PRODUCT_NAME) to access your camera",
          "microphonePermission": "Allow $(PRODUCT_NAME) to access your microphone"
        }
      ]
    ]
  }
}

• This adds the @videosdk.live/expo-config-plugin and @config-plugins/react-native-webrtc plugins.
• The @config-plugins/react-native-webrtc plugin configuration optionally allows you to customize permission request messages for iOS.

Registering Services

In your project's main App.js file, register the VideoSDK services:

import { register } from "@videosdk.live/react-native-sdk";
import { registerRootComponent } from "expo";

// Register VideoSDK services before app component registration
register();
registerRootComponent(App);

export default function App() {}

Troubleshooting: Expo 50+ Compatibility

Expo versions above 50 use event-target-shim@5, which conflicts with react-native-webrtc's dependency on event-target-shim@6. To resolve this:

if project doesn't have metro.config.js file, then create a new metro.config.js file and paste below code.

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

const { getDefaultConfig } = require("expo/metro-config");
const resolveFrom = require("resolve-from");

/** @type {import('expo/metro-config').MetroConfig} */
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("@videosdk.live/react-native-webrtc")
  ) {
    const updatedModuleName = moduleName.endsWith("/index")
      ? moduleName.replace("/index", "")
      : moduleName;

    // 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,
      updatedModuleName
    );

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

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

module.exports = config;

Quickstart Example

Refer to the code example Expo App Example for a detailed illustration of the integration process.