RefreshControl of FlatList prevents the component above from handling touch events

[lobster00]

New Version

0.66.1

Old Version

0.65.2

Build Target(s)

android emulator and device. iOS works fine

Output of react-native info

System:
OS: macOS 11.6
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Memory: 9.57 GB / 32.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 12.22.6 - /usr/local/bin/node
Yarn: 1.22.10 - /usr/local/bin/yarn
npm: 6.14.15 - /usr/local/bin/npm
Watchman: 2021.10.18.00 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.11.2 - /Users/lma/.rvm/gems/ruby-2.7.2/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4
Android SDK:
API Levels: 28, 29, 30
Build Tools: 28.0.3, 29.0.2, 29.0.3, 30.0.2, 30.0.3
System Images: android-28 | Google APIs Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom_64, android-29 | Google Play Intel x86 Atom, android-30 | Google APIs Intel x86 Atom
Android NDK: Not Found
IDEs:
Android Studio: 2020.3 AI-203.7717.56.2031.7784292
Xcode: 12.5.1/12E507 - /usr/bin/xcodebuild
Languages:
Java: 1.8.0_292 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 17.0.2 => 17.0.2
react-native: 0.66.1 => 0.66.1
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Issue and Reproduction Steps

I'm using a FlatList and a TouchableOpacity-component above it. The TouchableOpacity is only handling touch events on its left or its right side, not in its middle part. Reason for this, seems to be the RefreshControl of the FlatList, that somehow prevents this. In RN 0.64.2 it was still working.

I've created a simple app to reproduce the issue:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * Generated with the TypeScript template
 * https://github.com/react-native-community/react-native-template-typescript
 *
 * @format
 */

import React from 'react';
import {FlatList, SafeAreaView, Text, TouchableOpacity} from 'react-native';

const App = () => {
  const [currentValue, setValue] = React.useState(false);
  return (
    <SafeAreaView style={{alignItems: 'center'}}>
      <TouchableOpacity
        style={{
          alignItems: 'center',
          width: 200,
          borderWidth: 1,
          borderRadius: 1,
        }}
        onPress={() => console.log('Pressed')}>
        <Text>Press me</Text>
      </TouchableOpacity>
      <FlatList
        onRefresh={() => {
          setValue(true);
          setTimeout(() => {
            setValue(false);
          }, 2000);
        }}
        refreshing={currentValue}
        data={['Row1', 'Row2', 'Row3']}
        renderItem={item => <Text>{item.item}</Text>}
      />
    </SafeAreaView>
  );
};

export default App;

[garrottkai]

Seeing the same issue. Nothing is visibly rendering but touch events are getting swallowed

[wodCZ]

Have the same issue with RN 0.66.3 on Samsung A32 (Android 11).
I have a FlatList of cards wrapped in TouchableOpacity, 2/3 of the first "page" don't handle touch events.
When I scroll one screen down, the upper part of the screen works as expected. E.g. only first 450px of the whole list doesn't propagate press events.
Switching the items to TouchableHighlight works as a workaround - all items handle presses. Pressable behaved same as TouchableOpacity - no press.

Using element inspector I'm not able to inspect the "unpressable" items either, even when using TouchableHighlight.

Edit: my problem was unrelated to this issue. I had problems with the flatlist items not being pressable, while the issue mentions the Touchable outside the flatlist not being pressable.
My issue was caused by react-native-screens or react-native-reanimated, and it is no-longer present in screens@3.10.0 and reanimated@2.2.4.

[yuri-lomashko-itechart]

Looks like the prop zIndex for button is a workaround

...
<TouchableOpacity
    style={{
          zIndex: 99,
          alignItems: 'center',
          width: 200,
          borderWidth: 1,
          borderRadius: 1,
    }}
    onPress={() => console.log('Pressed')}>
        <Text>Press me</Text>
</TouchableOpacity>
...

[Bardiamist]

Same issue

[guxuloop]

+1
I think it's very serious bug for me. very bad user experience.
Please hurry to fix it 😂 OR give me a workaround.

[garrottkai]

I did a little more investigation and this appears to stem from recent changes to the progressViewOffset behavior.

With the default value for progressVIewOffset, when refreshing={true}, the UI above the RefreshControl is not blocked; however, when refreshing={false} and the RefreshControl is not displayed, the touch issue detailed above occurs.

When progressViewOffset={100}, the touch behavior is initially fine, but after pulling to refresh once, the issue occurs.

[maXXCZ1]

Hello,
currently on RN 0.67.5 and just ran into this issue on Android as well.
I was looking through all latest releases and did not find any mention this was addressed.
Everyone just set progressViewOffset or is there a fix i somehow missed?

[account-mhj]

Looks like the prop zIndex for button is a workaround

...
<TouchableOpacity
    style={{
          zIndex: 99,
          alignItems: 'center',
          width: 200,
          borderWidth: 1,
          borderRadius: 1,
    }}
    onPress={() => console.log('Pressed')}>
        <Text>Press me</Text>
</TouchableOpacity>
...

On RN 0.67.5, to make this work, it seems set a zIndex to its container(SafeAreaView) is necessary .

    <SafeAreaView style={{ alignItems: 'center', zIndex: 1 }}>
      <TouchableOpacity
        style={{
          alignItems: 'center',
          width: 200,
          borderWidth: 1,
          borderRadius: 1,
          zIndex: 999,
        }}
        onPress={() => console.log('Pressed')}>
        <Text>Press me</Text>
      </TouchableOpacity>
      <FlatList
        onRefresh={() => {
          setValue(true)
          setTimeout(() => {
            setValue(false)
          }, 2000)
        }}
        refreshing={currentValue}
        data={['Row1', 'Row2', 'Row3']}
        renderItem={item => <Text>{item.item}</Text>}
      />
    </SafeAreaView>