Skip to content

New Project Setup

Introduction

This guide provides step-by-step instructions for integrating the @imgly/editor-react-native module into a new mobile Expo project. By the end of this guide, you will have a powerful creative editor running in your own Expo application.

Note: Customizing the CreativeEditor SDK for React Native is handled exclusively through native code (Swift/Kotlin), as outlined in our configuration overview section.

Pre-requisites

Before you begin, make sure the following requirements are met:

  • A properly configured Expo development environment
  • Platform-specific development setup for your target (Android and/or iOS)
  • Git CLI installed
  • A valid IMG.LY license key - Get one here

Minimum Requirements

  • React Native: 0.73
  • iOS: 16
  • Swift: 5.10 (Xcode 15.4)
  • Android: 7.0 (Android SDK 24)

Create the Project

First, create a new Expo project by running the following command:

Terminal window
npx create-expo-app@latest

Then, open the newly created project in your preferred editor.

Add Dependency

Next, install the @imgly/editor-react-native module by running the following command:

Terminal window
npx expo install @imgly/editor-react-native

Native Setup

If your application includes Android as a target platform, some manual configuration is required on the Android side. Please complete the following steps to ensure proper integration. We suggest using the expo-build-properties plugin but you can also do all necessary steps manually.

First, add the expo-build-properties plugin to your application:

Terminal window
npx expo install expo-build-properties

Then, make the following changes in your app.json file to properly setup the Android environment for our SDK:

  • Increase the minSdk to at least 24
  • Include the IMG.LY maven repository
  • Increase the Kotlin version to at least 1.9.10
  • If needed, adjust the iOS deploymentTarget to at least 16.0
"expo-build-properties",
[
  {
    "android": {
      "minSdkVersion": 24,
      "extraMavenRepos": [
      "https://artifactory.img.ly/artifactory/maven"
      ],
      "kotlinVersion": "1.9.10"
    },
    "ios": {
      "deploymentTarget": "16.0"
    }
  }
]

Finally, run the prebuild command to generate the needed native code.

Terminal window
npx expo prebuild

Using the Creative Editor

To finally make use of the editor, call the IMGLYEditor.openEditor function with suitable EditorSettings and optionally your desired EditorPreset passed in:

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


export const design_editor_solution = async (): Promise<void> => {
  const settings = new EditorSettingsModel({
    license: 'YOUR_LICENSE_KEY',
    userId: 'UNIQUE_USER_ID',
  });
  const result = await IMGLYEditor?.openEditor(
    settings,
    {
      source: 'test_image.png',
      type: SourceType.IMAGE,
    },
    EditorPreset.DESIGN,
  );
};

Within a new file, define an asynchronous function named design_editor_solution where you will initialize the EditorSettingsModel. After providing your valid license key and an optional unique user ID, pass the configured settings to IMGLYEditor.openEditor(). At this point, you can also specify an optional EditorPreset to open one of our predefined editor variants.

Optionally provide a Source object containing an existing image, video, or scene alongside its corresponding SourceType to open the editor with that content; otherwise pass undefined and the editor will start blank.

Now, you can launch the editor by calling design_editor_solution() from wherever you want to open it from.

Next Steps

  • Explore the available presets tailored to different editor solutions.
  • Set up a native interface to customize the editor according to your specific requirements.

Common Errors

Dependency not found

Couldn't find any versions for "@imgly/editor-react-native" that matches "^x.xx.x"

Solution -> Ensure you are using an existing version of the IMG.LY editor.