react-native-crop-images

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
• Getting started
• Troubleshooting
• Contribution

Installation

First Step(Download):

$ npm install --save react-native-crop-images

$ yarn add react-native-crop-images

Manual Installation(If Needed)

Android:

1. 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')

1. 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:

1. cd ios
2. 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.

MIT Licensed