Merge pull request #22 from Glazzes/dev

Fix CropZoom for square aspect ratio
Glazzes · May 29, 2024 · 8ad884e · 8ad884e
2 parents 2d34962 + ab9f510
commit 8ad884e
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 5 deletions.
diff --git a/example/src/cropzoom/common-example/CropManagedExample.tsx b/example/src/cropzoom/common-example/CropManagedExample.tsx
@@ -42,7 +42,11 @@ const CropManagedExample = ({}) => {
         resolution={resolution}
         OverlayComponent={renderOverlay}
       >
-        <Image source={{ uri: IMAGE }} style={styles.image} />
+        <Image
+          source={{ uri: IMAGE }}
+          style={styles.image}
+          resizeMethod="scale"
+        />
       </CropZoom>
 
       {/*
@@ -70,7 +74,8 @@ const styles = StyleSheet.create({
     backgroundColor: '#121212',
   },
   image: {
-    flex: 1,
+    width: '100%',
+    height: '100%',
   },
 });
 

diff --git a/example/src/resumable/ResumableZoomExample.tsx b/example/src/resumable/ResumableZoomExample.tsx
@@ -71,6 +71,7 @@ const ResumableZoomExample: React.FC = ({}) => {
         ref={ref}
         hitSlop={{ vertical: 50 }}
         maxScale={resolution}
+        extendGestures={true}
         onTap={onTap}
       >
         <Image

diff --git a/src/commons/utils/getCropRotatedSize.ts b/src/commons/utils/getCropRotatedSize.ts
@@ -4,12 +4,12 @@ import type { SizeVector } from '../types';
 type Options = {
   size: SizeVector<number>;
   angle: number;
-  aspectRatio?: number;
+  aspectRatio: number;
 };
 
 export const getCropRotatedSize = (options: Options): SizeVector<number> => {
   'worklet';
-  const { size, angle, aspectRatio = 1 } = options;
+  const { size, angle, aspectRatio } = options;
 
   const sinWidth = Math.abs(size.height * Math.sin(angle));
   const cosWidth = Math.abs(size.width * Math.cos(angle));
@@ -23,6 +23,6 @@ export const getCropRotatedSize = (options: Options): SizeVector<number> => {
   return getAspectRatioSize({
     aspectRatio: aspectRatio,
     width: aspectRatio >= 1 ? undefined : maxWidth,
-    height: aspectRatio > 1 ? maxHeight : undefined,
+    height: aspectRatio >= 1 ? maxHeight : undefined,
   });
 };