Select Page

We all like to crop our favorite images and save them for a time when those pictures remind us of some of our life’s best moments. With this React Native Android Image Cropper, you will be able to enhance the images you have captured in your own style.

It hosts the best Image Cropper Library and it will surely give you rich image cropping experience.

    • Top Feature

    • Rotate
    • Flip ( horizontally / vertically )
    • Benefits of using this barcode scanner

    • Powerful ( Zoom, Rotation, Multi-Source )
    • Customizable ( Shape, Limits, Style )
    • Optimized ( Async, Sampling, Matrix )
    • Simple image cropping library for React-Native Android Module
    • How to install it

    • npm i react-native-android-image-cropper@latest –save
    • react-native link
    • Manual Installation

Add the following lines to android/settings.gradle:

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

Add the compile line to the dependencies in android/app/build.gradle:

dependencies {

compile project(‘:react-native-android-image-cropper’)

}

Add the import and link the package in MainApplication.java:

importcom.ozdevcode.theartofdev.edmodo.cropper.ImageCropperPackage; // <– add this import

public class MainApplication extends Application implements ReactApplication {

@Override

protected List<ReactPackage>getPackages() {

return Arrays.<ReactPackage>asList(

newMainReactPackage(),

newImageCropperPackage() // <– add this line

);

}

}

  • Usage

how to use

  • Options You Have

PropsDefaultOptions/Info
guideLines (String)onoff: no guidelines will be displayed.
on: guidelines will always be displayed.
on-touch: guidelines will be displayed when the crop window is touched.
cropShape (String)rectanglerectangle,oval
useFixAspectRatio for Square / Circle.
title (String)Crop ImageSet window title
cropMenuCropButtonTitle (String)DoneSet crop button's title
requestedSizeHeight (int)0The height to resize the cropped image to
requestedSizeWidth (int)0The width to resize the cropped image to
allowCounterRotation (boolean)falseAllow counter-clockwise rotation during cropping.
Note: if rotation is disabled this option has no effect.
allowFlipping (boolean)falseAllow flipping during cropping
aspectRatio (array [int,int])[1,1]X,Y value of the aspect ratio.
* Also sets fixes aspect ratio to TRUE.
transferFileToExternalDir (boolean)falseMove cropped image from cache directory to external directory. Otherwise the image will stored in app cache folder.
externalDirectoryName (String)CropImageName of folder if transferFileToExternalDir is true
autoZoomEnabled (boolean)trueAuto-zoom functionality is enabled
maxZoom (int)4The max zoom allowed during cropping
fixAspectRatio (boolean)falseWhether the width to height aspect ratio should be maintained or free to change.
initialCropWindowPaddingRatio (double)0.10% - 100%. The initial crop window padding from image borders in percentage of the cropping image dimensions.
Set to 0 for initial crop window to fully cover the cropping image.
borderCornerThickness (double)2dp - Thickness of the corner line (in pixels).Set to 0 to remove.
borderCornerOffset (double)5dp - The offset of corner line from crop window border (in pixels). Set to 0 to place on top of the border lines.
borderCornerLength (double)12dp - The length of the corner line away from the corner (in pixels)
guidelinesThickness (double)1dp - The thickness of the guidelines lines (in pixels)
snapRadius (double)3dp - An edge of the crop window will snap to the corresponding edge of a specified bounding box when the crop window edge is less than or equal to this distance (in pixels) away from the bounding box edge (in pixels).
Set 0 to disable snapping
showCropOverlay (boolean)trueShow crop overlay UI what contains the crop window UI surrounded by background over the cropping image
minCropWindowWidthHeight (array [int,int])[40,40]dp - The min size the crop window is allowed to be (in pixels) minimum width/height 10
flipHorizontallytrueWhether the image should be flipped horizontally
flipVerticallytrueWhether the image should be flipped vertically
  • Screenshots

select source from galleryselect image from sourcecrop image with cropper

 

 

 

 

 

 

 

 

 

 

React Native Android Image Cropper gives you the best image cropping facility. Its image cropper library has all the necessary tools to make image cropping activity a rich experience.

Finally!

Metizsoft Solutions, a react native development company will continue to broaden your knowledge base with more such articles. Till then Good Bye!

Read More:

React Native Barcode Scanner
React Native Document Scanner
Firebase Integration with React Native 
5/5 (1 Review)