fix: pinch gesture handler in android

jordan-vdi · Feb 2, 2022 · b8b5b04 · b8b5b04
1 parent 1c7a5dd
commit b8b5b04
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 21 deletions.
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -36,6 +36,23 @@ export default function App() {
   return (
     <SafeAreaView style={styles.screen}>
       <StatusBar />
+      <View style={styles.container}>
+        <PanPinchView
+          ref={panPinchViewRef}
+          minScale={1}
+          initialScale={1}
+          containerDimensions={{
+            width: CONTAINER.width,
+            height: CONTAINER.height,
+          }}
+          contentDimensions={{ width: CONTENT.width, height: CONTENT.height }}
+        >
+          <Image
+            style={[styles.image]}
+            source={require('./assets/photo.jpg')}
+          />
+        </PanPinchView>
+      </View>
       <View style={styles.controls}>
         <Button title="Scale to 0.5" onPress={() => scaleTo(0.5)} />
         <Button title="Scale to 1.5" onPress={() => scaleTo(1.5)} />
@@ -70,23 +87,6 @@ export default function App() {
           }
         />
       </View>
-      <View style={styles.container}>
-        <PanPinchView
-          ref={panPinchViewRef}
-          minScale={1}
-          initialScale={1}
-          containerDimensions={{
-            width: CONTAINER.width,
-            height: CONTAINER.height,
-          }}
-          contentDimensions={{ width: CONTENT.width, height: CONTENT.height }}
-        >
-          <Image
-            style={[styles.image]}
-            source={require('./assets/photo.jpg')}
-          />
-        </PanPinchView>
-      </View>
     </SafeAreaView>
   );
 }
@@ -108,5 +108,6 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     flexDirection: 'row',
     flexWrap: 'wrap',
+    marginVertical: 20,
   },
 });
diff --git a/src/index.tsx b/src/index.tsx
@@ -1,5 +1,5 @@
 import React, { forwardRef, useImperativeHandle } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { Platform, StyleSheet, View } from 'react-native';
 import {
   Gesture,
   GestureDetector,
@@ -43,6 +43,8 @@ export default forwardRef(function PanPinchView(
   const isPinching = useSharedValue(false);
   const isResetting = useSharedValue(false);
 
+  const isAndroidPinchActivated = useSharedValue(false);
+
   const contentSize = useVector(
     contentDimensions.width,
     contentDimensions.height
@@ -154,7 +156,7 @@ export default forwardRef(function PanPinchView(
 
   const panGesture = Gesture.Pan()
     .averageTouches(true)
-    .onStart(() => {
+    .onBegin(() => {
       'worklet';
       onGestureStart();
     })
@@ -173,6 +175,10 @@ export default forwardRef(function PanPinchView(
 
         onGestureStart();
 
+        if (Platform.OS === 'android') {
+          isAndroidPinchActivated.value = false;
+        }
+
         setAdjustedFocal({ focalX: event.focalX, focalY: event.focalY });
         origin.x.value = adjustedFocal.x.value;
         origin.y.value = adjustedFocal.y.value;
@@ -183,10 +189,19 @@ export default forwardRef(function PanPinchView(
     .onChange((event) => {
       'worklet';
 
-      if (event.numberOfPointers < 2) {
+      if (event.numberOfPointers !== 2) {
         return;
       }
 
+      if (!isAndroidPinchActivated.value && Platform.OS === 'android') {
+        setAdjustedFocal({ focalX: event.focalX, focalY: event.focalY });
+
+        origin.x.value = adjustedFocal.x.value;
+        origin.y.value = adjustedFocal.y.value;
+
+        isAndroidPinchActivated.value = true;
+      }
+
       isPinching.value = true;
       scale.value = Math.max(scale.value * event.scaleChange, minScale);
 
@@ -252,7 +267,7 @@ export default forwardRef(function PanPinchView(
     }
   );
 
-  const gestures = Gesture.Race(panGesture, pinchGesture);
+  const gestures = Gesture.Simultaneous(panGesture, pinchGesture);
 
   return (
     <GestureHandlerRootView>