question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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}
      />
    );
  }
}

Issue Analytics

  • State:open
  • Created 5 years ago
  • Reactions:34
  • Comments:37 (4 by maintainers)

github_iconTop GitHub Comments

10reactions
ajpaulingallscommented, Nov 12, 2020

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!

10reactions
ManAnRuckcommented, May 2, 2020

+1

Read more comments on GitHub >

github_iconTop Results From Across the Web

Scroll to last item in flatList - Android - Stack Overflow
onMomentumScrollEnd called when you swipe with your finger, I think you need to manage that manually.
Read more >
[ScrollView] Add completion callback to scrollTo - React Native
No, when I tested my Android Proof of Concept, I ran into a problem where the callback would be triggered before the screen...
Read more >
FlatList - React Native
To render multiple columns, use the numColumns prop. Using this approach instead of a flexWrap layout can prevent conflicts with the item height ......
Read more >
How to use the FlatList Component — React Native Basics
It's an easy way to make an efficient scrolling list of data. Not only is it efficient but it's got an incredibly simple...
Read more >
scrollToOffset not working ! : r/reactnative - Reddit
I have a flatList with a ref,when i call scrollToOffSet it doesnt work properly,it moves to the first item of the flatList ,what...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found