Expo – IMG.LY Blog

A Modern Video Editor SDK for Your React Native App

Jan — Mon, 06 Jan 2025 10:40:35 GMT

Learn how to integrate IMG.LY’s video editor for React Native into your app and how to leverage its capabilities best.

Why Add a Video Editor to Your React Native App?

Video content is solidifying its status as the most engaging form of digital media. Platforms like TikTok, Instagram Reels, and YouTube Shorts have made video consumption and creation an engrained habit with billions of users. You can harness this trend by adding a video editor to your app significantly enhancing user engagement and retention.

React Native, with its ability to create cross-platform applications from a single codebase, is a perfect match for IMG.LY’s CreativeEditor SDK Video Editor. It ensures seamless performance on iOS and Android, powered by the same unified graphics engine across platforms.

Whether your app focuses on social media, marketing, or eCommerce, integrating a video editor empowers users with a creative tool set while elevating the overall experience.

Getting Started: Integrating the Video Editor in React Native

Requirements

Before diving into the integration, ensure your environment meets these requirements:

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

To get started, add the @imgly/editor-react-native package to your project:

npm install @imgly/editor-react-native

Setting Up the Editor

Once the package is installed, initialize the editor by importing the necessary modules and creating an instance of EditorSettingsModel. You’ll need a license key, which you can obtain from the IMG.LY dashboard.

Here’s how to set up and launch the video editor:

import IMGLYEditor, { EditorSettingsModel } from '@imgly/editor-react-native';

export const openVideoEditor = async (): Promise<void> => {
  const settings = new EditorSettingsModel({
    license: 'YOUR_LICENSE_KEY',
  });

  const result = await IMGLYEditor.openEditor(settings);
};

This launches the editor with the Video Editor preset, enabling users to trim, cut, and enhance their videos with filters, text overlays, stickers, and music.

Use Cases: Building a TikTok-Like Experience

Now that the video editor is integrated into your React Native app, let’s explore some key use cases and how to configure the editor to support them.

Short-Form Video Creation

For apps targeting TikTok-style short-form video content, prioritize features that simplify the editing process:

Timeline Control: Allow users to trim clips and sync overlays like stickers or music.
Filters & Effects: Offer filters to let users add certain moods to their videos with themes like retro, high contrast, or pastel tones.
Text & Stickers: Add captions and playful stickers for videos that are often consumed on mute.
Music & Audio: Let users add soundtracks or sound effects, with a library of trending music for inspirational background music.
Video Templates: Provide ready-made templates that users can customize for specific occasions or themes.

This setup allows influencers and brands to create professional-looking videos that they can share across social media platforms with ease.

Influencers and Marketing

If your app serves influencers or businesses, the ability to create polished, on-brand videos is key. Features to consider:

Branded Templates: Pre-designed templates aligned with specific brand aesthetics, simplifying content creation for marketing campaigns.
Watermarks: Add brand logos or watermarks to videos, ensuring creators and brands maintain visibility.

These features empower influencers and businesses to quickly generate content that’s ready for distribution across platforms.

E-commerce and User-Generated Content

Video editing is a powerful tool for e-commerce apps, enabling sellers and customers to create engaging product demos, unboxing videos, reviews and tutorials. Features like trimming, filters, and music tools make it easy to produce compelling content that enhances the shopping experience.

For example:

Vendors can create promotional videos for products.
Customers can share authentic reviews or tutorials, increasing trust and boosting sales.

Customization Options with CreativeEditor SDK

The React Native plugin offers a range of customization options to adapt the editor to your app’s needs:

UI Customization: Change themes, colors, and layouts to match your app’s branding.
Video Presets: Configure presets for specific use cases, such as limiting video length or optimizing for a particular resolution.
Custom Assets: Add unique filters, stickers, and fonts to create a personalized experience for your audience.
Templates: Use the CreativeEditor SDK Web UI to create custom templates, enabling users to start with professional-grade designs.

Conclusion

Integrating a video editor into your React Native appwill improve your UX, and help boost engagement, retention, and potential distribution of your product, whether you’re building a social media platform, an influencer tool, or an e-commerce app.
With CreativeEditor SDK, you can create a TikTok-like video editing experience or offer specialized tools for businesses and creators.

By following the steps in this guide, you can empower your users to create professional-quality video content directly within your app. Explore the full capabilities of the SDK by visiting the React Native documentation and getting started today.

Stay tuned for updates, and don’t hesitate to reach out with any questions.

Thanks for reading!

3,000+ creative professionals gain early access to new features and updates—don’t miss out, and subscribe to our newsletter.

CreativeEditor SDK Now Supports React Native on iOS & Android

Jan — Thu, 19 Dec 2024 11:57:22 GMT

We’re thrilled to announce the release of our official @imgly/editor-react-native package, bringing the power of CreativeEditor SDK to the React Native ecosystem for iOS and Android!

CreativeEditor SDK enables developers to seamlessly integrate design, video, and photo editing features into their applications. Over the past few months, we’ve been focused on enhancing mobile editor solutions—refining features and expanding to new use cases, including the Video Editor.

To make CreativeEditor SDK accessible to even more developers, we’re expanding our support to include mobile cross-platform frameworks. We started with Flutter and are now adding React Native as another highly popular frameworks for building truly cross-platform apps.

Getting Started

