Description
On iOS, when a builder-API gesture (Gesture.Pan()) activates inside a react-native-screens native-stack route presented as formSheet or modal, in-flight touches of a core RN Pressable/Touchable* underneath are not cancelled. The press completes and fires onPress on release, alongside the gesture.
Steps to reproduce
// Native stack route options
<Stack.Screen name="sheet" options={{ presentation: "formSheet", sheetAllowedDetents: [0.5] }} />
// Inside the sheet route
function Row() {
const translateX = useSharedValue(0);
const pan = Gesture.Pan()
.activeOffsetX([-12, 12])
.failOffsetY([-12, 12])
.onChange((e) => { translateX.value = Math.min(0, e.translationX); })
.onEnd(() => { translateX.value = withSpring(0); });
return (
<GestureDetector gesture={pan}>
<Animated.View style={useAnimatedStyle(() => ({ transform: [{ translateX: translateX.value }] }))}>
<Pressable onPress={() => console.log("onPress fired — should have been cancelled")}>
<Text>Swipe me</Text>
</Pressable>
</Animated.View>
</GestureDetector>
);
}Expected: pan activation cancels the in-flight JS-responder touch; onPress does not fire (this is the behavior on a push route)
Actual: the row tracks the finger, and on release onPress also fires.
A link to a Gist, an Expo Snack or a link to a repository based on this template that reproduces the bug.
placed the code snippet in the description
Gesture Handler version
2.32.0
React Native version
0.86.0
Platforms
iOS
JavaScript runtime
Hermes
Workflow
Using Expo Prebuild or an Expo development build
Architecture
New Architecture (Fabric)
Build type
Debug mode
Device
iOS simulator
Device model
No response
Acknowledgements
Yes
Description
On iOS, when a builder-API gesture (
Gesture.Pan()) activates inside a react-native-screens native-stack route presented asformSheetormodal, in-flight touches of a core RNPressable/Touchable*underneath are not cancelled. The press completes and firesonPresson release, alongside the gesture.Steps to reproduce
Expected: pan activation cancels the in-flight JS-responder touch;
onPressdoes not fire (this is the behavior on a push route)Actual: the row tracks the finger, and on release
onPressalso fires.A link to a Gist, an Expo Snack or a link to a repository based on this template that reproduces the bug.
placed the code snippet in the description
Gesture Handler version
2.32.0
React Native version
0.86.0
Platforms
iOS
JavaScript runtime
Hermes
Workflow
Using Expo Prebuild or an Expo development build
Architecture
New Architecture (Fabric)
Build type
Debug mode
Device
iOS simulator
Device model
No response
Acknowledgements
Yes