https://github.com/alexmngn/react-native-image-crop

https://github.com/alexmngn/react-native-image-crop

Last synced: 16 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/alexmngn/react-native-image-crop
• Owner: alexmngn
• Created: 2016-09-07T05:51:11.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2018-09-11T12:58:28.000Z (over 6 years ago)
• Last Synced: 2024-12-07T20:55:24.007Z (16 days ago)
• Language: JavaScript
• Size: 112 KB
• Stars: 48
• Watchers: 2
• Forks: 25
• Open Issues: 5
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-native-image-crop

Image crop editor component for iOS and Android. Move the image in the area and crop it. 


![Demo](https://cloud.githubusercontent.com/assets/4203845/18342608/30ae62a6-75e2-11e6-9508-0fda0e9d9ebd.gif)

## Installation

This component is dependent of `react-native-image-resizer` [(See Github)](https://github.com/bamlab/react-native-image-resizer) which needs to be installed and linked to your project before.

If you don't have `rnpm` installed on your computer, install it first:

```

npm install -g rnpm

```

Then, install and link the peer dependency:

```

npm install --save react-native-image-resizer

rnpm link

```

Now you can install this component

```

npm install --save react-native-image-crop

```

## Usage

Import the component into the file you want to use it:

```js

import ImageCrop from 'react-native-image-crop';

```

Use the component directly in your code. The component will automatically fit the parent view.

```jsx

	 { this.imageCrop = c; }}

		cropWidth={500}

		cropHeight={500}

		source={{

			uri: 'https://c1.staticflickr.com/9/8073/28582653114_d154039cb9_k.jpg',

		}}

	/>

```

To crop the image, you can call the method `crop()` from the component

```js

onButtonPress() {

	this.imageCrop.crop().then((uri) => {

	  // uri contains the cropped image

	});

}

```

Note: If you use a large image, you might need to preload it before using this component.

## Properties

|  	Property |  	Type |  	Description |

|---	|---	|---	|

|  	`source`|  	ImageSource 
https://facebook.github.io/react-native/docs/image.html#source | Source of the image. 
 This property is mandatory |

|  	`containerPaddingLeft` |  	Number |  	Apply padding on the left of the image 
 Default: 20 |

|  	`containerPaddingRight` |  	Number |  	Apply padding on the right of the image 
 Default: 20 |

|  	`containerPaddingTop` |  	Number |  		Apply padding at the top of the image 
 Default: 20 |

|  	`containerPaddingBottom` |  	Number |  	Apply padding at the bottom of the image 
 Default: 20 |

|  	`cropWidth` |  	Number |  	Enforce the cropped width of the image. This property must be used with `cropHeight` |

|  	`cropHeight` |  	Number |  	Enforce the cropped height of the image. This property must be used with `cropWidth` |

|  	`cropQuality` |  	Number |  	Image quality, from 0 to 100 
 Default: 80 |

## Methods

|  	Method |  	Description |  	 Example |

|---	|---	|---	|

|  	`crop()` |  	Crop and, if necessary, resize the image. This method returns a Promise. |  	`this.imageCrop.crop().then((uri) => { this.setState({ uri })})` |

## Todo

* Pinch and zoom. Add new properties `defaultZoom`, `minZoom`, `maxZoom`