# react-native-photo-cropper

> The photo cropper component, similar to Instagram's.

Latest version **1.5.0** (published 2023-11-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-photo-cropper
pnpm add react-native-photo-cropper
yarn add react-native-photo-cropper
bun add react-native-photo-cropper
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.5.0 |
| Published | 2023-11-24 |
| First published | 2023-09-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 13.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Cuong Lam |
| Maintainers | thanhcuong1990 |
| Keywords | react-native, react, native, image, picker, cropper, crop, instagram |

## Links

- npm: https://www.npmjs.com/package/react-native-photo-cropper
- Repository: https://github.com/thanhcuong1990/react-native-photo-cropper
- Homepage: https://github.com/thanhcuong1990/react-native-photo-cropper#readme
- Issues: https://github.com/thanhcuong1990/react-native-photo-cropper/issues
- npm.io page: https://npm.io/package/react-native-photo-cropper

## Dependencies (1)

- [@babel/eslint-parser](https://npm.io/package/@babel/eslint-parser.md) ^7.22.15

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.5.0 (latest) — 2023-11-24
- 1.4.0 — 2023-10-18
- 1.3.0 — 2023-10-12
- 1.2.0 — 2023-09-06
- 1.1.0 — 2023-09-05
- 1.0.0 — 2023-09-05

## README

# react-native-photo-cropper
React Native Image Cropper, inspired by Instagram
## Preview

<img src="https://github.com/thanhcuong1990/react-native-photo-cropper/blob/main/gifs/iphone.gif" alt="preview" width="300px" />

## Getting started
### First, install peer packages
- [react-native-gesture-handler@^2.12.1](https://docs.swmansion.com/react-native-gesture-handler/docs/)
- [react-native-reanimated@^3.4.2](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/)
- [react-native-image-editor-next@^1.1.0](https://github.com/thanhcuong1990/react-native-image-editor)
### 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
```javascript
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
```ts
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;
  }
}
```

---
_Source: https://npm.io/package/react-native-photo-cropper · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._