@vitaliez/react-native-image-editor-sdk

React Native Image Editor SDK

Advanced image editing SDK for iOS with GPU acceleration, supporting filters, adjustments, layers, and drawing tools.

🎉 New in v1.2: Built-in Native UI!

Now with two ways to use the SDK:

• 🎨 Built-in UI Mode (New!) - Complete native editing interface with zero custom UI code
• 🛠️ API Mode - Full imperative API for custom UI implementations

Choose the best approach for your needs!

Features

✨ Core Capabilities

• GPU Accelerated - Metal & Core Image powered processing
• Non-destructive Editing - Full undo/redo with state management
• Layer System - Multiple layers with blend modes and opacity
• Real-time Preview - Instant visual feedback
• Native UI (v1.2+) - Complete editing interface built-in

🎨 Editing Tools

• Adjustments - Brightness, contrast, saturation, exposure, highlights, shadows, temperature, tint, sharpness, noise reduction, vignette
• Filters - Instagram-style presets, custom filter chains, LUT (.cube) support
• Transformations - Crop, rotate, flip, perspective correction, resize
• Drawing - Free drawing with brush tools, eraser, shapes
• Text & Stickers - Text layers with customization, PNG/SVG sticker support

📦 Export Options

• JPEG / PNG / HEIC formats
• Custom quality settings
• Multi-resolution export (thumbnails, previews, full)
• EXIF preservation
• Async export with progress

Installation

npm install react-native-image-editor-sdk
# or
yarn add react-native-image-editor-sdk

For Expo projects

npx expo install react-native-image-editor-sdk
npx expo prebuild --clean
npx expo run:ios

Usage

Option 1: Built-in UI (Fastest - v1.2+)

import { ImageEditorUI, ImageEditorUIPresets } from 'react-native-image-editor-sdk';

function MyEditor() {
  return (
    <ImageEditorUI
      source={{ uri: 'file:///path/to/image.jpg' }}
      config={ImageEditorUIPresets.professional()}
      onExport={(result) => console.log('Saved:', result.uri)}
      style={{ flex: 1 }}
    />
  );
}

That's it! Complete image editor with all tools in 9 lines of code.

👉 UI Quick Start Guide

Option 2: Custom UI with API (Full Control)

import { ImageEditorView, ImageEditorModule } from 'react-native-image-editor-sdk';

// Using the native view component
function MyEditor() {
  return (
    <ImageEditorView
      source={{ uri: 'file://path/to/image.jpg' }}
      style={{ flex: 1 }}
      onReady={() => console.log('Editor ready')}
      onChange={(event) => console.log('Image changed', event.nativeEvent)}
    />
  );
}

// Using the module API
async function applyFilter() {
  await ImageEditorModule.loadImage('file://path/to/image.jpg');
  await ImageEditorModule.applyFilter('vintage', { intensity: 0.8 });
  const result = await ImageEditorModule.export({ format: 'jpeg', quality: 0.9 });
  console.log('Exported to:', result.uri);
}

📚 Documentation

• UI Quick Start - Get started with built-in UI (v1.2+)
• V1.2 UI Implementation - Complete UI documentation
• API Reference - Full API documentation
• Installation Guide - Detailed setup instructions
• Architecture - System design and internals
• Quick Reference - Developer cheat sheet
• Examples - Sample applications

🎯 Choose Your Approach

Approach	Best For	Setup Time	Flexibility
Built-in UI	Standard editing, MVP, quick prototyping	Minutes	Config-based
Custom UI (API)	Unique workflows, custom UX	Hours	Unlimited

Requirements

• iOS 15.0+
• Expo SDK 50+ or React Native 0.73+
• Swift 5.9+

What's New

v1.2.0 (December 2025)

• ✨ Built-in Native UI - Complete editing interface with zero custom code
• 🎛️ Configurable Features - Enable/disable tools via props
• 🎁 Presets - Ready-made configs (minimal, photoEditor, socialMedia, professional)
• 📱 Native Performance - 100% Swift UI, no WebView

v1.1.0 (December 2025)

• 🎨 LUT Support - Color grading with .cube files
• 🧠 Memory Monitoring - Adaptive performance for large images
• 📦 HEIC Export - Modern format support
• 🖼️ Multi-Resolution Export - Thumbnails, previews, full resolution

License

MIT