react-native: [IOS] ScrollView inside FlatList blocks other touchables (children of parent Flatlist) in IOS during scroll

Description

While scrolling and clicking on any other component does not trigger any action. A ScrollView inside FlatList blocks other clickable components (children of parent FlatList) in IOS. This issue happens in Scrollview only when the onScroll event is used and works fine if it is not used.

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 Scrollview. While scrolling the child scrollview the other children of the 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 ( <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