Pan gesture breaking pointer events

[axyz]

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)

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;

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

[LuanNguyen-HnL]

I also face this issue, did you have the solution for that?