React Native Video SDK

The EnableX React Native SDK (package: enx-rtc-react-native) brings real-time audio and video to cross-platform mobile apps built with React Native. It uses a JSX component-driven approach — you declare the video room as an <EnxRoom> component in your render tree — while imperative actions are called through the Enx API class. The SDK handles all WebRTC internals and signalling; your code focuses on what users see and do.

• SDK v2.3.54 — Released: February 4, 2026
• Cross-platform: runs on iOS and Android from a single codebase
• Requires React Native 0.60+
• iOS target: iOS 13+ / Android: API 21+

↗  View on npm

React Native SDK v2.3.54 — Released February 4, 2026

Before writing any React Native code, your backend server must have three things in place. These are server-side responsibilities — none of these credentials or operations should ever be performed inside the mobile app itself.

1. App Credentials

Log in to the EnableX Portal and create a project to obtain your app_id and app_key. These credentials authenticate your server when calling the EnableX Video API. Never embed them in the React Native app — treat them as server secrets.

2. A Room

A Room is a virtual session space. Create it via the Video REST API from your server and store the returned room_id. The room persists until you delete it, so you typically create it once per meeting and reuse it across participants.

3. A Token per Participant

Each participant who joins the session needs their own short-lived token. Your server generates the token by calling the Create Token API with the room_id and participant details, then passes it to the React Native app. The app uses this token when connecting to the room via the <EnxRoom> component.

The SDK is distributed as an NPM package. Install it into your React Native project using either NPM or Yarn, then complete the platform-specific native setup steps described below.

Step 1 — Install the NPM Package

Run one of the following commands from your project root:

npm install enx-rtc-react-native

or, if you use Yarn:

yarn add enx-rtc-react-native

For React Native 0.60 and later, auto-linking handles native module registration automatically — you do not need to run react-native link.

Step 2 — iOS: Configure the Podfile

The SDK depends on Socket.IO-Client-Swift and Starscream for its signalling layer. These libraries must be configured as dynamic frameworks in CocoaPods, otherwise the iOS build will fail. Add the following pre_install block to your ios/Podfile before running pod install:

pre_install do |installer|
  installer.pod_targets.each do |pod|
    if pod.name.eql?('Socket.IO-Client-Swift') || pod.name.eql?('Starscream')
      def pod.build_type
        Pod::BuildType.dynamic_framework
      end
    end
  end
end

After adding the block, install the pods:

cd ios && pod install

Step 3 — Android: No Extra Configuration Required

Android requires no additional native configuration. React Native's auto-linking (available since RN 0.60) registers the native Android module automatically when you run npm install. You can proceed directly to building and running your Android project.

At the top of any component that uses the SDK, import the classes you need from the package. A typical session screen uses all four exports:

import { Enx, EnxRoom, EnxStream, EnxPlayerView } from 'enx-rtc-react-native';

Here is what each export provides:

• Enx — The main API class. All imperative actions — publish, mute, record, disconnect, and more — are called as static methods on this class. You do not instantiate it; you call Enx.someMethod() directly.
• EnxRoom — A JSX component that represents the video session. You render it in your component tree, passing the session token and configuration as props. When it mounts, it connects to the room and begins firing callbacks via the eventHandlers prop.
• EnxStream — Represents a media stream, either local (your camera and microphone) or remote (another participant's stream). It wraps audio and video track metadata and is referenced when publishing, subscribing, or muting.
• EnxPlayerView — A JSX component for rendering a video stream on screen. Embed one instance for each participant whose video you want to display, and attach the corresponding stream to it.

Unlike browser-based SDKs that use addEventListener, the EnableX React Native SDK uses callbacks (also called event handlers) to deliver asynchronous notifications. This is how the SDK tells your app that the room connected, a new participant joined, a stream was added, or any other session event occurred.

You provide your callbacks by passing an eventHandlers prop to the <EnxRoom> component. This prop accepts a plain JavaScript object where each key is a callback name and the corresponding value is the handler function. When an event occurs, the SDK invokes the matching handler and passes an event data object as the argument.

The general pattern looks like this:

const eventHandlers = {
  roomConnected: (data) => {
    console.log('Connected to room:', data);
  },
  streamAdded: (data) => {
    console.log('New stream:', data);
  },
  userDisconnected: (data) => {
    console.log('User left:', data.clientId);
  }
};

<EnxRoom
  token={sessionToken}
  eventHandlers={eventHandlers}
  // ... other props
/>

The specific callbacks available for each feature — connection, streams, recording, moderation, and so on — are documented on the relevant topic pages. The pattern above applies universally: all callbacks are delivered through the single eventHandlers prop.

The SDK does not throw exceptions for session-level errors. Instead, it signals failures through dedicated error callbacks. When something goes wrong — connection is refused, an operation is not permitted for your role, or a network issue occurs — the SDK calls the relevant error callback and passes a structured error payload.

The two most common error callbacks to implement are roomError, which fires for room-level failures, and eventError, which fires for failures on specific operations like recording or moderation. Both follow the same payload structure.

The error payload always includes:

• result — A numeric error code. A non-zero value indicates failure; 0 means the operation succeeded.
• msg — A human-readable string describing what went wrong.

A minimal error handler looks like this:

const eventHandlers = {
  roomError: (error) => {
    console.error('Room error:', error.msg, '| Code:', error.result);
  }
};

Individual topic pages document additional error callbacks specific to each feature area, such as recording errors, floor access errors, and stream errors.

The React Native SDK documentation is organized into the following topics: