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-image-crop

v1.0.2

Published

Crop images with React Native

Downloads

3

Readme

react-native-image-crop

Image crop editor component for iOS and Android. Move the image in the area and crop it.

Demo

Installation

This component is dependent of react-native-image-resizer (See Github) which needs to be installed and linked to your project before.

If you don't have rnpm installed on your computer, install it first:

npm install -g rnpm

Then, install and link the peer dependency:

npm install --save react-native-image-resizer
rnpm link

Now you can install this component

npm install --save react-native-image-crop

Usage

Import the component into the file you want to use it:

import ImageCrop from 'react-native-image-crop';

Use the component directly in your code. The component will automatically fit the parent view.

<View>
	<ImageCrop
		ref={(c) => { this.imageCrop = c; }}
		cropWidth={500}
		cropHeight={500}
		image={{
			uri: 'https://c1.staticflickr.com/9/8073/28582653114_d154039cb9_k.jpg',
		}}
	/>
</View>

To crop the image, you can call the method crop() from the component

onButtonPress() {
	this.imageCrop.crop().then((uri) => {
	  // uri contains the cropped image
	});
}

Note: If you use a large image, you might need to preload it before using this component.

Properties

| Property | Type | Description | |--- |--- |--- | | image| ImageSource https://facebook.github.io/react-native/docs/image.html#source | Source of the image. This property is mandatory | | containerPaddingLeft | Number | Apply padding on the left of the image Default: 20 | | containerPaddingRight | Number | Apply padding on the right of the image Default: 20 | | containerPaddingTop | Number | Apply padding at the top of the image Default: 20 | | containerPaddingBottom | Number | Apply padding at the bottom of the image Default: 20 | | cropWidth | Number | Enforce the cropped width of the image. This property must be used with cropHeight | | cropHeight | Number | Enforce the cropped height of the image. This property must be used with cropWidth | | cropQuality | Number | Image quality, from 0 to 100 Default: 80 |

Methods

| Method | Description | Example | |--- |--- |--- | | crop() | Crop and, if necessary, resize the image. This method returns a Promise. | this.imageCrop.crop().then((uri) => { this.setState({ uri })}) |

Todo

  • Pinch and zoom. Add new properties defaultZoom, minZoom, maxZoom