React Native Image Editor SDK
It provides a seamless and intuitive experience for both developers and users, offering essential photo editing features such as cropping, filtering, and adding stickers, text, and frames. The editor is highly flexible, allowing you to assemble the tools you need to enable specialized use cases, such as annotation.
Download Demo App
Key Capabilities of the React Native Photo Editor SDK#
Transform
Crop, flip, and rotate video clips.
Filters
Access a wide variety of high-quality filters with fast processing.
Overlays & Stickers
Add overlays and stickers to enhance images.
Text
Insert customizable text with various fonts and styles.
Frames
Add customizable frames to images.
Brush & Annotations
Draw on images with customizable brush tools for annotations and highlighting.
Adjustments
Fine-tune settings like brightness, contrast, saturation, and more.
Customizable UI
Tailor the user interface to match your app's design.System Compatibility#
PhotoEditor SDK for React Native requires:
- React Native: 0.60 OR Expo 45 (If you are using Expo)
- iOS: 13
- Android: 5 (SDK 21)
If your app depends on older versions of these requirements, please refer to previous versions of the SDK. Note that this module cannot be used in the Expo Go application because it uses custom native libraries.
Image Formats and Compression#
On iOS, the SDK supports exporting images in popular formats like JPEG and PNG, with options for quality and compression levels.
On Android, PhotoEditor SDK supports exporting images in various formats including JPEG and PNG, allowing you to balance between quality and file size.
Essential Guides#
To help you get started and make the most of the React Native Photo Editor SDK, we've compiled a set of essential guides:
- How to Get Started: Integrate the editor into your project and start editing photos immediately.
- How to Open the Editor: Learn how to initialize and open the photo editor in your React Native application.
- How to Open & Load an Image: Load images from the camera roll and other sources into the editor.
- How to Serialize and Deserialize the Editor State: Save the current state of the editor and restore it later, enabling seamless editing sessions.
- How to Use the Annotation Editor: Add annotations to your images to highlight important details or add commentary.
- Understanding the SDK’s Architecture: Gain insights into the SDK's architecture to better understand its capabilities and how to utilize them.
- How to Use Native Interfaces: Bridge the gap between React Native and native code to leverage platform-specific features.
- How to Localize the Editor: Add localization support to the editor to cater to a global audience.
- How to Use Custom Assets: Learn how to use custom filters, frames, and other assets in your editor.
By leveraging the React Native Photo Editor SDK, you can provide your users with a rich and engaging photo editing experience, all within the familiar environment of your React Native application. Start exploring the capabilities and transform your app today!
Customizing the React Native Photo Editor SDK#
You can tailor the editor’s user interface to match your app’s branding and user experience in several ways:
- Theming: Configure the colors used in the editor UI to match your app's branding.
- Customize Editor Icons: Replace default icons with custom ones to maintain consistency with your app's visual style.
- Customize Menu Items: Decide which tools appear in the menu and in what order, to tailor the editing experience to your users' needs.
500M+
