react-native: [FlatList] Android: onMomentumScrollEnd doesn't trigger when use scrollToOffset
- Review the documentation: https://facebook.github.io/react-native
- Search for existing issues: https://github.com/facebook/react-native/issues
- Use the latest React Native release: https://github.com/facebook/react-native/releases
Environment
React Native Environment Info: System: OS: macOS High Sierra 10.13.6 CPU: x64 Intel® Core™ i5-5675R CPU @ 3.10GHz Memory: 60.77 MB / 8.00 GB Shell: 3.2.57 - /bin/bash Binaries: Node: 8.11.1 - /usr/local/bin/node Yarn: 1.9.4 - /usr/local/bin/yarn npm: 5.6.0 - /usr/local/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman SDKs: iOS SDK: Platforms: iOS 12.0, macOS 10.14, tvOS 12.0, watchOS 5.0 IDEs: Android Studio: 3.0 AI-171.4443003 Xcode: 10.0/10A255 - /usr/bin/xcodebuild npmPackages: react: 16.5.0 => 16.5.0 react-native: 0.57.2 => 0.57.2
Description
onMomentumScrollEnd doesn’t trigger when use scrollToOffset in Android.
And in iOS it works.
also i find that other methods e.g. scrollToIndex, have the same issue.
Reproducible Demo
export default class App extends Component<Props> {
renderItem = ({item: { source }}) => {
return (
<TouchableOpacity onPress={() => {this.scrollView.scrollToOffset({offset: 375, animated: true})}}>
<Image
source={{uri: source.uri}}
style={{width: 375, height: 375}}
/>
</TouchableOpacity>
)
}
onMomentumScrollEnd = () => {
console.log('scrollend')
}
render() {
return (
<FlatList
style={{ flex: 1, backgroundColor: 'black' }}
data={[
{ source: { uri: 'http://i.imgur.com/XP2BE7q.jpg' } },
{ source: { uri: 'http://i.imgur.com/5nltiUd.jpg' } },
{ source: { uri: 'http://i.imgur.com/6vOahbP.jpg' } },
{ source: { uri: 'http://i.imgur.com/kj5VXtG.jpg' } }
]}
renderItem={this.renderItem}
ref={view => this.scrollView = view}
onMomentumScrollEnd={this.onMomentumScrollEnd}
scrollEnabled={true}
horizontal={true}
/>
);
}
}
About this issue
- Original URL
- State: open
- Created 6 years ago
- Reactions: 42
- Comments: 58 (6 by maintainers)
+1
I have added a PR to address this. If anyone here could test it or review it and comment on the PR, I’d love to get some momentum to help it get merged. Thanks!
I was running into this issue also on 0.57.1. In my case, I was trying to use the scrollTo method on a Scroll View. I wanted to trigger something after scrolling to a specific location on the screen. I was able to use the onScroll prop to achieve this 😄
Well, 5 years have passed, and the problem is still relevant. I think it’s a good reason for me to switch to learning Kotlin. Thank you for the time spent learning Facebook/React Native.
I’ve found this to be an issue also on the
ScrollViewcomponent, I’ve experienced this happening in RN 0.71 on Android API’s 31-33 (Android 12 & 13) on both physical devices and the emulators.Five years and counting… The problem still exists 😦
Still an issue on 0.67.4. I faced it using
scrollToIndex, but the result is the sameany update in this??
Here is a reproducible repository : https://github.com/dayze/eventOnMomuntumScrollEnd I’ll try to look into it
still an issue on 71.7 … onmomentumscrollend is not called when using scrollTo and scrollToIndex
I didn’t found any answered thread so I got a way to solve it.
This problem only happens on Android, so you can manually trigger the update that’s not being call on android.
I have found a tricky workaround for this - you can use onScroll instead and check for some conditions.
For instance, check if paginated scroll completed scrolling to the next page with
if (event.nativeEvent.contentOffset % Dimensions.get('window').width === 0) { %something you wanted to trigger in onMomentumScrollEnd% }@raajnadar unfortunately it’s about a different issue https://github.com/facebook/react-native/issues/32235. It shouldn’t have any effect on this one.
this issue still exists on 0.64 but it causes to trigger 4 times