How to Integrate AI Effects into Your React Native App

Imagine your app developed based on React Native not only capturing video, but also intelligently enhancing every frame with flawless skin smoothing, playful AR masks, and precise object segmentation—all in real time. That’s exactly what the AI effects SDK from ZEGOCLOUD delivers: a suite of AI‐powered video effects ready to plug into your project. Whether you’re creating an entertaining live-streaming service, an engaging virtual classroom, or a creative camera app, ZEGOCLOUD AI effects for React Native abstracts away complex computer-vision challenges so you can ship features faster. In this guide, we’ll walk you through the demo experience, show you how to integrate the SDKs for React Native development step by step, and highlight best practices to deliver a polished user journey.

Experience AI Effects

Get started today by downloading the Android and iOS apps to see firsthand how ZegoEffects delivers professional-grade AI video magic in your application.

Try the Demo Project Now

Try ZEGOCLOUD’s demo to explore the AI Effects feature enabled by the ZegoEffects SDK.

Set up the Environment

Ensure your development environment is configured according to the guidelines below:

Node.js:
• Install the LTS version from the official Node.js site

React Native version:
• 0.73.6 or higher

iOS requirements:
• iOS 13.0+ on a real device or simulator with audio/video support.

Android requirements:
• Android 8.0 (API 26) or above on a real device with audio/video support.
• For real devices, enable USB debugging via Settings > System > Developer Options > USB debugging Android Developers

Internet connectivity:
• Ensure your iOS/Android device (or simulator) is online.

Enable the services

Sign up for a ZEGOCLOUD Console account, create a project and note down your AppID and AppSign for SDK setup.
Reach out to ZEGOCLOUD technical support to secure the beauty effects license file.

Collect the Demo Project

Step 1. Download the sample code ZIP file and unzip it.

Step 2. Obtian the latest version of iOS ZegoEffects SDK or Android ZegoEffects SDK, extract the contents, and place the Resources and Models folders into the earlier extracted sample code folder. The steps below show exactly where to place them in each platform’s project structure:

iOS: Create an Assets folder inside your sample‑code project and drag Resources and Models into it.

Android: Place Resources and Models under android/app/src/main/assets in the sample project.

Step 3. Place a KeyCenter.js file at the sample‑code root containing the code shown; be sure to populate the appID, appSign, and effectLicense fields with your credentials.

const KeyCenter = {
  // Your AppID (e.g. 123456789)
  appID:  ,

  // Your AppSign (e.g. "39011cbxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx")
  appSign: '',

  // Your beauty‑effects license file content
  effectLicense: '',
};

export default KeyCenter;

Step 4. From your project’s root directory, install dependencies and launch the demo:

yarn
yarn ios    # for iOS
yarn android  # for Android

How to Integrate AI Effects Using ZEGOCLOUD

Integrate the SDKs

The AI effects ability requires both the ZEGOCLOUD Express Video SDK and AI Effect SDK.

Integrate the ZEGOCLOUD Express SDK

Read the blog How to Build React Native Live Streaming Apps to know how to integration process.

Integrate the ZEGOCLOUD AI Effects SDK

Step 1. Ensure you have install React Native 0.73.6 or above and Node 18 or above

Step 2. Run the following command in your project’s root directory to add the SDK via yarn.

$ yarn add @zegocloud/zego-effects-reactnative

Import Resources and Models

Get the latest version of the iOS or Android ZegoEffects SDK from the ZEGOCLOUD SDK download page, unzip the package, and locate the Resources and Models folders inside.

For iOS development, inside your sample‑code project root, create a directory named Assets, then drag-and-drop (or copy) both Resources and Models into Assets.

In your Android sample‑code folder, copy Resources and Models into android/app/src/main/assets/ so that at runtime the SDK can locate its resource files.

Import the SDKs

Copy the following codes to import the ZEGOCLOUD Express SDK and the ZEGOCLOUD AI Effects SDK

import ZegoExpressEngine, {
  ZegoPublishChannel,
  ZegoTextureView,
  ZegoVideoConfig,
  ZegoVideoConfigPreset
} 
from "zego-express-engine-reactnative";
import ZegoEffects from '@zegocloud/zego-effects-reactnative';

Initialize AI Effects and Invoke Related Methods

Call the Express SDK’s enableCustomVideoProcessing method to activate custom video preprocessing.
Supply your authentication file and invoke the AI Effects SDK’s enableImageProcessing method to initiate image processing.
Invoke other AI Effects SDK methods as needed to implement the related features.

/*
 * Initialize face beautification effects SDK.
 * This method should be called after creating the Express instance.
 */
async function initEffects() {
  // Enable custom video processing for Express and Effects
  // engine is an instance of ExpressEngine
  await engine.enableCustomVideoProcessing(true, {}, ZegoPublishChannel.Main);

  // Log Effects SDK version
  console.log(`Effects version=${await ZegoEffects.getVersion()}`);

  // Get authentication info from SDK
  const authInfo: string = await ZegoEffects.getAuthInfo(appSign);

  // Contact ZEGOCLOUD support to obtain the license
  const license: string = "";

  // Create Effects instance with the obtained license
  const effects = new ZegoEffects(license);

  // Listen for and handle error events
  effects.on('error', (errorCode: number, desc: string) => {
    // Log error information for debugging
    console.error(`Error code: ${errorCode}, Description: ${desc}`);
  });

  // Enable image processing for Effects
  effects.enableImageProcessing(true);

  // Enable and configure skin smoothing effect for better beautification
  effects.enableSmooth(true);
  effects.setSmoothParam({ intensity: 100 });

  // Enable face lifting effect to create a smaller facial appearance
  effects.enableFaceLifting(true);
  effects.setFaceLiftingParam({ intensity: 100 });

  // Additional effects or configurations can be added here
  // For example:
  // effects.enableWhitening(true);
  // effects.setWhiteningParam({ intensity: 50 });

  // Ensure all effects are properly enabled and configured
  console.log('Face beautification effects initialized successfully.');
}

Start Publishing A Stream

After completing the face beautification steps above, you can proceed to publish your stream.

Conclusion

Integrating ZEGOCLOUD AI Effects with React Native empowers your app to go far beyond basic video capture—bringing real-time skin smoothing, dynamic AR effects, and precise segmentation into every frame with minimal effort. By abstracting away the complexities of computer vision and model management, ZegoEffects lets you focus on crafting engaging experiences—whether that’s a lively social stream, an immersive virtual classroom, or a next‑generation camera app. With just a few lines of setup, you can deliver polished, AI‑powered visual features that delight users and set your project apart. Ready to elevate your apps developed by React Native? Start experimenting with ZEGOCLOUD AI Effects today and transform each pixel into a moment of magic.