@imran_afzal/react-native-photo-editor

@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 @dr.pogodin/react-native-fs

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 @dr.pogodin/react-native-fs

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('Image saved to:', result.uri);
        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