react-native-image-cropper-jamia

react-native-image-cropper-thanhtq

Result

iOS Installation

do it manually as described below:

1. Run npm install react-native-image-cropper-thanhtq --save
2. Open your project in XCode, right click on Libraries and click Add Files to "Your Project Name" Look under node_modules/react-native-image-cropper-thanhtq and add TOCropViewController.xcodeproj.
3. Add libImageCropperManager.a to Build Phases -> Link Binary With Libraries
4. Done!

Android Installation

Run npm install react-native-image-cropper-thanhtq --save You can use the React Native CLI to add native dependencies automatically: $ react-native link react-native-image-cropper-thanhtq

Manual setup

In android/settings.gradle

...
 
include ':react-native-image-cropper-thanhtq'
project(':react-native-image-cropper-thanhtq').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-image-cropper-thanhtq/android')

In android/app/build.gradle

...
 
dependencies {
    ...
 
    compile project(':react-native-image-cropper-thanhtq')
}

Register module (in MainApplication.java)

import com.cropimagepicker.cropper.ImageCropperPackage; // <--- Import Package 
 
public class MainApplication extends Application implements ReactApplication {
 
  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    protected boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }
 
    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new ImageCropperPackage() // <--- Initialize the package 
      );
    }
  };
 
  @Override
  public ReactNativeHost getReactNativeHost() {
      return mReactNativeHost;
  }
}
 

---

Usage

1. For Android:

import ImageCropper from 'react-native-image-cropper-thanhtq'
 
let options = {
            guideLines: 'on-touch',
            cropShape: 'rectangle',
            title: 'CROP AVATAR',
            cropMenuCropButtonTitle: 'Done',
            uri_image: response.path,
            fixAspectRatio: true
          }
 ImageCropper.selectImage(options, (responseCrop) => {
    if (responseCrop && responseCrop.uri) { // uri = 'file://' + path
        console.log("UIr crop", responseCrop.uri)
              // crop succeeded
    } else if(responseCrop.error){
              //error handling
    }
  });

1. For iOS:

import ImageCropper from 'react-native-image-cropper-thanhtq';
let options = {
   urlBase64Image: 'data:image/jpg;base64,' + response.data,
   path: response.uri
 }
ImageCropper.showViewCrop(options, (data) => {
   let encodedData = data
   let newUri = `data:image/jpg;base64,${encodedData}`
 })

----------------------END------------------------