[IOS] ScrollView inside Flatlist blocks other touchables (children of parent Flatlist) in IOS

[PratthamArora]

Description

The code to reproduce this is straightforward:

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


const App =  ()=> {
  const ref = React.createRef<ScrollView>()
  useEffect(()=>{
    ref.current?.scrollTo(-200)
  },[])
  const renderListItem = ({ item, index }: any) => {
return (
      <View>
	<ScrollView
       onScroll={() => {
           console.log(" onScroll called scrollview");
        }
      }
     scrollEventThrottle={16} 
      horizontal
>
          <Text>selected</Text>
          <Text>selected</Text>
          <Text>selected</Text>
          <Text>selected</Text>
          <Text>selected</Text>
          <Text>selected</Text>
          <Text>selected</Text>
          <Text>selected</Text>
          <Text>selected</Text>
          <Text>selected</Text>
          <Text>selected</Text>
          <Text>selected</Text>
          <Text>selected</Text>
          <Text>selected</Text>
          <Text>selected</Text>
          <Text>selected</Text>
          <Text>selected</Text>
          <Text>selected</Text>
          <Text>selected</Text>
          <Text>selected</Text>
          <Text>selected</Text>
          <Text>selected</Text>
          <Text>selected</Text>
          <Text>selected</Text>
          <Text>selected</Text>
          <Text>selected</Text>
          <Text>selected</Text>
          <Text>selected</Text>
          <Text>selected</Text>
          <Text>selected</Text>
          <Text>selected</Text>
     
      </ScrollView>

           <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

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

[PratthamArora]

I found out that 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 and this seems to have fixed the issue for ScrollView and Flatlist nested inside a Flatlist.

Is this the correct fix for the above issue?

[PratthamArora]

any update?

[PratthamArora]

does anyone has any insights on this?

[PratthamArora]

Can anyone please point me in the right direction? Why does the Responder system work differently for Android and IOS?

[PratthamArora]

any update on this?

[PratthamArora]

can anyone please help with this? can you please help in identifying ?@cortinico

[PratthamArora]

A gentle reminder that this is not resolved and still looking for a solution