⚡ Features

• ✂️ Image Cropping: Precision native cropping UI.
• 🎨 Freehand Drawing: Brush tool with custom color choices.
• ✍️ Text Overlays: Add, position, scale, and rotate text with custom colors.
• 🎭 Stickers: Add customizable sticker overlays.
• 🚀 TurboModules Support: Native performance on React Native New Architecture.

📱 Screenshots

| iOS | Android | | :--------------------------------------: | :------------------------------------------: | | | |

📋 Compatibility

| Platform / Tool | Minimum | Tested | | ---------------- | ----------- | --------------- | | React Native | >= 0.73 | 0.78.2 | | React | >= 18.2.0 | 19.0.0 | | iOS | 13.0 | 18.0 | | Android | API 24 | API 35 | | Architecture | Old Arch ✅ | New Arch ✅ |

Note: Requires JDK 17 and Gradle 8.x for Android builds.

📦 Installation

npm install @phucprime/react-native-image-editor
# or
yarn add @phucprime/react-native-image-editor

iOS

Add to your Podfile:

use_frameworks! :linkage => :static
pod "iOSPhotoEditor", :git => "https://github.com/phucprime/photo-editor", :branch => "master"

Then run pod install.

Add to Info.plist:

<key>NSPhotoLibraryAddUsageDescription</key>
<string>Allow access to save edited photos</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Allow access to select photos for editing</string>

Android

Add JitPack to your root android/build.gradle:

allprojects {
    repositories {
        maven { url "https://jitpack.io" }
    }
}

Add activities to AndroidManifest.xml:

<activity android:name="com.ahmedadeltito.photoeditor.PhotoEditorActivity" />
<activity android:name="com.yalantis.ucrop.UCropActivity" />

🛠️ Usage

Promise API (recommended)

import { ImageEditor } from '@phucprime/react-native-image-editor';

const editedPath = await ImageEditor.edit('/path/to/image.jpg', {
  colors: ['#ff0000', '#00ff00', '#0000ff'],
  stickers: ['sticker1', 'sticker2'],
});

Callback API

ImageEditor.open({
  path: '/path/to/image.jpg',
  onDone: (path) => console.log('Saved:', path),
  onCancel: () => console.log('Cancelled'),
});

⚙️ Configuration Options

| Property | Type | Default | Description | | ---------------- | ---------- | --------------- | ------------------------------------------------------------------------------------------------------ | | path | string | Required | Local file URI/path of the image to edit. | | colors | string[] | Default palette | Array of hex color strings for drawing and text. | | stickers | string[] | [] | List of sticker image names located in native resource folders. | | hiddenControls | string[] | [] | Array of controls to hide ('text', 'clear', 'draw', 'save', 'share', 'sticker', 'crop'). | | languages | object | English | Object map for localized UI text strings. |

Tip: Use react-native-fs or @react-native-camera-roll/camera-roll to handle native file paths in sandbox directories before passing them to the editor.

🎨 Adding Custom Stickers

• iOS: Add image assets (.png) to your main Xcode Project's Resources bundle.
• Android: Add image assets (.png) to android/app/src/main/res/drawable/.

Refer to the Example project for a ready-to-run demonstration setup.

📄 License

Distributed under the Apache 2.0 License.

🙏 Credits

Maintained by nguyenhoangphucvnm. Based on prscX/react-native-photo-editor, built upon native photo editor SDKs.