Install the UI Kit

The React Native Video UI kit contains methods that you can use to develop and integrate the video apps for hybrid apps. Before starting with the app development, download the required files, and meet all other prerequisites.

Prerequisites

  • Visual Studio Code (Recommended to use the latest version)
  • Android Studio (Recommended to use the latest version)
  • XCode (Recommended to use the latest version)
  • EnableX Developer Account (Sign up)
  • An iOS or Android device for testing the app.

Installation Procedure

  1. Open your terminal and navigate to the React Native project directory.
  2. Run the following command to install the React Native UI kit: npm install enx-uikit-react-native
  3. Run the following command to install the React Native Video SDK: npm install enx-rtc-react-native

Define Permissions

  1. Make sure that the app has camera and microphone permissions for enx_uikit_react_native to start a video call.

    • On Android:

      1. Open the AndroidManifest.xml file and add the required device permissions to the file.

        <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>
      2. Add the code to show a dialog to grant permissions at your application-level.

    • On iOS:

      1. Open your project's info.plist and add two new entries NSCameraUsageDescription and NSMicrophoneUsageDescription.

      2. Open the terminal, navigate to your project folder, and install the pod:

        pod install
  2. Obtain a token to join an RTC session on the EnableX platform.

    You need to create a token for a video room. This token has an assigned role for the user such as a participant, moderator, or a viewer. For more information, see Create a Token.