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

[myl0204]

• [x] Review the documentation: https://facebook.github.io/react-native
• [x] Search for existing issues: https://github.com/facebook/react-native/issues
• [x] 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[bot]]

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.

[PaxLyj]

Same problem in 0.61.5, scrollToOffset didn't trigger onMomentumScrollEnd callback. @Bardiamist no luck for me, it didn't work 😢

[stale[bot]]

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.

[ManAnRuck]

+1

[gibrangul]

+1

[a-eid]

still facing this issue even with a ScrollView as well, it some times trigger but very rarly and not consistent ...

[Jaycexx]

still reproduce this issue in 0.57.7

[amblicity]

i think i can shed some light to when onMomentumScrollEnd does not trigger on android as of RN0.61.5 when dragged manually (and released without velocity), albeit only little related to this issue. that might sound weird but after fiddling for hours to fix this issue, we solved it by replacing margins with paddings on the children and each child needed a backgroundColor property, whether with 'transparent' or a color. not setting this property made the bug reproducible again and we weren't able to get the onMomentumScrollEnd event to fire.

• if children within a FlatList / ScrollView are having margins and the drag appears to be finished on a margin, say "Dead Space", onMomentumScrollEnd is not fired on Android. we found that by adding backgroundColors to each child and whenever we left the drag on a not-background area, no event was fired

• if children within a FlatList / ScrollView are having fixed sizes and paddings yet no backgroundColor is defined and the drag appears to be finished on a Dead Space, onMomentumEnd is not fired on Android (funnily enough, if they're given backgroundColor: 'transparent', the event is fired even though the actual item's padding was hit)

i'm trying to provide a working demo for this as currently we fixed it in a non-abstractable screen.

[ajpaulingalls]

any work arounds to get onMomentumScrollEnd to fire after a call to scrollToOffset?

[ajpaulingalls]

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!

[esinanturan]

this issue still exists on 0.64 but it causes to trigger 4 times

[mohity777]

It exists in 0.64, scrollToIndex does not fire onMomentumScrollEnd at the end of scrolling. It is called when user drags it but not when scrollToIndex is used.

[milky-grech]

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% }

[LukeAppGuy]

Still having this problem on Android, is there no workaround for using onMomentumScrollEnd together with scrollToOffset? I am using onMomentumScrollEnd to detect the index of the current item, then when a button is pressed the pagination/index is incremented.

[SGarcia710]

I didn't found any answered thread so I got a way to solve it.

      flatList?.current?.scrollToOffset({
        offset: (currentIndex + 1) * width,
        animated: true,
      }); // This will trigger the onMomentunScrollEnd on iOS.
      if (Platform.OS === 'android') {
        setCurrentIndex(currentIndex + 1); // this is what we trigger on the onMomentunScrollEnd
      }

This problem only happens on Android, so you can manually trigger the update that's not being call on android.

[stale[bot]]

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.

[exzos28]

actual