Skip to content

sarangan/react-native-image-cropper-ios

Repository files navigation

This is the modified version of image cropping library https://github.com/meznaric/react-native-image-cropping

This is designed to work for local and network images, follow the installation as original library and replace the file ReactNativeImageCropping.m which should be enough to accept images.

usage

let ReactNativeImageCropping = NativeModules.ReactNativeImageCropping;

     ReactNativeImageCropping
     	.cropImageWithUrl(imagePath, 'PATH') // this can be 'PATH for local images and 'URL' for network images
         .then(image => {
     		//Image is saved in NSTemporaryDirectory!
     		//image = {uri, width, height}
         console.log(image.uri);
     	},
     	err => console.log(err));

Simple react-native image cropping library wrapper around siong1987/TOCropViewController

TOCropViewController

Installation

Supported only on iOS.

Add it to your project

  1. npm install react-native-image-cropping --save
  2. In XCode, in the project navigator, right click LibrariesAdd Files to [your project's name]
  3. Go to node_modulesreact-native-image-cropping and add ReactNativeImageCropping.xcodeproj
  4. In XCode, in the project navigator, select your project. Add libReactNativeImageCropping.a to your project's Build PhasesLink Binary With Libraries
  5. Click ReactNativeImageCropping.xcodeproj in the project navigator and go the Build Settings tab. Make sure 'All' is toggled on (instead of 'Basic'). Look for Header Search Paths and make sure it contains both $(SRCROOT)/../react-native/React and $(SRCROOT)/../../React - mark both as recursive.
  6. Re-run your project (Cmd+R)

Setup trouble?

If you get stuck open an issue. It's the first time I've published react native package and I may have not provided all necessary information.

Usage

Import module

const React = require('react-native');
const {ReactNativeImageCropping} = React.NativeModules;

Crop the image

It is using RCTImageLoader so it should be able to crop any image that react knows how to load / display.

Without aspect ratio restriction:

const originalImage = require('CrazyFlowers.jpg');

ReactNativeImageCropping
	.cropImageWithUrl(originalImage.uri)
    .then(image => {
		//Image is saved in NSTemporaryDirectory!
		//image = {uri, width, height}	
	},
	err => console.log(b));

Lock to specific aspect ratio:

Available aspect ratios:

 - AspectRatioOriginal
 - AspectRatioSquare
 - AspectRatio3x2
 - AspectRatio5x4
 - AspectRatio4x3
 - AspectRatio5x4
 - AspectRatio7x5
 - AspectRatio16x9

Example:

let aspectRatio = ReactNativeImageCropping.AspectRatioSquare;

ReactNativeImageCropping
    .cropImageWithUrlAndAspect(imageUrl, aspectRatio)
    .then(image => {
        //Image is saved in NSTemporaryDirectory!
        //image = {uri, width, height}  
    },
    err => console.log(b));

About

https://github.com/meznaric/react-native-image-cropping ( modified version for personal use )

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published