Feature request: Ability to set the default aspect ratio of cropper

[abdi4]

Version

Tell us which versions you are using:

• react-native-image-crop-picker v0.40.1
• react-native v0.67.5

Platform

Tell us to which platform this issue is related

• iOS

Expected behaviour

• When opening the cropper, we want to have the ability to set the initial aspect ratio of the crop rect.

Actual behaviour

• When you open the cropper, the crop rect defaults to an aspect ratio of 1:1

Steps to reproduce

1. Open Cropper

2. See Crop rect is 1:1

3. We want to have flexibility

Attachments

debug info

Other links i've found with no solution: link 1, link 2, link 3. I've also applied this patch but no luck. Love react-native-image-crop-picker? Please consider supporting our collective: 👉 https://opencollective.com/react-native-image-crop-picker/donate

[Maker-Mark]

@ivpusic Can you take a look at this or provide some guidance on how to implement this?

[Gabotron-ES]

Still no solution?

[amandeepp26]

Has anyone fund the solution?

[Maker-Mark]

@amandeepp26 Not really, though if you set a super large initial height/with it'll select the entire photo instead of this square. There's a patch with that change if you want that setup

add this to patches/react-native-image-crop-picker+0.41.0.patch and make sure you have "postinstall": "patch-package", in your package.json's scripts

# Adds originalAspectRatio to enable using the default aspect ratio when opening the picker with freeStyleCropEnabled:true on iOS
# This is a known issue on the repo: https://github.com/ivpusic/react-native-image-crop-picker/issues/1308 https://github.com/ivpusic/react-native-image-crop-picker/issues/1626 https://github.com/ivpusic/react-native-image-crop-picker/issues/1516 https://github.com/ivpusic/react-native-image-crop-picker/issues/1812
# Remove this if this is ever offically added.
diff --git a/node_modules/react-native-image-crop-picker/index.d.ts b/node_modules/react-native-image-crop-picker/index.d.ts
index b1fcef9..7253355 100644
--- a/node_modules/react-native-image-crop-picker/index.d.ts
+++ b/node_modules/react-native-image-crop-picker/index.d.ts
@@ -236,6 +236,13 @@ declare module "react-native-image-crop-picker" {
          */
         freeStyleCropEnabled?: boolean;
 
+        /**
+         * Enables user to default to the original aspect ratio when opening the picker with freeStyleCropEnabled:true
+         * @platform iOS only
+         * @@default false
+         */
+        originalAspectRatio?: boolean
+
         /**
          * cropperTintColor
          */
diff --git a/node_modules/react-native-image-crop-picker/ios/src/ImageCropPicker.h b/node_modules/react-native-image-crop-picker/ios/src/ImageCropPicker.h
index daa2986..4ca8d44 100644
--- a/node_modules/react-native-image-crop-picker/ios/src/ImageCropPicker.h
+++ b/node_modules/react-native-image-crop-picker/ios/src/ImageCropPicker.h
@@ -17,11 +17,11 @@
 #import <React/RCTImageView.h>
 #import <React/RCTImageLoaderProtocol.h>
 #else
-#import "RCTBridgeModule.h"
-#import "RCTImageURLLoader.h"
-#import "RCTImageShadowView.h"
-#import "RCTImageView.h"
-#import "RCTImageLoaderProtocol.h"
+#import <React/RCTBridgeModule.h>
+#import <React/RCTImageURLLoader.h>
+#import <React/RCTImageShadowView.h>
+#import <React/RCTImageView.h>
+#import <React/RCTImageLoaderProtocol.h>
 #endif
 
 #if __has_include("QBImagePicker.h")
diff --git a/node_modules/react-native-image-crop-picker/ios/src/ImageCropPicker.m b/node_modules/react-native-image-crop-picker/ios/src/ImageCropPicker.m
index 7101410..daa05e9 100644
--- a/node_modules/react-native-image-crop-picker/ios/src/ImageCropPicker.m
+++ b/node_modules/react-native-image-crop-picker/ios/src/ImageCropPicker.m
@@ -58,9 +58,9 @@ RCT_EXPORT_MODULE();
             @"compressVideo": @YES,
             @"minFiles": @1,
             @"maxFiles": @5,
-            @"width": @200,
+            @"width": @2000,
             @"waitAnimationEnd": @YES,
-            @"height": @200,
+            @"height": @2000,
             @"useFrontCamera": @NO,
             @"avoidEmptySpaceAroundImage": @YES,
             @"compressImageQuality": @0.8,
@@ -72,7 +72,8 @@ RCT_EXPORT_MODULE();
             @"sortOrder": @"none",
             @"cropperCancelText": @"Cancel",
             @"cropperChooseText": @"Choose",
-            @"cropperRotateButtonsHidden": @NO
+            @"cropperRotateButtonsHidden": @NO,
+            @"originalAspectRatio": @NO
         };
         self.compression = [[Compression alloc] init];
     }
