react-native-photo-cropper

React Native Image Cropper, inspired by Instagram

Preview

Getting started

First, install peer packages

• react-native-gesture-handler@^2.12.1
• react-native-reanimated@^3.4.2
• react-native-image-editor-next@^1.1.0

Second, install package

npm install react-native-photo-cropper --save or yarn add react-native-photo-cropper

Thired, pod install

cd ios && pod install && cd ..

Usage

import React, {useState} from 'react';
import {Image, StyleSheet, Text, View} from 'react-native';
import PhotoCropper from 'react-native-photo-cropper';

const App = () => {
  const [croppedImage, setCroppedImage] = useState<string | null>(null);

  return (
    <View >
        <PhotoCropper
          onCropped={data => setCroppedImage(data.croppedUri)}
          image={{
            width: 1600,
            height: 700,
            uri: 'https://dummyimage.com/1600x700/b5b5b5/ffffff.png',
          }}
        />
        <Text>Cropped image</Text>
        {croppedImage && (
          <Image source={{uri: croppedImage}} style={styles.image} />
        )}
    </View>
  );
};

Props

export interface PhotoCropperProps {
  image: { // required
    uri: string;
    width: number;
    height: number;
  };
  width?: number; // default Dimensions.get('window').width
  height?: number; // default Dimensions.get('window').width
  grid?: boolean; // default true
  gridVerticalNum?: number; // default 2
  gridHorizontalNum?: number; // default 2
  gridColor?: string; // default '#fff'
  onCropped?: (data: CroppedData) => void;
  maxScale?: number;  // default 2 / range 1 ~ ∞
  initialX?: number;
  initialY?: number;
  initialScale?: number; // default 1
  initialOpacity?: number; // default 1
}

export interface CroppedData {
  croppedUri: string;
  originalUri: string;
  croppedArea: {
    width: number;
    height: number;
    x: number;
    y: number;
  }
}