Using same gesture in Gesture.Exclusive causes crash on Android

[jacobmolby]

Using same gesture in Gesture.Exclusive causes crash on Android

[m-bert]

I will try to look at it! Seems like using doubleTap in multiple detectors wasn't the only problem. I've manged to find out what caused ConcurrentModificationException and I've already prepared PR to fix that.

Even though it no longer crashes it doesn't seem to work correctly. I've checked that on a commit before we made changes in Orchestrator and it seems like this bug was there for a long time.

I'll get back to you as soon as we find a solution!

[jacobmolby]

Hi, I tried to run your Modified code with requireExternalGestureToFail with the PR installed. It seems to work! 😄

Compared to the original, I guess I'll just have to bubble up the different doubletap gestures, but that should not be too much of an issue. Thanks!

[m-bert]

HI @jacobmolby! Indeed, the app does crash, but it is expected behavior.

One of the assumptions of Gesture Handler is that no Gesture will be used in more than one gesture detector, since it leads to strange behaviors. The problem is that check for this specific case was present only on web, therefore a while ago we decided to unify it across all platforms.

As I can see, your doubleTapGesture is used across 3 different GestureDetectors, violating mentioned principle.

Note that PR that I've mentioned has not been released yet - that's why I got a bit confused at the beginning.

This is how your example looks on current main:

[jacobmolby]

Okay, makes sense. Can you tell me how I can achieve the desired gestures then? Is it possible to do with RNGH?

[m-bert]

I went through your example once more, this time focusing more on how it actually works. I believe the thing that you want to use is requireExternalGestureToFail. I've done some changes and double taps seem to work. The only issue that we have to deal with is that both, orange and blue tap, activate when you tap on orange rectangle.

Modified code with requireExternalGestureToFail

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

const orangeTapGesture = Gesture.Tap()
  .onStart(() => {
    console.log('Orange: Tap');
  })
  .runOnJS(true);

const orangeDoubleTapGesture = Gesture.Tap()
  .numberOfTaps(2)
  .onStart(() => {
    console.log('Orange: Double tap');
  })
  .runOnJS(true);

const blueTapGesture = Gesture.Tap()
  .onStart(() => {
    console.log('Blue: Tap');
  })
  .runOnJS(true)
  .requireExternalGestureToFail(orangeTapGesture, orangeDoubleTapGesture);

const blueDoubleTapGesture = Gesture.Tap()
  .numberOfTaps(2)
  .onStart(() => {
    console.log('Blue: Double tap');
  })
  .runOnJS(true);

const redLongPressGesture = Gesture.LongPress()
  .onStart(() => {
    console.log('Red: Long press');
  })
  .runOnJS(true);

const redDoubleTapGesture = Gesture.Tap()
  .numberOfTaps(2)
  .onStart(() => {
    console.log('Red: Double tap');
  })
  .runOnJS(true);

const Showcase = () => {
  const gesture = Gesture.Race(redDoubleTapGesture, redLongPressGesture);

  return (
    <View
      style={{
        flex: 1,
        backgroundColor: 'white',
        marginHorizontal: 20,
        marginVertical: 60,
      }}>
      <GestureDetector gesture={gesture}>
        <Animated.View style={styles.outer}>
          <Blue />
        </Animated.View>
      </GestureDetector>
    </View>
  );
};

export default Showcase;

const Blue = () => {
  const composedGesture = Gesture.Exclusive(
    blueDoubleTapGesture,
    blueTapGesture
  );

  return (
    <GestureDetector gesture={composedGesture}>
      <Animated.View style={styles.blue}>
        <Orange />
      </Animated.View>
    </GestureDetector>
  );
};

const Orange = () => {
  const composedGesture = Gesture.Exclusive(
    orangeDoubleTapGesture,
    orangeTapGesture
  );

  return (
    <GestureDetector gesture={composedGesture}>
      <Animated.View style={styles.orange}></Animated.View>
    </GestureDetector>
  );
};

const styles = StyleSheet.create({
  outer: {
    padding: 20,
    backgroundColor: 'red',
    width: 300,
    height: 200,
  },
  blue: {
    width: '80%',
    height: '80%',
    backgroundColor: 'blue',
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  orange: {
    margin: 5,
    width: '50%',
    height: '50%',
    backgroundColor: 'orange',
  },
});

[m-bert]

Hi @jacobmolby! I've created this PR that should fix taps activation. Could you please check if it works? It is still a draft so it is possible that something will change, but I'd like to know if it does help in your case.

[m-bert]

That's great! Thanks for submitting this issue, it uncovered some flaws in our logic that we were not aware of!

I will try to merge this PR asap, but we have to discuss something before doing it (i.e. should we do it for all discrete gestures and if so, then how to do it correctly).