react-native icon indicating copy to clipboard operation
react-native copied to clipboard

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

Open PratthamArora opened this issue 1 year ago • 6 comments

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 avatar Oct 20 '22 09:10 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 avatar Oct 26 '22 07:10 PratthamArora

any update?

PratthamArora avatar Nov 02 '22 09:11 PratthamArora

does anyone has any insights on this?

PratthamArora avatar Nov 03 '22 06:11 PratthamArora

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

PratthamArora avatar Nov 04 '22 06:11 PratthamArora

any update on this?

PratthamArora avatar Nov 06 '22 13:11 PratthamArora

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

PratthamArora avatar Nov 08 '22 07:11 PratthamArora

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

PratthamArora avatar Nov 09 '22 19:11 PratthamArora