What does cropping an image mean? Cropping is simply cutting the picture to short and removing unwanted parts or areas of an image. By cropping an image, we can cut the unwanted parts and focus on what we actually want. There are many image cropping tools and apps available which crops the images without affecting its quality much. One such image cropping tool is to React to Native Android Image Cropper. With React Native Image Cropper, you will be able to enhance the images you have captured in your style.
TABLE OF CONTENTS
React Native is the best image cropper library and it surely gives you a rich image shopping experience.
-
-
What are the top features of React Native Image cropper?
- Rotating the image (Left, Right, Upside Down)
- Flip the image (Horizontally / Vertically)
-
What are the benefits of using this Cam Scanner Library?
- 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 React Native Image Cropper?
- npm i [email protected] –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
Options You Have
| Props | Default | Options/Info |
|---|---|---|
| guideLines (String) | on | off: 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) | rectangle | rectangle,oval useFixAspectRatio for Square / Circle. |
| title (String) | Crop Image | Set window title |
| cropMenuCropButtonTitle (String) | Done | Set crop button's title |
| requestedSizeHeight (int) | 0 | The height to resize the cropped image to |
| requestedSizeWidth (int) | 0 | The width to resize the cropped image to |
| allowCounterRotation (boolean) | false | Allow counter-clockwise rotation during cropping. Note: if rotation is disabled this option has no effect. |
| allowFlipping (boolean) | false | Allow 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) | false | Move cropped image from cache directory to external directory. Otherwise the image will stored in app cache folder. |
| externalDirectoryName (String) | CropImage | Name of folder if transferFileToExternalDir is true |
| autoZoomEnabled (boolean) | true | Auto-zoom functionality is enabled |
| maxZoom (int) | 4 | The max zoom allowed during cropping |
| fixAspectRatio (boolean) | false | Whether the width to height aspect ratio should be maintained or free to change. |
| initialCropWindowPaddingRatio (double) | 0.1 | 0% - 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) | 2 | dp - Thickness of the corner line (in pixels).Set to 0 to remove. |
| borderCornerOffset (double) | 5 | dp - The offset of corner line from crop window border (in pixels). Set to 0 to place on top of the border lines. |
| borderCornerLength (double) | 12 | dp - The length of the corner line away from the corner (in pixels) |
| guidelinesThickness (double) | 1 | dp - The thickness of the guidelines lines (in pixels) |
| snapRadius (double) | 3 | dp - 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) | true | Show 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 |
| flipHorizontally | true | Whether the image should be flipped horizontally |
| flipVertically | true | Whether the image should be flipped vertically |
Screenshots
Here are some of the screenshots that will give you some idea of how this works:
React Native Android Image Cropper gives you the best image cropping experience. Its image cropper library has all the necessary tools to make image cropping activity a rich experience. With React Native Android Cropper, the quality of the image doesn’t get affected. The image quality falls just a little but overall, the image quality remains unaffected.
Finally!
Metizsoft Solutions is a react native development company. We have completed many React Native projects till now and create the most amazing feature-filled reach native solutions. Hire our React Native developers for your next React Native Projects. We will continue to broaden your knowledge base with more such articles. In case you have any queries or questions, get in touch with us.
Complete guide of React Native Android image cropper helps to Crop the image specified support for the camera.
Is it not work in ios?
Hello Damini,
No. It’s only for Android. You can find similar functionality from below library for the iOS: https://www.npmjs.com/package/react-native-image-crop-picker