Skip to main content
PESDK/React Native/Concepts

Architecture

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

PhotoEditor 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 image editing process.

Architecture#

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

React Native PESDK#

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

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

React Native Configuration#

The Configuration interface allows you to apply all kinds of customizations to the PhotoEditor 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 PESDK methods and process them to interact with the native iOS/Android PhotoEditor 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.