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-incallmanager
npx expo install @videosdk.live/expo-config-plugin

Adding Configuration Plugins

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

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

• This adds the @videosdk.live/expo-config-plugin, which also allows optional configuration of permission request messages for iOS.

Adding Android Permissions

After configuring the plugin, you need to explicitly add the required Android permissions to enable camera, microphone, and background service access.

Open your app.json (or app.config.js) and add the following section inside the "expo" object:

{
  "expo": {
    // ...
    "android": {
      // ...
      "permissions": [
        "ACCESS_NETWORK_STATE",
        "BLUETOOTH",
        "CAMERA",
        "INTERNET",
        "MODIFY_AUDIO_SETTINGS",
        "RECORD_AUDIO",
        "SYSTEM_ALERT_WINDOW",
        "WAKE_LOCK",
      ]
    }
  }
}

• This will add the required permissions to your Android app to ensure proper video and audio call functionality.

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.