react-native-image-cropper - GitLite

KO | EN

gitlite — search

#ai #typescript #go #android #machine-learning #deep-learning #linux #macos #windows #cli #pytorch #mcp #openai #open-source

react-native-image-cropper

(★ 160)

Crop your images with zoom and pan

File Explorer

Download Latest Version (.zip)

- - build.gradle
  - gradle.properties
  - gradlew
  - gradlew.bat
  - settings.gradle
- .babelrc
- .buckconfig
- .flowconfig
- .gitattributes
- .gitignore
- .watchmanconfig
- index.android.js
- index.ios.js
- package.json
- yarn.lock
- Image.js
- ImageCrop.js
- index.js
.eslintrc.json
.gitignore
.npmignore
.travis.yml
LICENSE
package.json
README.md
yarn.lock

# Installation Guide

1. Get the code

git clone https://github.com/st0ffern/react-native-image-cropper

Downloads the entire project code from GitHub to your computer.

cd react-native-image-cropper

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm i -S react-native-image-cropper

Type this command into your terminal and run it.

yarn add react-native-image-cropper

Type this command into your terminal and run it.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# react-native-image-cropper ![](https://img.shields.io/npm/v/react-native-image-cropper.svg) ![](https://img.shields.io/badge/gl--react->=2.1-05F561.svg) ![](https://img.shields.io/badge/gl--react--native->=2.28.0-05F561.svg)

[![Greenkeeper badge](https://badges.greenkeeper.io/stoffern/react-native-image-cropper.svg)](https://greenkeeper.io/)

This Image cropper is based on the gl-react-native [library](https://github.com/ProjectSeptemberInc/gl-react-native)

![Cropping View](https://media.giphy.com/media/l46CDga4bxZccVxWU/giphy.gif)

## Installation
```
npm i -S react-native-image-cropper
```
or
```
yarn add react-native-image-cropper
```

## Requirements
- `gl-react` You need to install gl-react. `npm i -S gl-react` 
- `gl-react-native` You need to install gl-react-native and link the repo in RN. `npm i -S gl-react-native & rnpm link` 
- `react-native` Android requires you to have RN 0.28 or higher!

#### `{ImageCrop}` Props
- `image` **(required)**: uri to image that should be cropped.
- `cropHeight` **(required)**: height of the image in cropped size.
- `cropWidth` **(required)**: width of the image in cropped size.
- `zoom`: range 0 - 100 setting zoom value. where 100 = full zoom. (default: 0)
- `maxZoom`: max zoom value, should be bigger than minZoom value (default: 100)
- `minZoom`: min zoom value, should be smaller than maxZoom value (default: 0) 
- `panToMove`: Use pan to move image? (default: true)
- `pinchToZoom` Use pinch to zoom image? (default: true)
- `quality`: a value from 0 to 1 to describe the quality of the snapshot. 0 means 0% (most compressed) and 1 means 100% (best quality). (default: 1)
- `type`: the file type default value is **"png"**, **"jpg"** is also supported. Refer to implementations to see more supported values. (default: jpg)
- `format`: the format of the output. Supported values: **"base64"**, **"file"**. (default: base64)
- `filePath`: if format is **"file"**, the path to write the image to (default: "")
- `pixelRatio`: the pixel ratio to use for the rendering. By default the screen pixel scale will be used.

#### `{ImageCrop}` Functions
- `crop()`: returns a base64 encoded image.

## Example
```js
...
import {ImageCrop} from 'react-native-image-cropper'

...
render() {
  return (
  <View>
    <ImageCrop 
      ref={'cropper'}
      image={this.state.image}
      cropHeight={this.state.height}
      cropWidth={this.state.width}
      zoom={this.state.zoom}
      maxZoom={80}
      minZoom={20}
      panToMove={true}
      pinchToZoom={true}
    />
    <Text onPress={this.capture()}>Capture()</Text>
  </View>
    
  )
} 
capture(){
  this.refs.cropper.crop()
  .then(base64 => console.log(base64))
}
...

```