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

[coado]

Hey, the issue is with how the TouchableOpacity is implemented fully on iOS. Basically, it stops hit testing on scroll view, so the touch events are not registered. The issue can be simply solved by using Pressable instead 😅.

[lxr-mwhite]

Hey, the issue is with how the TouchableOpacity is implemented fully on iOS. Basically, it stops hit testing on scroll view, so the touch events are not registered. The issue can be simply solved by using Pressable instead 😅.

Thank you for the response @coado.
While using Pressable does fix the issue of tapping the area of the scroll view, it unfortunately no longer lets you scroll inside the embedded scroll view.

[coado]

Hey, the issue is with how the TouchableOpacity is implemented fully on iOS. Basically, it stops hit testing on scroll view, so the touch events are not registered. The issue can be simply solved by using Pressable instead 😅.

Thank you for the response @coado. While using Pressable does fix the issue of tapping the area of the scroll view, it unfortunately no longer lets you scroll inside the embedded scroll view.

Have you tried using Pressable from react-native-gesture-handler? I see that it doesn't work with Pressable from react-native, but it should work with the one from the library.

[lxr-mwhite]

Hey, the issue is with how the TouchableOpacity is implemented fully on iOS. Basically, it stops hit testing on scroll view, so the touch events are not registered. The issue can be simply solved by using Pressable instead 😅.

Thank you for the response @coado. While using Pressable does fix the issue of tapping the area of the scroll view, it unfortunately no longer lets you scroll inside the embedded scroll view.

Have you tried using Pressable from react-native-gesture-handler? I see that it doesn't work with Pressable from react-native, but it should work with the one from the library.

Oh! The version I am using does not have Pressable. Let me update react-native-gesture-handler and I'll get back to you. Thank you!

[lxr-mwhite]

@coado Thank you! Using Pressable from react-native-gesture-handler is working how I would expect it to.