fixes pan and pinch issue in android

vemarav · Aug 1, 2021 · c4513d6 · c4513d6
1 parent bac909e
commit c4513d6
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 21 deletions.
diff --git a/example/CropImage.tsx b/example/CropImage.tsx
@@ -1,8 +1,16 @@
 import React from 'react';
-import {View, StyleSheet, TouchableOpacity, Text} from 'react-native';
+import {
+  View,
+  StyleSheet,
+  TouchableOpacity,
+  Text,
+  Dimensions,
+} from 'react-native';
 import Routes from './Routes';
 import Crop from 'react-native-avatar-crop';
 
+const {width: SCREEN_WIDTH} = Dimensions.get('window');
+
 type CropImageProps = {
   route: {params: {uri: string; width: number; height: number}};
   navigation: {
@@ -43,11 +51,9 @@ const CropImage = ({route, navigation}: CropImageProps): JSX.Element => {
       <Crop
         source={{uri}}
         imageSize={{width, height}}
-        width={300}
-        height={300}
-        cropArea={{width: 200, height: 150}}
-        cropShape={'rect'}
-        resizeMode={'contain'}
+        width={SCREEN_WIDTH}
+        height={SCREEN_WIDTH}
+        cropArea={{width: SCREEN_WIDTH / 1.3, height: SCREEN_WIDTH / 1.3}}
         onCrop={cropCallback => (crop = cropCallback)}
       />
       <View style={styles.padding20} />

diff --git a/example/package.json b/example/package.json
@@ -17,7 +17,7 @@
     "@react-navigation/stack": "^5.14.5",
     "react": "17.0.1",
     "react-native": "0.64.2",
-    "react-native-avatar-crop": "^0.0.5",
+    "react-native-avatar-crop": "^0.0.6",
     "react-native-gesture-handler": "^1.10.3",
     "react-native-image-picker": "^4.0.6",
     "react-native-image-size": "^1.1.3",

diff --git a/example/yarn.lock b/example/yarn.lock
@@ -5601,10 +5601,10 @@ react-is@^16.13.0, react-is@^16.7.0, react-is@^16.8.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-react-native-avatar-crop@^0.0.5:
-  version "0.0.5"
-  resolved "https://registry.yarnpkg.com/react-native-avatar-crop/-/react-native-avatar-crop-0.0.5.tgz#46b04a791dcfcd15ae0e483d3716cc936a3dcaf0"
-  integrity sha512-3rZjgn9vC41jj9bO0GdwNcLQmAYodbG3pQWmMDfP3ddUO9sL93zEOm3E/ZSj4N3/5LBUCGW66euiHZlwAfu0og==
+react-native-avatar-crop@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/react-native-avatar-crop/-/react-native-avatar-crop-0.0.6.tgz#d8ab66db5015af950a37c4e46f62756a3e5283b0"
+  integrity sha512-ploV7UtMp0BfEs3meKloBeuGRd+VeX0PTOMtaH/s8TDIwhOeGD0zT/Go6VvkrIIUDKrwR8W26wbCk9/O5+rb3Q==
 
 react-native-codegen@^0.0.6:
   version "0.0.6"

diff --git a/package/package-lock.json b/package/package-lock.json
diff --git a/package/package.json b/package/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-avatar-crop",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "Crop component to crop profile images",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

diff --git a/package/src/crop/index.tsx b/package/src/crop/index.tsx
@@ -358,12 +358,15 @@ const Crop = (props: CropProps): JSX.Element => {
     cropShape === 'circle' ? Math.max(cropArea.height, cropArea.width) : 0;
 
   return (
-    <PinchGestureHandler
-      onGestureEvent={onPinchGestureEvent}
-      onHandlerStateChange={onPinchGestureStateChange}>
-      <PanGestureHandler
-        onGestureEvent={onPanGestureEvent}
-        onHandlerStateChange={onPanGestureStateChange}>
+    <PanGestureHandler
+      minPointers={1}
+      maxPointers={1}
+      onGestureEvent={onPanGestureEvent}
+      onHandlerStateChange={onPanGestureStateChange}>
+      <PinchGestureHandler
+        minPointers={2}
+        onGestureEvent={onPinchGestureEvent}
+        onHandlerStateChange={onPinchGestureStateChange}>
         <View style={{width, height, backgroundColor}}>
           <MaskedView
             style={styles.mask}
@@ -419,8 +422,8 @@ const Crop = (props: CropProps): JSX.Element => {
             />
           </View>
         </View>
-      </PanGestureHandler>
-    </PinchGestureHandler>
+      </PinchGestureHandler>
+    </PanGestureHandler>
   );
 };