RefreshControl of FlatList prevents the component above from handling touch events

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® Core™ 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;

[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>
...

[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.