Integrating React Native VideoSDK with Expo

Introduction

This guide shows how to add VideoSDK to your Expo project. Expo is a popular framework for building cross-platform mobile applications using React Native.

important

If you are upgrading from v1.0.1, follow the Migration Guide. Upgrade @videosdk.live/expo-config-plugin to 2.0.0 and run npx expo prebuild --clean.

info

The SDK uses native code, so it does not run in the Expo Go app. Use the expo-dev-client library to run your Expo app with a development build.

Prerequisites

• Node.js and npm (or yarn) installed on your system.
• Expo SDK 51 or later.
• iOS deployment target 18.0 or later.
• Android minSdkVersion 24 or later.

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 config plugin:

npx expo install @videosdk.live/react-native-sdk@2.0.1
npx expo install @videosdk.live/expo-config-plugin@2.0.0

v2.0.0 does not use @videosdk.live/react-native-incallmanager, so do not install it.

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"
        }
      ]
    ]
  }
}

• @videosdk.live/expo-config-plugin adds the VideoSDKRTC line to your Podfile and the iOS camera and microphone permission messages. You can change the messages with cameraPermission and microphonePermission.

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",
        "BLUETOOTH_CONNECT",
        "CAMERA",
        "INTERNET",
        "MODIFY_AUDIO_SETTINGS",
        "RECORD_AUDIO",
        "WAKE_LOCK",
      ]
    }
  }
}

• This will add the required permissions to your Android app to ensure proper video and audio call functionality.
• The SDK adds the FOREGROUND_SERVICE and FOREGROUND_SERVICE_MEDIA_PROJECTION permissions that screen share needs, so you do not need to list them.
• On Android, the SDK does not ask the user for camera and microphone access. Call requestPermission() from useMediaDevice() before the room joins, as the Quick Start shows.

Building the App

The config plugin applies its changes when Expo generates the native projects. Generate them, then build and run your app:

npx expo prebuild --clean
npx expo run:android
npx expo run:ios

Run npx expo prebuild --clean again whenever you change the plugins in app.json.

Quickstart Example

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

note

The example still uses React Native SDK v1.0.1. To build an app on v2.0.0, follow this guide and the Quick Start.