[FlatList] Android: onMomentumScrollEnd doesn't trigger when use scrollToOffset

[myl0204]

• 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(R) Core(TM) 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}
      />
    );
  }
}

[react-native-bot]

Can you run react-native info and edit your issue to include these results under the Environment section?

If you believe this information is irrelevant to the reported issue, you may write [skip envinfo] under Environment to let us know.

[myl0204]

did anyone have check this issue? just let me know there is somebody following this. Or, maybe some of you can tell me that's not an issue with react-native itself. Thanks!

[mccjul]

I am also currently having this issue with react native 0.57.5

[otusweb]

ANyone has a workaround for this issue?

[leolusoli]

+1

[alexandrecanuto]

Having this issue as well.

[csath]

+1 on react-native 0.57.8v

[joseph-perez]

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 😄

onScroll(event) {
     if (event.nativeEvent.contentOffset.y === this.targetScreenOffsetY) {
        this.doSomething();
     }
}

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[IseeUDenis]

I am also currently having this issue with react native 0.59

[Ryabchikus]

I am also currently having this issue with react native 0.61.2
@joseph-perez thanks for workaround!

[gwl002]

I feel really bad to use scrollview in react-native.Another bug,onMomentumScrollEnd not work when
scroll slowly on ios.

[Bardiamist]

I faced with it. I also use horizontal FlatList. onMomentumScrollEnd very often not called if stop scroll with small velocity.

[Bardiamist]

I accidentally found a solution for myself. I wrapped every FlatList item in TouchableOpacity.

[meagher43]

Facing this issue today please fix

[anatoleblanc]

Same here

[SerranoPablo]

same here

[nescroft]

still an issue on 71.7 ... onmomentumscrollend is not called when using scrollTo and scrollToIndex

[dhruvtailor7]

+1

[novirusallowed]

+1

[Bardiamist]

Is it related maybe? 681b35d

[lekbit]

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.

[dayze]

Here is a reproducible repository : https://github.com/dayze/eventOnMomuntumScrollEnd
I'll try to look into it

[github-actions]

⚠️	Missing Reproducible Example
ℹ️	We could not detect a reproducible example in your issue report. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template. A reproducer needs to be in a GitHub repository under your username.

[github-actions]

⚠️	Missing Reproducible Example
ℹ️	We could not detect a reproducible example in your issue report. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template. A reproducer needs to be in a GitHub repository under your username.

[netojose]

Five years and counting...
The problem still exists :(

[FlushNorris]

wow... this is still an issue? Stuff like this needs to be addressed maybe not instantly, but 4 years later this cannot be an issue if React Native must survive.

[arasrezaei]

yes... i tested it with reanimated's useSrollHandler

useAnimatedScrollHandler({
onMomentumEnd: (event) => {
        console.log('hello')
      },
})

and sadly it's not working

[SomniumDigital]

I've found this to be an issue also on the ScrollView component, 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.

[Shivemmer]

any update in this??

[raajnadar]

I thought I was alone, I can see the bug in version 0.73.6 also, I think this will be solved in the next major release of the new architecture.

[dimaportenko]

I think this will be solved in the next major release of the new architecture.

@raajnadar why do you think so?

[raajnadar]

@dimaportenko 681b35d

This commit was picked and released on 0.74.0, waiting for expo SDK 51 to test and confirm

[dimaportenko]

@raajnadar unfortunately it's about a different issue #32235. It shouldn't have any effect on this one.

[raajnadar]

I can confirm this bug is also present on the React Native Web ~0.19.6

[WayneKim92]

I got the same issue. In RN 0.74.

[dhruvbhatia]

Are there any workarounds to address this? Unfortunately it's still present on RN 0.76.
EDIT: Looks like there's a PR here, but it's been marked as stale..

[Abbondanzo]

This should be fixed by #45187. I've made a few changes internally and I hope to land it this week

[Abbondanzo]

Great news! c69e330 has just landed, containing the fix. The branch cut for RN 0.77 is scheduled in ~2 weeks and this will go out in that version. I'm also publishing a few fixes on the iOS side to align expectations for when these events fire (#47471 and #47468 if ya want to track). In any case, these commits will be tagged with the versions they are part of.

I'm going to close this issue out for now. Special thanks to @Biki-das for the initial fix. Note that this fix does not contain support for performance testing (via FpsListener), there's a separate batch of work currently in progress to add support.

[Biki-das]

Thanks you @Abbondanzo for completing the same, means a lot, looking forward to make react native better.