software-mansion / react-native-gesture-handler

Declarative API exposing platform native touch and gesture system to React Native.
https://docs.swmansion.com/react-native-gesture-handler/
MIT License
5.83k stars 952 forks source link

Remove event listeners on handler drop #2815

Closed m-bert closed 1 month ago

m-bert commented 1 month ago

Description

Right now when handlers are dropped, event listeners are not removed from view. I think this might cause problems with SSR. With this PR, listeners are properly removed from underlying view.

Before

https://github.com/software-mansion/react-native-gesture-handler/assets/63123542/e676a513-d505-41db-b302-96538d585c70

After

https://github.com/software-mansion/react-native-gesture-handler/assets/63123542/5aa8a319-17c4-4ca5-9f44-bbc60b6d0fe3

Test plan

  1. Run the following code:
Test code ```jsx import React, { useState } from 'react'; import { StyleSheet, View } from 'react-native'; import { Gesture, GestureDetector } from 'react-native-gesture-handler'; export default function EmptyExample() { const fling = Gesture.Fling(); const tap = Gesture.Tap(); const [g, setG] = useState(fling); setTimeout(() => { setG(tap); console.log('Switching gesture to tap'); }, 1500); return ( ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, circle: { width: 150, height: 150, borderRadius: 75, }, }); ```
  1. Select red circle with inspector and navigate to Event Listeners
  2. Check that only one listener is present after Gesture was changed