React Native UI Kit — Installation

Install the React Native UI Kit via npm and configure platform-specific permissions for Android and iOS. Follow the four steps below to be ready for your first call.

Prerequisites

Before you begin, ensure the following tools are installed and up to date:

Visual Studio Code (latest)
Android Studio (latest) — required for Android builds and the Android emulator
Xcode (latest) — required for iOS builds; macOS only
An EnableX developer account — sign up at portal.enablex.io

Step 1 — Install Packages

The UI Kit depends on the EnableX RTC React Native SDK. Install both packages from npm:

npm install enx-uikit-react-native
npm install enx-rtc-react-native

iOS — CocoaPods Setup

The iOS build requires two Socket.IO dependencies (Socket.IO-Client-Swift and Starscream) to be linked as dynamic frameworks. Add the following pre_install hook to your ios/Podfile before the closing end:

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

Then install the iOS pods:

cd ios && pod install

Always run pod install after npm install

Any time you add or update a React Native package that has native iOS dependencies, run pod install in the ios/ directory to link the native modules.

Step 2 — Android Permissions

Add the required permissions to your Android manifest. Open android/app/src/main/AndroidManifest.xml and add these entries inside the <manifest> tag:

<manifest>
  <uses-permission android:name="android.permission.INTERNET" />
  <uses-permission android:name="android.permission.RECORD_AUDIO" />
  <uses-permission android:name="android.permission.CAMERA" />
  <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
  <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
</manifest>

Step 3 — iOS Permissions

Add usage description strings to ios/YourApp/Info.plist. iOS displays these strings in the system permission dialog. Without them, the app will crash when it first attempts to access camera or microphone.

Add the following keys:

NSCameraUsageDescription — explain why your app needs camera access
NSMicrophoneUsageDescription — explain why your app needs microphone access

Example values:

<key>NSCameraUsageDescription</key>
<string>EnableX needs camera access for video calls</string>
<key>NSMicrophoneUsageDescription</key>
<string>EnableX needs microphone access for audio calls</string>

Step 4 — Obtain a Token

Every EnableX session requires a valid room token generated by your app server using your EnableX App ID and App Key. Your server creates a room via the Video API, receives a token in the response, and passes that token to the React Native client. The UI Kit passes this token to EnxVideoView to connect to the session.

See the Video API reference for details on room creation and token generation.

Never expose token generation logic in your app

Your App ID and App Key are credentials that must never be included in a mobile app binary. Always fetch tokens from your server and pass them to the client at runtime.

← Release Notes Implementation →