You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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';
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
};
return (
<FlatList
data={['']}
renderItem={renderListItem}
onScroll={() => {
console.log(" onScroll called Flatlist ");
}
}
/>
);
}
export default App
The text was updated successfully, but these errors were encountered: