[2.2.0] Pinch gesture doesn't start when used in vertical position on Android

Description

The pinch event for start and update don’t get called on android devices when the two fingers have higher absolute Y values than X values and are therefore vertical

Platforms

• iOS
• Android
• Web

Screenshots

https://user-images.githubusercontent.com/420864/155535248-efc0230b-738f-40e0-bd21-847b3984d037.mov

Steps To Reproduce

1. Position pinch gesture so index finger and thumb are more vertical than horizontal
2. Apply pinch, note that pinch start doesn’t begin

Expected behavior

Pinch should work in both directions on android

Actual behavior

Does not start pinch gesture

Snack or minimal code example

import React from 'react';
import { StyleSheet } from 'react-native';
import {
  Gesture,
  GestureDetector,
  GestureHandlerRootView,
} from 'react-native-gesture-handler';
import Animated, {
  useAnimatedStyle,
  useSharedValue,
} from 'react-native-reanimated';

const App = () => {
  const scale = useSharedValue(1);
  const savedScale = useSharedValue(1);

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ scale: scale.value }],
  }));

  const gesture = Gesture.Pinch()
     .onTouchesDown(() => {
       if (event.allTouches.length > 1) {
        const [touch1, touch2] = event.allTouches;
        direction.value =
          Math.abs(touch1.x - touch2.x) > Math.abs(touch1.y - touch2.y)
            ? 'horizontal'
            : 'vertical';
        console.log(direction.value);
      }
     })
    .onStart((e) => {
      console.log(e.type);
    })
    .onUpdate((e) => {
      scale.value = savedScale.value * e.scale;
    })
    .onEnd(() => {
      savedScale.value = scale.value;
    });

  return (
    <GestureHandlerRootView style={styles.flex}>
      <GestureDetector gesture={gesture}>
        <Animated.View style={[styles.box, animatedStyle]} />
      </GestureDetector>
    </GestureHandlerRootView>
  );
};

const styles = StyleSheet.create({
  flex: { flex: 1, backgroundColor: 'salmon' },
  box: {
    width: 250,
    height: 250,
    marginTop: 300,
    alignSelf: 'center',
    backgroundColor: 'blue',
  },
});

export default App;

Package versions

• React: 17.0.2
• React Native: 0.66.4
• React Native Gesture Handler: 2.2.0
• React Native Reanimated: 2.4.1

[j-piasecki]

I believe it will work. In case it doesn’t, you can try to wrap the ScrollView you are using now with GestureDetector and set it to recognize Gesture.Native(). Then you can use requireExternalGestureToFail on the gesture to accomplish the same effect as with waitFor on the ScrollView. It would look something like this:

const nativeGesture = Gesture.Native().requireExternalGestureToFail(pinch);
...
<GestureDetector gesture={pinch}>
  <View>
    <GestureDetector gesture={nativeGesture}>
      <ScrollView>
        ...
      </ScrollView>
    </GestureDetector>
  </View>
</GestureDetector>

[rizwan92]

@JB-CHAUVIN i tried your recommendation it is more than good now but, i have tried this nested scroll view for pinch gesture and its is working fine . i would recommned everyone to please import scroll view from react native for more smoothness rather than animated.scrollview

working example

 const scale = useSharedValue(1);
  const savedScale = useSharedValue(1);
  const pinchRef = useRef();

  const pinchGesture = Gesture.Pinch()
    .withRef(pinchRef)
    .onUpdate(e => {
      const chnage = savedScale.value * e.scale;
      scale.value = chnage;
    })
    .onEnd(() => {
      savedScale.value = scale.value;
    });

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ scale: scale.value }],
  }));

  const nativeGesture =
    Gesture.Native().requireExternalGestureToFail(pinchGesture);
    
  <GestureDetector gesture={pinchGesture}>
      <View className="flex flex-1 bg-slate-300">
        <GestureDetector gesture={nativeGesture}>
          <ScrollView
            contentContainerStyle={{
              borderWidth: 1,
              borderColor: '#000',
              padding: 2,
            }}
            waitFor={pinchRef}>
            <ScrollView
              contentContainerStyle={{ borderWidth: 1, borderColor: 'red' }}
              horizontal
              waitFor={pinchRef}>
              <Animated.View
                style={[
                  {
                    width: 1000,
                    height: 1000,
                    borderColor: 'green',
                    justifyContent: 'center',
                    alignItems: 'center',
                    overflow: 'hidden',
                  },
                  animatedStyle,
                ]}>
                <CircleNode />
                <CircleNode />
                <CircleNode />
                <CircleNode />
                <CircleNode />
              </Animated.View>
            </ScrollView>
          </ScrollView>
        </GestureDetector>
      </View>
    </GestureDetector>