react-native
react-native copied to clipboard
[IOS] ScrollView inside Flatlist blocks other touchables (children of parent Flatlist) in IOS
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
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?
any update?
does anyone has any insights on this?
Can anyone please point me in the right direction? Why does the Responder system work differently for Android and IOS?
any update on this?
can anyone please help with this? can you please help in identifying ?@cortinico
A gentle reminder that this is not resolved and still looking for a solution