3.2.1 • Published 5 years ago
react-native-simple-image-cropper v3.2.1
react-native-simple-image-cropper
Simple react-native component for image cropping.
Show Case
Installation
npm i react-native-simple-image-cropper --save
or
yarn add react-native-simple-image-cropper
Installing dependencies
npm i react-native-reanimated react-native-gesture-handler @react-native-community/image-editor --save
or
yarn add react-native-reanimated react-native-gesture-handler @react-native-community/image-editor
Libraries installation details: @react-native-community/image-editor, react-native-gesture-handler, react-native-reanimated.
Usage
import React from 'react';
import { Dimensions, View, Image, Button } from 'react-native';
import ImageCropper from 'react-native-simple-image-cropper';
const window = Dimensions.get('window');
const w = window.width;
const IMAGE = 'https://picsum.photos/id/48/900/500';
const CROP_AREA_WIDTH = w;
const CROP_AREA_HEIGHT = w;
class App extends React.Component {
state = {
cropperParams: {},
croppedImage: '',
};
setCropperParams = cropperParams => {
this.setState(prevState => ({
...prevState,
cropperParams,
}));
};
handlePress = async () => {
const { cropperParams } = this.state;
const cropSize = {
width: 200,
height: 200,
};
const cropAreaSize = {
width: CROP_AREA_WIDTH,
height: CROP_AREA_HEIGHT,
};
try {
const result = await ImageCropper.crop({
...cropperParams,
imageUri: IMAGE,
cropSize,
cropAreaSize,
});
this.setState(prevState => ({
...prevState,
croppedImage: result,
}));
} catch (error) {
console.log(error);
}
};
render() {
const { croppedImage } = this.state;
const src = { uri: croppedImage };
return (
<View>
<ImageCropper
imageUri={IMAGE}
cropAreaWidth={CROP_AREA_WIDTH}
cropAreaHeight={CROP_AREA_HEIGHT}
containerColor="black"
areaColor="black"
setCropperParams={this.setCropperParams}
/>
<Button onPress={this.handlePress} title="Crop Image" color="blue" />
{croppedImage ? (
<Image source={src} />
) : null}
</View>
);
}
}
Area overlay
To add a custom overlay, use the areaOverlay
property
<ImageCropper
...
areaOverlay={<Image src={require('./overlay.png')}>}
/>
License
MIT
Thanks for contribution
3.2.1
5 years ago
3.2.0
5 years ago
3.1.0
5 years ago
4.0.0-beta-1
5 years ago
4.0.0-beta-0
5 years ago
3.0.8
5 years ago
3.0.7
5 years ago
3.0.6
5 years ago
3.0.4
5 years ago
3.0.3
5 years ago
3.0.2
5 years ago
3.0.5
5 years ago
3.0.1
5 years ago
3.0.0
5 years ago
2.0.2
6 years ago
2.0.1
6 years ago
2.0.0
6 years ago
1.1.2
6 years ago
1.1.1
6 years ago
1.1.0
6 years ago
1.0.8
6 years ago
1.0.7
6 years ago
1.0.6
6 years ago
1.0.5
6 years ago
1.0.4
6 years ago
1.0.3
6 years ago
1.0.2
6 years ago
1.0.1
6 years ago
1.0.0
6 years ago