Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Touches not registering/executing on FlatList/ScrollView when navigating back to the screen with a scrolling list (IOS) #35921

Open
PratthamArora opened this issue Jan 21, 2023 · 5 comments

Comments

@PratthamArora
Copy link

PratthamArora commented Jan 21, 2023

Description

If we navigate to a new screen while a list component is currently scrolling and come back to this screen, the touch does not work on the previously scrolling list. Once i manually scroll the list again and scroll ends only after that touch starts to work on the children of the FlatList or ScrollView

The List component can be either ScrollView or FlatList.

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

Step 1: Create a ScrollView or Flatlist with navigation to a new Page on item click.

Step 2: Initiate a flick gesture on the list, to introduce a scroll from the 0th to the Nth position.

Step 3: While the list is scrolling, click on any other clickable component such as the search bar or any other clickable widget which has navigation attached to it.

Step 4: You will be navigated to a new screen. Now navigate to the previous screen.

Step 5: Click on any child component of the previously scrolling list.

Step 6: Nothing will happen until you manually scroll the list and it reaches an idle scroll position

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 (

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

 </TouchableOpacity>
 </View>
);

};

return (

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

);
}
export default App

@Bayramito
Copy link

same issue still existing even i used @PratthamArora's fix

@PratthamArora
Copy link
Author

same issue still existing even i used @PratthamArora's fix

Hi
Here is the configuration I'm using and it is working 100%

Apart from the changes mentioned in the MR,
RN version - 0.66.0
Using native navigation via Native Modules ( not using any navigation library)

@urbanclap-admin
Copy link

any update on this?

Copy link

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

@github-actions github-actions bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Nov 17, 2023
@PratthamArora
Copy link
Author

This is still open

@github-actions github-actions bot removed the Stale There has been a lack of activity on this issue and it may be closed soon. label Nov 18, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants