[IOS] FlatList inside FlatList blocks other touchables (children of parent FlatList) in IOS during scroll

This issue has been created since 2022-11-14.

Description

inside a parent vertical FlatList, use a horizontal child FlatList.
While scrolling the child FlatList the other children of parent FlatList cannot trigger onPress. They are blocked.

Version

0.66.0, 0.69.0

Output of npx react-native info

System:
OS: macOS 12.1
CPU: (8) x64 Apple M1 Pro
Memory: 28.88 MB / 16.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 14.10.0 - ~/.nvm/versions/node/v14.10.0/bin/node
Yarn: 1.22.19 - ~/.nvm/versions/node/v14.10.0/bin/yarn
npm: 6.14.8 - ~/.nvm/versions/node/v14.10.0/bin/npm
Watchman: Not Found
Managers:
CocoaPods: 1.11.0 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 15.0, DriverKit 20.4, macOS 11.3, tvOS 15.0, watchOS 8.0
Android SDK: Not Found
IDEs:
Android Studio: 2021.2 AI-212.5712.43.2112.8815526
Xcode: 13.0/13A233 - /usr/bin/xcodebuild
Languages:
Java: 14.0.2 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 18.0.0 => 18.0.0
react-native: 0.69.6 => 0.69.6
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

inside a parent vertical flatlist, use a horizontal child flatlist.
While scrolling the child flatlist the other children of parent flatlist cannot trigger onPress. They are blocked.

Snack, code example, screenshot, or link to a repository

