Package Exports

react-native-crop-images
react-native-crop-images/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-crop-images) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

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.

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.

MIT Licensed