@@ -874,12 +875,13 @@ RCT_EXPORT_METHOD(openCropper:(NSDictionary *)options
             cropVC = [[TOCropViewController alloc] initWithCroppingStyle:TOCropViewCroppingStyleCircular image:image];
         } else {
             cropVC = [[TOCropViewController alloc] initWithImage:image];
-            CGFloat widthRatio = [[self.options objectForKey:@"width"] floatValue];
-            CGFloat heightRatio = [[self.options objectForKey:@"height"] floatValue];
-            if (widthRatio > 0 && heightRatio > 0){
-                CGSize aspectRatio = CGSizeMake(widthRatio, heightRatio);
-                cropVC.customAspectRatio = aspectRatio;
-                
+            if(![[[self options] objectForKey:@"originalAspectRatio"] boolValue]) {
+                CGFloat widthRatio = [[self.options objectForKey:@"width"] floatValue];
+                CGFloat heightRatio = [[self.options objectForKey:@"height"] floatValue];
+                if (widthRatio > 0 && heightRatio > 0){
+                    CGSize aspectRatio = CGSizeMake(widthRatio, heightRatio);
+                    cropVC.customAspectRatio = aspectRatio;
+                }
             }
             cropVC.aspectRatioLockEnabled = ![[self.options objectForKey:@"freeStyleCropEnabled"] boolValue];
             cropVC.resetAspectRatioEnabled = !cropVC.aspectRatioLockEnabled;

[loekTheDreamer]

if you make width 0 and height 0 it defaults to the image aspect:

    ImagePicker.openPicker({
        width: 0,
        height: 0,
        cropping: true,
      })

honestly this solution works the best for me. where the user has full controll of what he wants to crop:

   ImagePicker.openPicker({
        // width: 0,
        // height: 0,
        cropping: true,
        freeStyleCropEnabled: true,
      })

[DimaBarokha]

@loekTheDreamer did you have any crash after you cropped the picture? My app just closed with width: 0,height: 0,

[loekTheDreamer]

@loekTheDreamer did you have any crash after you cropped the picture? My app just closed with width: 0,height: 0,

No, no crash. But the image is an extremely massive.

At the end we opted for a set size which is the phone width and phone height, plus cropping. When a user crops if setting width and height to 0 it's defaults to 200 and then the images are very low quality.

When setting the width and height and interacting with cropping the user can in my opinion get the best experience with what we have to currently have to work with.

Hope, this helps.

[ObidosDev]

diff --git a/node_modules/react-native-image-crop-picker/ios/src/ImageCropPicker.m b/node_modules/react-native-image-crop-picker/ios/src/ImageCropPicker.m
index 9f20973..87c2c5e 100644
--- a/node_modules/react-native-image-crop-picker/ios/src/ImageCropPicker.m
+++ b/node_modules/react-native-image-crop-picker/ios/src/ImageCropPicker.m
@@ -883,8 +883,8 @@ - (void)cropImage:(UIImage *)image {
             cropVC = [[TOCropViewController alloc] initWithCroppingStyle:TOCropViewCroppingStyleCircular image:image];
         } else {
             cropVC = [[TOCropViewController alloc] initWithImage:image];
-            CGFloat widthRatio = [[self.options objectForKey:@"width"] floatValue];
-            CGFloat heightRatio = [[self.options objectForKey:@"height"] floatValue];
+            CGFloat widthRatio = image.size.width;
+            CGFloat heightRatio = image.size.height;
             if (widthRatio > 0 && heightRatio > 0){
                 CGSize aspectRatio = CGSizeMake(widthRatio, heightRatio);
                 cropVC.customAspectRatio = aspectRatio;