`
import React, { Component } from 'react';
import { View, Text, TouchableOpacity, SafeAreaView, FlatList, ScrollView } from 'react-native';

const App = ()=> {
const renderListItem = ({ item, index }: any) => {
return (

<FlatList
data={data}
horizontal
renderItem={renderDataListItem}
onScroll={() => {
console.log(" onScroll called in child Flatlist ");
}
}
/>

       <TouchableOpacity
       style={{backgroundColor: 'yellow', padding: 20}}
       onPress={() =>console.log('on Press')}>
       <Text>Count</Text>

     </TouchableOpacity>
     </View>
	);
};

return (
  <SafeAreaView>
      <FlatList
        data={['']}
        renderItem={renderListItem}
        onScroll={() => {
          console.log(" onScroll called Flatlist ");
        }
      }
      />
      </SafeAreaView>
  
);

}
export default App

PratthamArora wrote this answer on 2022-11-14

Detailed RCA -

Whenever a component is clicked while the scroll is active the onPress function of the component is not being called, however components that were wrapped with touchable opacity components are highlighted i.e visible visual feedback, basically, the touch is being registered but has not been propagated to the component.
The onPress has its own life cycle. The Pressability class relies on various variables such as the current state, the previous state, and the current signal being propagated to this class to complete the entire life cycle of this method.
For onPress to be triggered, the signal that should be received is RESPONDER_RELEASE whereas in our case the signal that is received is RESPONDER_TERMINATED, which means that this event should be canceled.

The gesture recognizer system in React Native works on the Responder System wherein for a particular view to register and execute certain gestures such as a click or a swipe, the current view needs to have a lock on it i.e it needs to be the current responder for that entire page. The way the Responder System works is that it is a singleton at the global level and at one particular moment of time only one view can be the responder, hence all the other views and any gesture triggered on that view is canceled if that view is not the current responder.

One of the issues is when a scroll view is used with onScroll method defined. This is a bubbling event that is emitted from the native to the JS and for a view to consume a particular event and take action on it needs to be the responder since this event is fired every 16 ms on iOS, the scroll view is the current responder until the scrolling is stopped which cancels any other gesture triggered on any other component.

As per the entire journey defined in the Responder System, _handleScrollShouldSetResponder method is called again and again to set the scroll view as the current responder which is called in the ResponderEventPlugin from React which then triggers this method and sets the scroll view as the current responder.

Another issue is where a FlatList is nested inside a parent FlatList. It exhibits the same behavior as described above. Since a FlatList natively extends ScrollView only, it inherits the same characteristics.

After debugging the native implementations and working of ScrollView and it’s events on Android and iOS, and the lifecycle of gestures and the Responder System in React Native and React, I found that _handleScrollShouldSetResponder method is never called on Android but is called on IOS every time an OnScroll event is emitted from native to JS. This method is responsible for setting the scroll view as the current responder.

In Android whenever a Scroll Event is emitted, a boolean responderIgnoreScroll set to true is sent as metadata which is consumed in React where the transfer of responder occurs.
This flag is missing from the Scroll Event data in IOS.
Upon sending this flag with the value set to true, the _handleScrollShouldSetResponder method wasn’t called on IOS just like Android but because of this when I touch a child component of Scrollview and then drag to scroll it does not cancel the touch event and the child view becomes the responder and registers the onPress method instead of the desired behavior where the Scrollview should have scrolled.

PratthamArora wrote this answer on 2022-11-14

Related issue - #35333

PratthamArora wrote this answer on 2022-11-14

tried to use disableScrollViewPanResponder flag on my parent FlatList which does fix the issue to some level but due to this when I touch a child component of parent FlatList and then drag to scroll it does not cancel the touch event and the child view becomes the responder and registers the onPress method instead of the desired behavior where the parent FlatList should have scrolled.

PratthamArora wrote this answer on 2022-11-14

Old Reported issue - #10822

Ggayane wrote this answer on 2022-11-20

Does anyone have an update for this kind of issue? I'm facing the same problem, I have a screen with flat list and it was working perfect on RN v.0.64, after updating to v.0.70 it started to work just terrible, the rendering takes much more longer, and there switching screens blocks the touchable, scrolling, etc...

More Details About Repo
Owner Name facebook
Repo Name react-native
Full Name facebook/react-native
Language JavaScript
Created Date 2015-01-09
Updated Date 2022-12-10
Star Count 106395
Watcher Count 3660
Fork Count 22685
Issue Count 2288

YOU MAY BE INTERESTED

Issue Title Created Date Comment Count Updated Date
MVTLayerProps is missing attributes 1 2021-10-21 2022-11-26
Zkas error in contract test 1 2022-08-13 2022-12-10
How to getDirectoryContents with custom headers? 2 2020-12-05 2022-09-24
VPN_OPTIONS Error: Options error: Unrecognized option or missing or extra parameter(s) 0 2022-10-12 2022-11-11
Bug: Unable to start container /usr/bin/tini no such file. 2 2022-10-05 2022-10-16
Cannot check external IP/contact PIA 4 2022-10-03 2022-10-16
请问为我两个服务器都被同一个暴力破解密码,31号新申请的阿里云服务器,也被尝试破解密码,ip为43.128.55.35,是什么原因泄露ip了 10 2021-08-02 2022-11-21
Bot freezes sometimes 7 2018-06-01 2022-10-07
tsc not finding types / noImplicitAny==false is required 11 2022-02-07 2022-08-27
mysql client update to MariaDB 10.6.7 subtly breaks some functionalities 2 2022-02-18 2022-11-11
"parentbindings" causing test warning / showing up in html when using HOC 0 2021-06-16 2022-12-07
Need: Key Management 1 2020-04-29 2022-11-24
请问刘老师有可导入到neo4j图书库到点边数据格式文件吗? 1 2021-10-28 2022-09-17
您好,是否有可能增加香港上市,美国上市的公司数据 0 2022-02-15 2022-09-17
How to switch between multiple scenes? 2 2022-10-18 2022-12-05
V2rayNG installed on anbox using xray-core doesn't seem to be working 3 2021-11-21 2022-09-16
[USE] Update overrides to upstream 1 2022-09-17 2022-11-27
are xbps-rindex too slow 2 2022-05-09 2022-12-02
kill @@$generichide and @@$genericblock pls! or at least allow to globally ignore those 0 2022-06-10 2022-10-16
cannot delete custom user attribute due to "#" in username 2 2021-11-23 2022-10-31
Dafny 4 proposal: Make `-xyz` mean the same as `-xyz:1` when `-xyz` accepts only `:0` and `:1` 7 2022-07-05 2022-08-26
Questions -> all questions in Audit feature sorts by null values 3 2021-10-05 2022-10-12
Run with --gpu option and fail to get a glx context (remote server with NVIDIA GPU) 35 2021-03-30 2022-10-02
Allow disabling of leader-elect/phone home to 2bf90a83.stakater.com 2 2021-11-17 2022-09-24
What about white space? 1 2021-02-01 2022-12-05
[🐛] when trying to launchImageLibrary return includeExtra exception 2 2021-11-29 2022-12-01
Inky Developer + HAT Mini (Host) not working 2 2022-09-15 2022-12-02
Duniverse is broken on non-English systems 1 2020-10-12 2022-11-30
Recursive parameter creates Infinite loop in Verilator --lint-only 2 2021-11-13 2022-11-11
Improving installation instructions 2 2022-05-22 2022-11-22
Table scoped instruction incorrect 2 2022-11-07 2022-12-02
Allow more control to channel names for Itch.io uploading 1 2022-04-23 2022-10-12
m-team站点地址变更 2 2021-03-17 2022-01-20
support GitLab as Repository Storage 0 2022-09-21 2022-11-29
Z3 fails to find simple sat solution after quantified bitvector assertion (stuck in loop) 1 2022-11-01 2022-12-01
[BUG] `npm link` fails when running inside path with hash tag `#` 1 2022-07-03 2022-10-01
[MD] Multiple instances same whatsapp account 3 2022-03-16 2022-10-05
Make the low-pass ("smoothing") for the freehand tool configurable 0 2022-10-10 2022-12-01
"Getting started" does not work 1 2022-02-09 2022-11-20
`travis monitor` fails with AssetNotFound in 1.10.0 2 2020-11-12 2022-11-28
OpenOCD doesn't automatically hook up to CPU_1 after chip reset in post 20200709 versions. (OCD-373) 1 2021-06-15 2022-11-23
OpenOCD/GDB connection is dropped on startup (OCD-380) 5 2021-06-29 2022-12-03
MeanAveragePrecision devices mismatch 5 2022-04-09 2022-11-27
DM rerun not open for screenshots 0 2021-09-09 2022-11-09
Some of the site in Link Exchange are being no more maintained 1 2022-03-10 2022-11-09
CURL Transport sometimes reports failures accessing https://twitter.com in MultipleCrlOperationsTest 0 2022-10-04 2022-11-26
tokei could be better with `.y` files 2 2021-05-17 2022-11-07
Cauldrons not filling from rain 2 2022-03-15 2022-10-22
cli doesn't get env vars from wordpress image 7 2021-03-24 2022-12-07
请问如何打开WCDB加密数据库 3 2019-12-02 2022-01-22