Please refer to the original linked issue for more details, steps to reproduce and discoveries so far.
cc @gorhom
import React, {useRef} from 'react';
import {Text, Pressable, StyleSheet, Button} from 'react-native';
import {Gesture, GestureDetector, GestureHandlerRootView} from 'react-native-gesture-handler';
import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
const END_POSITION = 200;
function App(): React.JSX.Element {
const [count, setCount] = React.useState(0);
const [pressCount, setPressCount] = React.useState(0);
const onLeft = useSharedValue(true);
const position = useSharedValue(0);
const panGesture = Gesture.Pan()
.onUpdate((e) => {
if (onLeft.value) {
position.value = e.translationX;
} else {
position.value = END_POSITION + e.translationX;
}
})
.onEnd((e) => {
if (position.value > END_POSITION / 2) {
position.value = withTiming(END_POSITION, { duration: 100 });
onLeft.value = false;
} else {
position.value = withTiming(0, { duration: 100 });
onLeft.value = true;
}
});
const animatedStyle = useAnimatedStyle(() => ({
transform: [{ translateX: position.value }],
}));
return (
<GestureHandlerRootView style={styles.container}>
<Pressable
style={{padding: 16}}
onPointerDown={() => setCount(n => n + 1)}
onPressIn={() => setPressCount(n => n + 1)}>
<Text style={{color: 'white'}}>Press me</Text>
</Pressable>
<Text style={{marginBottom: 16, color: 'white'}}>
pointer: {count} -- press: {pressCount}
</Text>
<GestureDetector gesture={panGesture}>
<Animated.View style={[styles.box, animatedStyle]} />
</GestureDetector>
</GestureHandlerRootView>
);
}
const styles = StyleSheet.create({
container: {
padding: 64,
flex: 1,
},
box: {
height: 120,
width: 120,
backgroundColor: '#b58df1',
borderRadius: 20,
marginBottom: 30,
},
});
export default App;
Description
Related issue with more details: gorhom/react-native-bottom-sheet#2415
In a project with experimental pointer events enabled using RN feature flag (https://reactnative.dev/blog/2022/12/13/pointer-events-in-react-native#enable-feature-flags), pointer events stop firing after a pan event is fired.
Please refer to the original linked issue for more details, steps to reproduce and discoveries so far.
cc @gorhom
Steps to reproduce
To reproduce refer to: gorhom/react-native-bottom-sheet#2415 (comment)
A link to a Gist, an Expo Snack or a link to a repository based on this template that reproduces the bug.
https://github.com/axyz/rn-bug-pointer-events-bottom-sheet
Gesture Handler version
2.20.2
React Native version
0.79.0
Platforms
iOS
JavaScript runtime
None
Workflow
None
Architecture
New Architecture (Fabric)
Build type
None
Device
None
Device model
No response
Acknowledgements
Yes