How to Integrate Video Editor SDK in React-Native Apps

About Video Editor SDK

Banuba AI Video Editor SDK is a powerful React Native video processing tool.

It includes the core functionalities like trimming and music editing, as well as AR filters and effects on par with TikTok and Snapchat.

With this SDK, your users will be able to create short clips, slideshows, animated stories, and much more.

Banuba AI Video Editor SDK is built with native technologies.

Unlike many competitors, it is fully compatible with cross-platform frameworks like React Native and Flutter.

Banuba AI Video Editor SDK core features

• Video capture and processing.
• Video trimming. Cutting and resizing the beginning and end of a clip.
• Camera filters. LUTs, face masks, animation, and pretty much anything TikTok and Snapchat have.
• Face beautification. Smoothing face and neck, removing wrinkles and acne, evening-out skin tone, etc.
• GIFs and text overlays.
• Music and voice effects. Adding soundtracks and applying effects like a robot voice.
• Slideshows. Made from photos in the gallery, or taken right away.

How to Integrate React Native Video Editor

1. Get a token

To begin the free trial of the SDK and gain all the React Native video processing benefits for your app, start with getting a unique trial token.

It offers a 14-day free trial with unlimited SDK features. 

2. Install

1. Complete React Native Environment setup
2. Install Expo CLI
3. Complete Running On Device
4. Run yarn install to install required project dependencies.
5. Set Banuba license token within the app.

3.1 Run on Android

1.  Ensure that the variable ANDROID_SDK_ROOT is set in your environment or setup sdk.dir.
2.  Run npm run android in terminal to launch the sample app on a device or launch the app in IDE.
3.  Check out the Android quickstart guide to quickly integrate Android Video Editor SDK into your React Native Expo project.

3.2 Run on iOS

1.  Install CocoaPods dependencies. Run cd ios and pod install in the terminal.
2.  Open the Signing & Capabilities tab in Target settings and select your Development Team.
3.  Run npm run ios in terminal to launch the sample on simulator (iPhone 11 default) or choose device in XCode to launch the sample.
4.  Check out iOS quickstart to quickly integrate iOS Video Editor SDK into your React Native Expo project.

Video Editor SDK + Face AR SDK

AI Video Editor SDK handles video editing elements like video capture, trimming, and making slideshows. In turn, Face AR SDK focuses on augmented reality elements like masks and filters. 

However, they can work in tandem to give your users more opportunities. Face AR SDK allows applying various effects during recording or a live streaming session, while Video Editor SDK can do the same when processing an already filmed clip. The latter also allows recording - without effects.

Why React Native

For the last few years, this technology has remained the most popular framework for developing cross-platform mobile applications.

Source: Statista

It uses the popular JavaScript and boasts up to 95% code reuse between Android, iOS, and Web. This means if you build a video editor with React Native, your work would become more efficient, with the total development time decreasing by up to 30% for a multiplatform app.

What’s more, React Native works almost as fast as native technologies and can integrate native code. This means React Native video processing software can be a viable alternative to one built with Swift, Java, or Kotlin.

Using this framework together with Banuba Video Editor SDK will save many weeks of work and allow you to go to market much faster. For more details, see our article: “How to develop a mobile video editor app”.

Wrapping Up

We hope our step-by-step guide will help you integrate a React Native video editor SDK without any trouble.

If you find Banuba's SDKs a great boost for your project, simply start the 14-day free trial right now.