[RN 0.70][Android] Incorrect behaviour with Touchables inside two FlatLists

[lightrow]

Description

My UI structure is a vertical FlatList that renders horizontal FlatLists that render Touchables (BaseButton but happens with other RNGH Touchables as well). When you long press the Touchable and then transition into scrolling horizontally without releasing the finger, everything is working as expected - the press gets cancelled. But when long pressing the Touchable and scrolling vertically (the outmost FlatList), the "onPress" event is fired instead.

This started happening only after upgrading from RN 0.68.0 to 0.70.0

Tested on real device (Android 10) and emulator (Android 13)

Steps to reproduce

1. Render a BaseButton inside two nested FlatLists, one vertical and one horizontal
2. Long press BaseButton then try to scroll the outmost FlatList without releasing the finger.
3. onPress event is fired

Snack or a link to a repository

Gesture Handler version

2.6.0

React Native version

0.70.0

Platforms

Android

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Paper (Old Architecture)

Build type

No response

Device

Real device

Device model

OnePlus 6 (Android 10), Pixel 5 Emulator (Android 13)

Acknowledgements

Yes

[github-actions[bot]]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[github-actions[bot]]

Hey! 👋

It looks like you've omitted a few important sections from the issue template.

Please complete Snack or a link to a repository section.

[j-piasecki]

Could you prepare a reproduction for the issue? I tried the following code on Android 12 and Android 9 but it works correctly for me:

import React from 'react';
import { View, Text } from 'react-native';
import { FlatList, RectButton } from 'react-native-gesture-handler';

const data = [
  { value: 1 },
  { value: 2 },
  { value: 3 },
  { value: 4 },
  { value: 5 },
  { value: 6 },
  { value: 7 },
  { value: 8 },
];

const renderButton = ({ item: { value } }: { item: { value: number } }) => {
  return (
    <RectButton
      style={{
        width: 100,
        height: 100,
        backgroundColor: 'red',
        margin: 5,
        justifyContent: 'center',
        alignItems: 'center',
      }}
      onPress={() => {
        console.log('pressed', value);
      }}
      onLongPress={() => {
        console.log('long pressed', value);
      }}
      onHandlerStateChange={(e) => {
        console.log('change', e.nativeEvent.oldState, e.nativeEvent.state);
      }}>
      <Text style={{ fontSize: 28 }}>{value}</Text>
    </RectButton>
  );
};

const renderHorizontalList = () => {
  return (
    <FlatList
      style={{ margin: 5 }}
      horizontal
      data={data}
      renderItem={renderButton}
    />
  );
};

export default function App() {
  return (
    <View style={{ flex: 1 }}>
      <FlatList data={data} renderItem={renderHorizontalList} />
    </View>
  );
}