React Native Creative Editor

React Native, with its ability to create cross-platform applications from a single codebase, is a perfect match for IMG.LY's CreativeEditor SDK. Whether your app targets social media, marketing, or eCommerce, implementing a design editor gives users a creative tool set and improves the whole experience.

Key Capabilities of the React Native Mobile Design Editor SDK#

Transforms

Perform operations like cropping, rotating, and resizing design elements.

Templating

Create and apply design templates with placeholders and text variables for dynamic content.

Placeholders & Lockable Design

Constrain templates to guide your users’ design and ensure brand consistency.

Asset Management

Import and manage images, shapes, and other assets to build your designs.

Design Collage

Arrange multiple elements on a single canvas to create complex layouts.

Text Editing

Add and style text blocks with various fonts, colors, and effects.

Client-Side Processing

All design editing operations are executed directly on the device, with no need for server dependencies.

Headless & Automation

Programmatically edit designs within your application using the engine API.

Customizable UI

Build and integrate custom UIs tailored to your application’s design needs.

Supported Platforms#

Using a common graphics engine for both iOS and Android, React Native guarantees smooth performance on both of these platforms. This ensures uniform rendering across all platforms, compatible designs, and consistent functionality.

Prerequisites#

Make sure your environment satisfies the following requirements

• React Native: 0.73+
• iOS: 16+
• Swift: 5.10 (Xcode 15.4)
• Android: 7+

Add the @imgly/editor-react-native package to your project to get started.

Supported File Types#

The SDK supports various image formats for loading, editing, and exporting within your React Native application, including:

• JPG
• PNG
• SVG
• WEBP
• TGA

Individual assets or entire designs can be exported as PDF, JPG, PNG, TGA or RBG8 binary files.

Understanding the React Native Creative Editor SDK Architecture & API#

The following sections provide an overview of the key components of the React Native Mobile Design Editor UI and its API architecture.

If you're ready to start integrating the SDK into your React Native application, check out our Getting Started guide or dive into the guides section.

Design Editor UI#

The React Native Design Editor UI is built for intuitive and mobile-friendly design creation. Here are the main components and customizable elements within the UI:

• Canvas: The core interaction area where users interact with design content.
• Tool Bar: Provides essential editing options like adjustments, filters, effects or adding text in order of relevance.
• Context Menu: Presents relevant editing options for each selected element, simplifying the editing process for users.

CreativeEngine#

CreativeEngine is the core of the React Native Mobile Editor SDK, responsible for rendering and managing design scenes. It offers features such as:

• Scene Management: Create, load, save, and modify design scenes programmatically.
• Block Management: Manage design elements like shapes, text, and images.
• Asset Management: Load and manage assets such as images and SVGs from various sources.
• Variable Management: Define and manipulate variables for dynamic content within scenes.
• Event Handling: Subscribe to events like block creation or updates for real-time interaction.

Customizing the React Native Mobile Design Editor#

The SDK offers extensive customization options, from simple configuration changes to more advanced customizations involving custom asset sources and hooking into UIEvents.

Role-Based Customization#

Switch between "Creator" and "Adopter" roles to control the editing experience. The "Creator" role allows setting constraints on template elements, while the "Adopter" role is focused on adapting these elements.

• Creator: Set constraints and manage template settings.
• Adopter: Edit elements within the bounds set by the Creator.

Basic Customizations#

Configure the editor by passing a configuration object during initialization:

    const settings = new EditorSettingsModel(
        { license: 'YOUR_LICENSE_KEY' }
    );

Explore further customization options by visiting the configuration guide.

500M+

video and photo creations are powered by IMG.LY every month