The React Native @imgly/editor-react-native
module is built on top of the native Android and iOS UI implementation and has no dedicated React Native UI.
However, you still have access to the same customization options as for iOS and Android.
To use them you need to configure them natively for both platforms.
Native Interfaces#
In order to allow intuitive and easily accessible native customization of the editors, we provide dedicated interfaces and convenience functions for both iOS and Android.
This layer is written in Swift and available via the IMGLYEditorModuleSwiftAdapter.shared
instance.
The editor that is opened via the IMGLYEditorModuleSwiftAdapter.openEditor()
function can be completely customized and exchanged.
For this to work you can use the IMGLYEditorModuleSwiftAdapter.builderClosure
which provides an optional EditorPreset
and metadata
with which you can provide any prebuilt or custom editor view. The metadata
parameter of the openEditor
function can be utilized
to provide customization details from the React Native side of your app to the native side:
iOS#
On iOS, we provide fallback functions for our default editors via:
EditorBuilder.design()
EditorBuilder.apparel()
EditorBuilder.photo()
EditorBuilder.video()
EditorBuilder.postcard()
In case you want a completely custom UI, you can use the EditorBuilder.custom
function that allows you to return a custom View
based on a given EditorConfig
, an EditorPreset
, metadata
and an EditorBuilderResult
:
1. Import the dependencies:#
import IMGLYEditorModuleimport SwiftUI
2. Assign your custom editor:#
func useCustomEditor() { IMGLYEditorPlugin.builderClosure = { _, metadata in // Make decisions based on your own metadata. if metadata?["use_custom_editor"] as? Bool == true { // Return your custom editor. EditorBuilder.custom { settings, _, _, result in CustomEditor(settings: settings, result: result) } } else { // Return a custom or prebuilt editor. EditorBuilder.design() } }}
private struct CustomEditor: View { init(settings _: EditorSettings, result _: @escaping EditorBuilder.EditorBuilderResult) {}
var body: some View { Text("Custom Editor") }}
Further, we provide convenience extensions both for the OnCreate
and OnExport
callbacks to reduce the amount of code you need to write. For a detailed example, please take a look at our showcases app.
Android#
On Android, we provide fallback functions for our default editors via
EditorBuilder.design()
EditorBuilder.apparel()
EditorBuilder.photo()
EditorBuilder.postcard()
EditorBuilder.video()
.
In case you want a completely custom UI, you can use the EditorBuilder.custom
function that allows you to return a custom @Composable
function based on a given EditorConfig
, an EditorPreset
, metadata
and an EditorBuilderResult
:
1. Update the android/app/build.gradle
file and add the following:#
android { (...) kotlinOptions { jvmTarget = "1.8" }
buildFeatures { compose true }
composeOptions { kotlinCompilerExtensionVersion = "1.5.10" }}
dependencies { implementation "ly.img:editor:1.52.0" implementation(platform("androidx.compose:compose-bom:2023.05.01")) implementation "androidx.activity:activity-compose:1.6.1"}
2. Import the dependencies:#
import androidx.compose.runtime.Composable
import ly.img.editor.reactnative.module.IMGLYEditorModuleimport ly.img.editor.reactnative.module.builder.EditorBuilderimport ly.img.editor.reactnative.module.builder.EditorBuilderResultimport ly.img.editor.reactnative.module.model.EditorSettings
3. Assign your custom editor:#
IMGLYEditorModuleSwiftAdapter.shared.builderClosure = { _, metadata in // Make decisions based on your own metadata. if metadata?["use_custom_editor"] as? Bool == true { // Return your custom editor. EditorBuilder.custom { settings, _, _, result in CustomEditor(settings: settings, result: result) } } else { // Return a custom or prebuilt editor. EditorBuilder.design() }}
Further, we provide a class called EditorDefaults
which contains convenience methods for both the OnCreate
and OnExport
callbacks to reduce the amount of code you need to write. For a detailed example, please take a look here.