0.0.21 • Published 6 months ago
react-native-crop-images v0.0.21
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() . |
Contribution
Issues are welcome. Please add a screenshot of you bug and a code snippet. Quickest way to solve issue is to reproduce it in one of the examples.
0.0.20
6 months ago
0.0.1-4.alpha.6
7 months ago
0.0.21
6 months ago
0.0.1-4.alpha.4
7 months ago
0.0.1-4.alpha.5
7 months ago
0.0.1-4.alpha.2
7 months ago
0.0.1-4.alpha.3
7 months ago
0.0.15
7 months ago
0.0.16
7 months ago
0.0.1-4.alpha.1
7 months ago
0.0.17
7 months ago
0.0.18
6 months ago
0.0.19
6 months ago
0.0.13
7 months ago
0.0.11
8 months ago
0.0.12
8 months ago
0.0.10
8 months ago
0.0.9
8 months ago
0.0.8
8 months ago
0.0.7
8 months ago
0.0.6
11 months ago
0.0.5
12 months ago
0.0.4
12 months ago
0.0.3
12 months ago
0.0.2
12 months ago
0.0.1
12 months ago