Touchables do not register taps in nested FlatList on iOS

[lxr-mwhite]

Description

Hello!

We are using react-native-gesture-handler in our project and currently working on a layout that involves Touchables and nested FlatLists. We have come across an issue on iOS and are hoping to receive some guidance. I am creating this issue because I am seeing the behaviour we expect on Android.

A quick description of the layout is as follows:

• The screen displays a vertical list of cards to users
  • the card shows a large image, and some text description
  • tapping anywhere on the card should open a new screen with additional details
• The area on the card that shows the image is horizontal list allowing users to scroll through

Our issue is that while both the vertical and horizontal scrolling is working, tapping in the area occupied by the FlatList does not trigger the onPress callback of the Touchable. Only touches in the area occupied by the text description will trigger the onPress callback.

Please reference the screenshot below for a reference to the layout. The images are represented by the different color blocks.

Steps to reproduce

1. Render a vertical FlatList with Touchable items
2. Render a horizontal FlatList inside of the Touchable items

See code sample below for an example:

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

const App: React.FC = () => {
  const renderItem = React.useCallback(() => {
    return (
      <View style={{ marginBottom: 20 }}>
        <TouchableOpacity
          style={{ height: 300, width: 350, borderWidth: 1, borderColor: 'grey' }}
          onPress={() => console.log('TouchableOpacity onPress called')}
        >
          <FlatList
            horizontal={true}
            pagingEnabled={true}
            data={['red', 'green', 'blue']}
            renderItem={(data) => {
              return <View style={{ backgroundColor: data.item, width: 348 }} />;
            }}
          />
          <View>
            <Text style={{ fontSize: 18 }}>Title</Text>
            <Text style={{ fontSize: 12 }}>Subtitle</Text>
          </View>
        </TouchableOpacity>
      </View>
    );
  }, []);

  return (
    <GestureHandlerRootView>
      <FlatList data={[1, 2, 3, 4, 5]} renderItem={renderItem} contentContainerStyle={{ padding: 20 }} />
    </GestureHandlerRootView>
  );
};

export default App;

Snack or a link to a repository

https://snack.expo.dev/wnDDkWgK60-bO0jYdCOBZ

Gesture Handler version

2.16.0

React Native version

0.71.16

Platforms

iOS

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Paper (Old Architecture)

Build type

Debug mode

Device

None

Device model

No response

Acknowledgements

Yes