Open
Description
Description
FlatList's scrollEventThrottle > 16 silents item's tap listening onStartShouldSetResponder when scrolling list scrollToIndex as animated on Android.
Demo app works first but after pressing "Scroll to 50" it calls flatListRef.current.scrollToIndex and issue start to exist. Tap listening onStartShouldSetResponder does not get taps. Taps are received again when scrolling list a bit.
- Tap listener is silent when scrollEventThrottle > 16 and scrollToIndex animated true
- Tap listener works when scrollEventThrottle <= 16
- Tap listener works when scrollEventThrottle > 16 and scrollToIndex animated is false
Issue exists on React Native 0.77.2 (newArchEnabled=false) but not anymore in 0.79.
Steps to reproduce
import React, { useEffect, useRef } from 'react';
import {
AppRegistry,
Platform,
UIManager,
View,
Text,
FlatList,
Button,
} from 'react-native';
const App2 = () => {
const array = Array.from({ length: 100 }, (_, i) => i);
const flatListRef = useRef(null);
return (
<View
style={{
flex: 1,
backgroundColor: 'gray',
gap: 100,
}}
>
<View style={{ marginTop: 300, backgroundColor: 'blue', height: 50 }}>
<FlatList
data={array}
ref={flatListRef}
horizontal={true}
scrollEventThrottle={16} // HERE
renderItem={({ item }) => (
<View
style={{
width: 50,
height: 50,
backgroundColor: 'white',
justifyContent: 'center',
alignItems: 'center',
}}
onStartShouldSetResponder={() => {
// HERE tap received
console.log('onStartShouldSetResponder', item);
return false;
}}
onStartShouldSetResponderCapture={() => false}
onMoveShouldSetResponderCapture={() => false}
>
<Text>{item}</Text>
</View>
)}
keyExtractor={item => item.toString()}
/>
</View>
<Button
title="Scroll to 50"
onPress={() => {
flatListRef.current.scrollToIndex({
index: 50,
animated: true, // HERE
});
}}
/>
</View>
);
};
AppRegistry.registerComponent('MyApp', () => App2);
React Native Version
0.77.2
newArchEnabled=false
Affected Platforms
Runtime - Android
Output of npx @react-native-community/cli info
System:
OS: macOS 15.3.2
CPU: (12) arm64 Apple M2 Pro
Memory: 3.34 GB / 32.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 20.11.1
path: /usr/local/bin/node
Yarn:
version: 1.22.22
path: /usr/local/bin/yarn
npm:
version: 10.2.4
path: /usr/local/bin/npm
Watchman:
version: 2024.12.02.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods:
version: 1.16.2
path: /opt/homebrew/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 24.2
- iOS 18.2
- macOS 15.2
- tvOS 18.2
- visionOS 2.2
- watchOS 11.2
Android SDK:
Android NDK: 22.1.7171670
IDEs:
Android Studio: 2024.2 AI-242.23726.103.2422.12816248
Xcode:
version: 16.2/16C5032a
path: /usr/bin/xcodebuild
Languages:
Java:
version: 17.0.10
path: /usr/bin/javac
Ruby:
version: 3.3.6
path: /opt/homebrew/opt/ruby/bin/ruby
npmPackages:
"@react-native-community/cli": Not Found
react: Not Found
react-native: Not Found
react-native-macos: Not Found
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: true
newArchEnabled: false
iOS:
hermesEnabled: true
newArchEnabled: false
Stacktrace or Logs
No logs
Reproducer
See demoapp above on 0.77.2 (newArchEnabled=false) does not work as expected.
Tester app on 0.79 (newArchEnabled=true) https://github.com/tero-paananen/flatlist-scrollEventThrottle works with no issues.
Screenshots and Videos
No response