Integrate SDK

Prepare Environment

Before starting to integrate the SDK, ensure that your development environment meets the following technical requirements:

• React Native 0.60.0 or above.
• iOS device or simulator running iOS 12.0 or above that supports audio and video (using a real device is recommended).
• Android device or simulator running Android 4.4 or above that supports audio and video (using a real device is recommended). If using a real device, enable the "Allow debugging" option.
• iOS and Android devices are connected to the Internet.
• Configure VS Code development environment. You can search for "React Native Tools" extension in the app store and download it.

Integrate SDK

Create New Project (Optional)

Import SDK

1. Enter the project root directory and execute npm install zego-express-engine-reactnative --save or yarn add zego-express-engine-reactnative command to install the SDK.

2. Enter the iOS root directory and execute pod install command to install dependencies.

After completing the above operations, you can use the zego-express-engine-reactnative SDK in the project through JavaScript or TypeScript (using TypeScript is recommended).

Add Permissions

Set the permissions required by the application according to actual needs.

• Android

  Open the "app/src/main/AndroidManifest.xml" file and add the following content:

  <!-- Permissions required by the SDK -->
  <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
  <uses-permission android:name="android.permission.RECORD_AUDIO" />
  <uses-permission android:name="android.permission.INTERNET" />
  <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
  <uses-permission android:name="android.permission.CAMERA" />
  <uses-permission android:name="android.permission.BLUETOOTH" />
  <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
  <!-- Permissions required by the App -->
  <uses-permission android:name="android.permission.READ_PHONE_STATE" />
  <uses-permission android:name="android.permission.WAKE_LOCK" />
  
  <feature
      android:glEsVersion="0x00020000"
      android:required="true" />
  
  <feature android:name="android.hardware.camera" />
  <feature android:name="android.hardware.camera.autofocus" />

  <!-- Permissions required by the SDK -->
  <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
  <uses-permission android:name="android.permission.RECORD_AUDIO" />
  <uses-permission android:name="android.permission.INTERNET" />
  <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
  <uses-permission android:name="android.permission.CAMERA" />
  <uses-permission android:name="android.permission.BLUETOOTH" />
  <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
  <!-- Permissions required by the App -->
  <uses-permission android:name="android.permission.READ_PHONE_STATE" />
  <uses-permission android:name="android.permission.WAKE_LOCK" />
  
  <feature
      android:glEsVersion="0x00020000"
      android:required="true" />
  
  <feature android:name="android.hardware.camera" />
  <feature android:name="android.hardware.camera.autofocus" />

  • Request Dynamic Permissions

import {PermissionsAndroid} from 'react-native';

const granted = PermissionsAndroid.check(PermissionsAndroid.PERMISSIONS.CAMERA,PermissionsAndroid.RECORD_AUDIO);

granted
  .then((data)=>{
    if(!data) {
      const permissions = [PermissionsAndroid.PERMISSIONS.RECORD_AUDIO, PermissionsAndroid.PERMISSIONS.CAMERA];
      PermissionsAndroid.requestMultiple(permissions);
    }
  })
  .catch((err)=>{
      console.log(err.toString());
  })

import {PermissionsAndroid} from 'react-native';

const granted = PermissionsAndroid.check(PermissionsAndroid.PERMISSIONS.CAMERA,PermissionsAndroid.RECORD_AUDIO);

granted
  .then((data)=>{
    if(!data) {
      const permissions = [PermissionsAndroid.PERMISSIONS.RECORD_AUDIO, PermissionsAndroid.PERMISSIONS.CAMERA];
      PermissionsAndroid.requestMultiple(permissions);
    }
  })
  .catch((err)=>{
      console.log(err.toString());
  })

• iOS

  1. In Xcode, select the "TARGETS > Info > Custom iOS Target Properties" menu.
  

  2. Click the "+" button to add camera and microphone permissions.

     • Privacy - Camera Usage Description
     • Privacy - Microphone Usage Description

  After adding the permissions, the result is shown as follows:

  

FAQ

1. Can I use React Native versions below 0.60.0 to integrate the SDK?

No, the zego-express-engine-reactnative SDK only supports React Native version 0.60.0 or above. If you need to integrate the SDK, please upgrade the project version first.

2. After importing the SDK into the project, do I still need to manually execute the react-native link zego-express-engine-reactnative command to link the Native Module?

No, starting from React Native version 0.60.0, automatic linking of Native Modules is supported.