Existing Project Setup

Introduction#

This guide provides step-by-step instructions for integrating the @imgly/editor-react-native module into your existing 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 CE.SDK license key (Get a free trial)

Minimum Requirements#

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

Add Dependency#

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

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:

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.

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.