Getting started with CreativeEditor SDK in React Native is simple! First, make sure you meet the following minimum requirements:

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

Then, add the @imgly/editor-react-native package to your project using your favorite package manager.

To launch the editor, you’ll need an instance of EditorSettings - you can use EditorSettingsModel for convenience. All you need to get started is a license key, which you can obtain from your IMG.LY dashboard.

Here’s an example of opening the Design Editor:

import IMGLYEditor, { EditorSettingsModel } from '@imgly/editor-react-native';

export const openEditor = async (): Promise<void> => {
  const settings = new EditorSettingsModel({ license: 'YOUR_LICENSE_KEY' });
  const result = await IMGLYEditor.openEditor(settings);
};

Editor UI Presets

The React Native plugin builds on our native editor solutions, allowing you to leverage the existing editor UI variants. At launch, you can choose from:

Simply choose the editor solution that best suits your use case. By default, the Design Editor opens, but switching to other solutions is straightforward.

Android and iOS Setup

To setup our module in your application, you’ll need to add the expo-build-properties dependency which handles the necessary adjustments to your native folders.

Android

For Android, you’ll need to make a few adjustments to your app.json:

Set the minSdkVersion to 24 (Android 7) or later.
Add the IMG.LY Maven repository.
Ensure your Kotlin version is compatible (e.g., 1.9.10).

Here’s an example configuration:

{
  "expo": {
    "android": {
      "minSdkVersion": 24,
      "extraMavenRepos": ["<https://artifactory.img.ly/artifactory/maven>"],
      "kotlinVersion": "1.9.10"
    }
  }
}

iOS

On iOS, ensure your deployment target is set to 16.0. You can configure this in your app.json file:

{
  "expo": {
    "ios": {
      "deploymentTarget": "16.0"
    }
  }
}

Check out the Getting Started Guides or the examples on GitHub for a complete reference.

The Only Truly Cross-Platform SDK

If you’re working with React Native, you’re likely focused on faster time to market, reduced development complexity, and feature consistency across platforms. The CreativeEditor SDK shares these goals, using a single, unified creative engine that ensures:

Consistent APIs: iOS and Android share the same underlying API.
Feature Parity: Core functionality is implemented at the engine level, guaranteeing feature availability across platforms.
Interoperable Designs: Export and import designs seamlessly across platforms with consistent rendering.

Fully Customizable UI

The React Native plugin offers flexibility for theming, styling, and integrating callbacks into your editor’s workflow. Soon, we’ll introduce more advanced customization options, such as enabling or disabling features by default.

Refer to our documentation for detailed instructions on customizing the editor to match your branding and use case.

What’s Next?

To showcase the capabilities of our React Native plugin, we’ve prepared a dedicated example application available on GitHub. You can explore it to see the editor in action.

Additionally, our documentation provides all the details needed to get started, and you can visit the @imgly/editor-react-native npm page to begin your integration.

Remember to grab your license from your dashboard after starting a free trial, and let the CreativeEditor SDK unlock your users’ creative potential.

Thanks for reading!

3,000+ creative professionals gain early access to new features and updates—don’t miss out, and subscribe to our newsletter.

CE.SDK v1.40 Release Notes

Neslihan — Wed, 18 Dec 2024 11:41:58 GMT

This release is all about giving you more creative freedom and control. Whether you’re integrating CE.SDK into a React Native app, designing text with rich editing options, or customizing editor icons to match your brand, these updates empower you to craft more engaging and personalized user experiences.

Dive into the details below to explore how these features can elevate your projects!

Integrate CE.SDK in Your React Native App

Easily integrate CE.SDK into your React Native and Expo applications.

This plug-and-play solution simplifies integration, making it faster and easier to implement CE.SDK in your apps. Our React Native and Expo Support is built on top of our native editor solutions, enabling you to use our existing iOS and Android editor UI variants supporting a broad range of use cases.

At launch, you can choose between:

Additionally to our existing editor variants, you can create your own editor variant to suit your particular use case using our native API.

Get started with our React Native documentation.

Design with Multiple Text Styles in a Single Block

Empower your users to create visually dynamic text designs with Rich Text Editing: This feature allows multiple fonts, sizes, and styles within a single text block, unlocking endless customization possibilities.

From eye-catching headlines to seamless body text, your users can mix and match styles without needing multiple text blocks.

This enhancement simplifies design workflows, enabling users to achieve professional-quality results while streamlining their experience within your platform.

Customize Your Editor Icons

You can now easily customize your CE.SDK editor by adding your own icons. You can upload icons through our API to match your brand or design style. Whether you want to replace default icons or add custom ones to your features, this update gives you full creative control.

Get started with our documentation.

Upcoming

P3 Color Support on iOS and Android
Deliver stunning visuals with P3 Support on iOS. Wide-gamut P3 color space enables richer, more vibrant colors for professional-grade designs, ensuring high-quality results on supported devices.

Customize the Mobile Dock on iOS & Android
Streamline the user experience with a configurable Mobile Dock! This enhancement empowers clients to tailor key UI components. This improvement saves development time and opens the door for a more tailored and efficient creative experience, meeting the growing demand for customization in mobile apps.

View the v1.40 Changelog. Thanks for reading!

3,000+ creative professionals gain early access to new features and updates—don’t miss out, and subscribe to our newsletter.