Started Long Press doesnt end in case of a navigation event

[itsramiel]

Description

Hi,

I have a gesture detector for long press gestures. The issue I having is that if the long press is started and then the user was navigated to another screen, the gesture doesnt end even if the finger is lifted off the screen.

This happens in a real case but the example below is simplified for reproduction purposes

For example the code looks like this:

function HomeScreen() {
  const navigation = useNavigation();

  const gesture = Gesture.LongPress()
    .onStart(() => {
      console.log('start');
    })
    .onEnd(() => {
      console.log('end');
    });

  return (
    <View
      style={{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        gap: 24,
      }}>
      <Button
        title="Go to Detail"
        onPress={() => navigation.navigate('Detail')}
      />
      <GestureDetector gesture={gesture}>
        <Animated.View
          style={{ height: 100, width: 100, backgroundColor: 'red' }}
        />
      </GestureDetector>
    </View>
  );
}

function DetailScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Detail Screen</Text>
    </View>
  );
}

const RootStack = createNativeStackNavigator({
  screens: {
    Home: HomeScreen,
    Detail: DetailScreen,
  },
});

type RootStackParamList = StaticParamList<typeof RootStack>;

declare global {
  namespace ReactNavigation {
    interface RootParamList extends RootStackParamList { }
  }
}

const Navigation = createStaticNavigation(RootStack);

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <Navigation />
    </GestureHandlerRootView>
  );
}

Here I have a gesture detector and a button to navigate to another screen. If the user is long pressing and then presses the button to navigate, the gesture state stays stuck on Started.

Video(I know it is not visible what I am doing, but I am long pressing on the red box and when it is started , I am pressing on the button to navigate):

Screen.Recording.2024-11-23.at.6.33.01.PM.mov

Note that on version 2.16.2, the end callback is called which is what I expect:

Screen.Recording.2024-11-23.at.6.36.48.PM.mov

Steps to reproduce

1. Clone the linked repo and run the app
2. Observe the logs, long press the red box
3. notice the start event logged
4. press the button to navigate
5. notice the end event not logged
6. change to version 2.16.1 and see that the end event is logged when navigating

Snack or a link to a repository

https://github.com/itsramiel/GestureNavigation

Gesture Handler version

2.21.2

React Native version

0.76.3

Platforms

iOS(Didn't try Android)

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Paper (Old Architecture) & Fabric (New Architecture)

Build type

Debug mode

Device

Real device

Device model

iPhone 15 Pro

Acknowledgements

Yes