react-native-gesture-handler icon indicating copy to clipboard operation
react-native-gesture-handler copied to clipboard

[Android] Touches up/down callbacks fired on multiple gesture detectors when should fire for only one

Open MatiPl01 opened this issue 5 months ago • 0 comments

Description

I noticed that the onTouchesDown and onTouchesUp callback is being fired ona all currently touched gesture detectors when I start/stop touching just one of them but keep touching the other one.

The example, on which I tested it it works, is very simple and consists of just 2 boxes with gesture detectors:

Image

Example source code
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Gesture, GestureDetector } from 'react-native-gesture-handler';

type BoxProps = {
  label: string;
};

function Box({ label }: BoxProps) {
  const manual = Gesture.Manual()
    .onTouchesDown(() => {
      console.log('down', label);
    })
    .onTouchesUp(() => {
      console.log('up', label);
    })
    .onTouchesCancelled(() => {
      console.log('cancelled', label);
    });

  return (
    <GestureDetector gesture={manual}>
      <View style={styles.box}>
        <Text style={styles.text}>{label}</Text>
      </View>
    </GestureDetector>
  );
}

export default function EmptyExample() {
  return (
    <View style={styles.container}>
      <Box label="1" />
      <Box label="2" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    gap: 10,
  },
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'red',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    color: 'white',
    fontSize: 20,
    fontWeight: 'bold',
  },
});

Android

https://github.com/user-attachments/assets/823254fe-9a5a-44db-94c5-b8d86096a315

iOS

https://github.com/user-attachments/assets/9abbdf35-d0f8-4048-bed8-c43f77cbcfc3

Steps to reproduce

  1. I pressed the first box (with number 1) and didn't release the finger
  2. I was tapping on the second box (with number 2) - started and stopped pressing for a few times
  3. I finally released the finger from the first box (number 1)

A link to a Gist, an Expo Snack or a link to a repository based on this template that reproduces the bug.

https://snack.expo.dev/JaZCc4_vZlmyDOFHRlMEs

Gesture Handler version

2.25.0 (and older)

React Native version

0.80.0-rc.4 (and older)

Platforms

Android

JavaScript runtime

None

Workflow

None

Architecture

None

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes

MatiPl01 avatar Jun 04 '25 09:06 MatiPl01