npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-native-crop-images

v0.0.17

Published

Image Cropping Library for Android and iOS

Downloads

851

Readme

react-native-crop-images

Download

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:

  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