Skip to main content
VESDK/React Native/Concepts

Architecture

VideoEditor SDK for React Native provides dozens of customizations, a versatile video processing section as well as a powerful rendering engine.

VideoEditor SDK for React Native depends on the native counterparts for iOS and Android and acts as a bridging layer between your React Native application and the native SDKs. Therefore, you get true native performance for your video editing process.

Architecture#

The react-native-videoeditorsdk module architecture consists of three major parts interacting to deliver the best performance:

React Native VESDK#

The VESDK class is the main entry point for the module. It contains all of the invokable static functions to interact with the VideoEditor SDK. Thus, you can open the editor using VESDK.openEditor and unlock the SDK with your license using VESDK.unlockWithLicense.

For further information on how to get started with the VESDK class please refer to the Getting Started section.

React Native Configuration#

The Configuration interface allows you to apply all kinds of customizations to the VideoEditor SDK - from adding custom assets over changing the available tools to customizing each of the individual tools to better fit your personal use case. For further reference on the capabilities of the Configuration, please have a look at our Configuration section.

Native module#

On the other side of the React Native module are the native iOS and Android modules. These retrieve the requests from the VESDK methods and process them to interact with the native iOS/Android VideoEditor SDK before handling and sending back the export result.

Expo#

To support applications using Expo, we further expanded our module lineup with the react-native-imglysdk module which contains a Config Plugin. This plugin automatically sets up your application to work with our SDK so you do not have to touch any native files. For further reference on this, please have a look at our dedicated Getting Started section for Expo.

Restrictions#

With this architecture, you can use the full native performance. However, there is also a downside to this: UI Customization. While we provide a lot of customization options as described above, most of the UI customizations can not be done directly from React Native as the UI is written natively in Swift/Objective-C and Kotlin/Java instead of React components. This said, you can still enjoy all of the native UI customization capabilities, however, they still need to be implemented natively as well. For further references on UI customizations, please have a look at our dedicated User Interface section.