@imran_afzal/react-native-photo-editor

A powerful, customizable, and high-performance photo editor for React Native and Expo, powered by Skia.

Features

• 🎨 Filters: Grayscale, Sepia, Vintage, Dramatic, and more.
• ⚙️ Adjustments: Brightness, Contrast, Saturation, Exposure, Warmth, Vignette, and Grain.
• 📝 Text Overlays: Add multiple text layers with custom fonts, colors, backgrounds, and shadows.
• 🖌️ Drawing: Freehand drawing with brush tool.
• ✂️ Crop & Rotate: Intuitive cropping and rotation tools.
• ✨ Templates: Pre-designed poster and edit templates.
• ↩️ Undo/Redo: Full history support for all edits.
• 🚀 High Performance: Hardware-accelerated rendering via @shopify/react-native-skia.

Installation

npm install @imran_afzal/react-native-photo-editor
# or
yarn add @imran_afzal/react-native-photo-editor

Peer Dependencies

This package requires several peer dependencies. Install them if you haven't already:

npm install @shopify/react-native-skia react-native-gesture-handler react-native-reanimated react-native-safe-area-context @react-native-community/slider @react-native-vector-icons/material-icons

Expo Setup

For Expo projects, you must use Development Builds (expo-dev-client) as this package uses native modules. It will not work in Expo Go.

npx expo install @shopify/react-native-skia react-native-gesture-handler react-native-reanimated react-native-safe-area-context @react-native-community/slider

Quick Start

import React, { useState } from 'react';
import { PhotoEditor } from '@imran_afzal/react-native-photo-editor';

export default function App() {
  const [visible, setVisible] = useState(true);

  return (
    <PhotoEditor
      visible={visible}
      imageUri="https://example.com/photo.jpg"
      onSave={(result) => {
        console.log('Saved image width:', result.width);
        console.log('Base64 data:', result.base64.substring(0, 50) + '...');
        setVisible(false);
      }}
      onCancel={() => setVisible(false)}
    />
  );
}

Props API

| Prop | Type | Default | Description | |---|---|---|---| | visible | boolean | Required | Controls the visibility of the editor modal. | | imageUri | string | Required | The URI of the image to edit (local file or remote URL). | | onSave | (result: PhotoEditorResult) => void | Required | Called when the user clicks "Save". | | onCancel | () => void | Required | Called when the user clicks "Cancel" or closes the modal. | | imageWidth | number | undefined | Width of the image (auto-detected if omitted). | | imageHeight | number | undefined | Height of the image (auto-detected if omitted). | | tools | EditorTool[] | all tools | Array of tool names to display in the toolbar. | | theme | Partial<ThemeColors> | system theme | Override specific theme colors. | | outputFormat | 'png' \| 'jpeg' | 'png' | Format of the output image. | | outputQuality | number | 100 | Quality of the output image (0-100). |

License

MIT © Imran Afzal