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
• 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')

2. 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

Response String

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