react-native-crop-images
v0.0.17
Published
Image Cropping Library for Android and iOS
Downloads
851
Maintainers
Readme
react-native-crop-images
React Native app image cropping library
Image Cropping Module for React Native
This module provides a comprehensive solution for image cropping within React Native applications, specifically tailored for the Android & iOS platform.
Content
Installation
First Step(Download):
$ npm install --save react-native-crop-images
$ yarn add react-native-crop-images
Manual Installation(If Needed)
Android:
- In your
android/settings.gradle
file, make the following additions:
include ':react-native-crop-images'
project(':react-native-crop-images').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-crop-images/android')
- In your android/app/build.gradle file, add the
:react-native-crop-images
project as a compile-time dependency:
...
dependencies {
...
implementation project(':react-native-crop-images')
}
iOS:
cd ios
run pod install
Getting started
Usage
Configuration
CropImage.configure({
cropEnabled: true, // true or false
cropType: 'rectangular', //circular or rectangular
freeStyleCropEnabled: true, // true or false
showCropFrame: true, // true or false
showCropGrid: true, // true or false
dimmedLayerColor: '#99000000', // any color
imageQuality: 80, // integer, 60-100
multipleImage: true, // true or false
});
Pick Image
CropImage.pickImage()
.then(uri => {
console.log(uri);
})
.catch(error => console.error(error));
Capture Image
CropImage.captureImage()
.then(uri => {
console.log(uri);
})
.catch(error => console.error(error));
Sample Code
import React from 'react'
import { StyleSheet, Text, View, Image, Pressable } from 'react-native'
import CropImage from 'react-native-crop-image';
CropImage.configure({
cropEnabled: true, // true or false
cropType: 'circular', //circular or rectangular
freeStyleCropEnabled: false, // true or false
showCropFrame: false, // true or false
showCropGrid: false, // true or false
dimmedLayerColor: '#99000000', // any color
imageQuality: '60', // between 60 to 100
multipleImages:false, // true or false
});
const App = () => {
const [croppedImageUri, setCroppedImageUri] = React.useState(null);
const handleOpenImageCrop = () => {
CropImage.pickImage()
.then(uri => {
console.log(uri);
setCroppedImageUri(uri);
})
.catch(error => console.error(error));
}
const handleCaptureImageCrop = () => {
CropImage.captureImage()
.then(uri => {
console.log(uri);
setCroppedImageUri(uri);
})
.catch(error => console.error(error));
}
return (
<View>
<Pressable style={{ margin: 10, padding: 10, borderRadius: 10, backgroundColor: '#3572EF', alignItems: 'center', justifyContent: 'center' }} onPress={handleOpenImageCrop} >
<Text style={{ color: 'white' }}>Open Image Crop</Text>
</Pressable>
<Pressable style={{ margin: 10, padding: 10, borderRadius: 10, backgroundColor: '#3572EF', alignItems: 'center', justifyContent: 'center' }} onPress={handleCaptureImageCrop} >
<Text style={{ color: 'white' }}>Capture Image Crop</Text>
</Pressable>
{croppedImageUri && <Image source={{ uri: croppedImageUri }} style={styles.image} />}
</View>
)
}
export default App
const styles = StyleSheet.create({
image: {
width: 200,
height: 200,
resizeMode: 'contain'
},
})
Configuration Object
| Property | Type | Description |
| -------------------- | :--------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| cropType | string (default rectangular) | The cropType
property of the image cropping library specifies the type of cropping area used. It can be either 'rectangular' or 'circular'. This property determines the shape of the selectable crop area when using the library's crop functionality. |
| freeStyleCropEnabled | bool (default true) | When freeStyleCropEnabled
is set to true, users can freely adjust the cropping frame according to their preference, allowing for non-fixed cropping dimensions. |
| showCropFrame | bool (default true) | When showCropFrame
is set to true, the crop frame lines are displayed in the crop view, aiding users in adjusting the cropping area. |
| showCropGrid | bool (default true) | When showCropGrid
is set to true, a grid is displayed within the crop frame, providing a visual aid for precise cropping. |
| dimmedLayerColor | any (default #99000000
) | Specifies the color used to dim the background behind the crop image UI. You can use direct color names (e.g., "black") or specify colors using an ARGB hexadecimal format (e.g., #99000000 for semi-transparent black). |
| |
| imageQuality | integer (default 60
) | When imageQuality
is set to an integer between 60 (lower quality) and 100 (highest quality), it determines the quality of the image.
. |
| |
Response String
| Property | Type | Description |
| -------- | :----: | :------------------------------------------------------------------------------------------------------------ |
| uri | string | The URI of the selected image returned by the function CropImage.pickImage()
or CropImage.captureImage()
. |
| |