React Native Video Editor SDK

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 video editor gives users a creative tool set and improves the whole experience.

Key Capabilities of the React Native Mobile Video Editor SDK#

Multi-Format Support

Create videos in various formats, including story reels and Ultra HD, tailored for different channels like Instagram, TikTok, or custom formats.

Templating

Jumpstart your users designs with easily adaptable templates including text variables and placeholders.

Asset Management

Record, upload, or select pre-existing videos, images, and other media from a custom library to enrich video content.

Advanced Editing Tools

Utilize features such as adjustments, filters, effects, and blur to fine-tune each element or the entire video, delivering a professional finish.

Timeline Management

Arrange multiple video clips, images, text, stickers, and shapes on a timeline for precise control over the final output.

Audio Integration

Enhance videos with audio tracks, either imported or selected from a custom asset library, to add another layer of creativity.

Customizable UI

Tailor the video editing interface to match your application’s branding and user experience needs, ensuring an intuitive and engaging experience.

Camera SDK

Easily integrate with our Camera SDK for dual camera, timers and more

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 Media Types#

IMG.LY's Creative Editor SDK enables you to load, edit, and save MP4 files directly in the browser without server dependencies.

The following file types can also be imported for use as assets during video editing:

• MP3
• MP4 (with MP3 audio)
• M4A
• AAC
• JPG
• PNG
• WEBP

Individual video scenes can be exported as MP4, AAC, Binary, or PDF files.

Understanding CE.SDK Architecture & API#

The following sections provide an overview of the key components of the CE.SDK video editor UI and its API architecture.

If you're ready to start integrating CE.SDK into your React Native application, check out our Implementation Guide.

CreativeEditor SDK Mobile Video UI#

The CE.SDK video editor UI is a specific configuration of the CreativeEditor SDK, focusing on essential video editing features. It includes robust tools for video manipulation, customizable to suit different use cases. Key components include:

• Canvas: The main workspace where users interact with their video content.
• Timeline: Provides control over the sequence and duration of video clips, images, and audio tracks.
• Tool Bar: Provides essential editing options like adjustments, filters, effectsi, layer management or adding text or images in order of relevance.
• Context Menu: Presents relevant editing options for each selected element, simplifying the editing process for users.

Learn more about interacting with and customizing the video editor UI in our design editor UI guide.

CreativeEngine#

At the core of CE.SDK is the CreativeEngine, which handles all rendering and video manipulation tasks. It can be used in headless mode or alongside the CreativeEditor UI. Key features and APIs provided by CreativeEngine include:

• Scene Management: Create, load, save, and manipulate video scenes programmatically.
• Block Management: Manage video clips, images, text, and other elements within the timeline.
• Asset Management: Integrate and manage video, audio, and image assets from various sources.
• Variable Management: Define and manipulate variables for dynamic content within video scenes.
• Event Handling: Subscribe to events like clip selection changes or timeline updates for dynamic interaction.

Customizing the React Native Mobile Video Editor#

CE.SDK provides extensive customization options, allowing you to tailor the UI and functionality to meet your specific needs. This can range from basic configuration settings to more advanced customizations involving callbacks and custom elements.

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.

Framework Support#

CreativeEditor SDK’s video editor is compatible with React Native, making it easy to integrate into your application.

500M+

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