Using same gesture in Gesture.Exclusive causes crash on Android
jacobmolby opened this issue · comments
Description
When using the same gesture in Gesture.Exclusive
the app crashes on Android in version '~2.14.0'
I have a scenario shown on the screenshot. I want to have a tap target inside a tap target inside a double press target. Only one of the gestures should be activated at any one time.
I started by using blocksExternalGesture
between the orange and blue tap gesture to achieve the effect. Which was when I noticed the crash, however it still crashes in the following code without it being in place.
On version ~2.12.0
it doesn't cause a crash, but both "orange and blue" taps are activated at the same time on Android. On iOS only one of "blue" and "orange" are activated at the same time. The behaviour for iOS is the same between ~2.12.0
and ~2.14.0
I don't know what the expected behaviour is, if both "orange" and "blue" should activate, or only "orange" without using blocksExternalGesture
. However it is inconsistent between platforms.
I have made the same repro with ~2.12.0
and ~2.14.0
. Only ~2.12.0
is a Snack since Snacks doesn't support Expo SDK 50 yet (which has RNGH 2.14.0).
It also occurs in bare workflow, which was how I noticed it (RN 0.72.4 and RNGH 2.14.1)
~2.12.0
: https://snack.expo.dev/@jacobmolby/rngh-crash-repro
~2.14.0
: https://github.com/jacobmolby/rngh-bug-repro
Example that causes crash/inconsistent behaviour:
import React from 'react';
import { ScrollView, StyleSheet, Text, View } from 'react-native';
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
import Animated from 'react-native-reanimated';
const Showcase = () => {
const [lastActions, setLastActions] = React.useState([]);
const addAction = action => {
setLastActions(actions => {
const date = new Date();
const time = date.toLocaleTimeString();
if (actions.length >= 3) {
actions.pop();
}
return [action + ': ' + time, ...actions];
});
};
const longPressGesture = Gesture.LongPress()
.onStart(() => {
addAction('long press');
})
.runOnJS(true);
const doubleTapGesture = Gesture.Tap()
.numberOfTaps(2)
.onStart(() => {
addAction('double tap');
})
.runOnJS(true);
const gesture = Gesture.Race(doubleTapGesture, longPressGesture);
return (
<View
style={{
flex: 1,
backgroundColor: 'white',
marginHorizontal: 20,
marginVertical: 60,
}}>
<ScrollView contentContainerStyle={{ gap: 20 }}>
<GestureDetector gesture={gesture}>
<Animated.View style={styles.outer}>
<Blue doubleTapGesture={doubleTapGesture} onAddAction={addAction} />
</Animated.View>
</GestureDetector>
<View>
{lastActions.map((action, index) => (
<Text key={index}>
{index} - {action}
</Text>
))}
</View>
<View style={{ gap: 20 }}>
<Text>
<Bold>DoubleTap</Bold>: on all rectangles - should print "double
tap" - no tap gesture should be recognized ✅
</Text>
<Text>
<Bold>LongPress</Bold>: on all rectangles - should print "long
press" - no tap gesture should be recognized ✅
</Text>
<Text>
<Bold>Tap</Bold>: on red - should do nothing ✅
</Text>
<Text>
<Bold>Tap</Bold>: on blue - should print "Blue: tap" ✅
</Text>
<Text>
<Bold>Tap</Bold>: on orange - should print "Orange: tap" ⛔️ -
Crashes on Android
</Text>
</View>
</ScrollView>
</View>
);
};
export default Showcase;
const Blue = ({ doubleTapGesture, onAddAction }) => {
const tapGesture = Gesture.Tap()
.onStart(() => {
onAddAction('Blue: tap');
})
.runOnJS(true);
const composedGesture = Gesture.Exclusive(doubleTapGesture, tapGesture);
return (
<GestureDetector gesture={composedGesture}>
<Animated.View style={styles.blue}>
<Orange doubleTapGesture={doubleTapGesture} onAddAction={onAddAction} />
</Animated.View>
</GestureDetector>
);
};
const Orange = ({ doubleTapGesture, onAddAction }) => {
const tapGesture = Gesture.Tap()
.onStart(() => {
onAddAction('Orange: tap');
})
.runOnJS(true);
return (
<GestureDetector gesture={Gesture.Exclusive(doubleTapGesture, tapGesture)}>
<Animated.View style={styles.orange}></Animated.View>
</GestureDetector>
);
};
const Bold = ({ children }) => {
return <Text style={{ fontWeight: 'bold' }}>{children}</Text>;
};
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',
},
});
When the crash occurs on Android the the stack trace is the following:
FATAL EXCEPTION: main
Process: host.exp.exponent, PID: 8224
java.util.ConcurrentModificationException
at java.util.ArrayList$Itr.checkForComodification(ArrayList.java:1029)
at java.util.ArrayList$Itr.next(ArrayList.java:982)
at aq.g.w(SourceFile:35)
at aq.d.b0(SourceFile:46)
at aq.d.B(SourceFile:12)
at aq.y.O0(SourceFile:6)
at aq.y.M0(SourceFile:1)
at aq.x.run(SourceFile:1)
at android.os.Handler.handleCallback(Handler.java:938)
at android.os.Handler.dispatchMessage(Handler.java:99)
at android.os.Looper.loopOnce(Looper.java:226)
at android.os.Looper.loop(Looper.java:313)
at android.app.ActivityThread.main(ActivityThread.java:8663)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:571)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1135)
Steps to reproduce
Put a GestureDetector with Gesture.Exclusive inside another one and watch it crash on android
Snack or a link to a repository
https://github.com/jacobmolby/rngh-bug-repro
Gesture Handler version
2.12.0 and 2.14.0
React Native version
0.72.4 and 0.73.2
Platforms
Android
JavaScript runtime
Hermes
Workflow
Expo managed workflow
Architecture
Paper (Old Architecture)
Build type
Debug mode
Device
Real device
Device model
Crash reproduced on both Galaxy A41 and Galaxy A52 5G
Acknowledgements
Yes
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:
Okay, makes sense. Can you tell me how I can achieve the desired gestures then? Is it possible to do with RNGH?
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!
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',
},
});
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.
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!
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).