Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
3 tasks done
myl0204 opened this issue Oct 11, 2018 · 63 comments
Closed
3 tasks done
Labels
Bug Component: FlatList Needs: Repro This issue could be improved with a clear list of steps to reproduce the issue. Platform: Android Android applications. Resolution: PR Submitted A pull request with a fix has been provided.

Comments

@myl0204
Copy link

myl0204 commented Oct 11, 2018

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
Copy link
Collaborator

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
Copy link
Author

myl0204 commented Oct 23, 2018

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
Copy link

mccjul commented Dec 10, 2018

I am also currently having this issue with react native 0.57.5

@otusweb
Copy link

otusweb commented Dec 16, 2018

ANyone has a workaround for this issue?

@leolusoli
Copy link

+1

@alexandrecanuto
Copy link

Having this issue as well.

@csath
Copy link

csath commented Feb 15, 2019

+1 on react-native 0.57.8v

@joseph-perez
Copy link

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
Copy link

stale bot commented Aug 4, 2019

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.

@stale stale bot added Stale There has been a lack of activity on this issue and it may be closed soon. and removed Stale There has been a lack of activity on this issue and it may be closed soon. labels Aug 4, 2019
@IseeUDenis
Copy link

I am also currently having this issue with react native 0.59

@Ryabchikus
Copy link

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

@gwl002
Copy link

gwl002 commented Dec 10, 2019

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

@Bardiamist
Copy link
Contributor

Bardiamist commented Jan 16, 2020

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

@Bardiamist
Copy link
Contributor

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

@meagher43
Copy link

Facing this issue today please fix

@anatoleblanc
Copy link

Same here

@SerranoPablo
Copy link

same here

@nescroft
Copy link

nescroft commented May 2, 2023

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

@dhruvtailor7
Copy link
Contributor

+1

1 similar comment
@novirusallowed
Copy link

+1

@Bardiamist
Copy link
Contributor

Is it related maybe? 681b35d

@lekbit
Copy link

lekbit commented Jul 19, 2023

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.

@github-actions github-actions bot added the Needs: Repro This issue could be improved with a clear list of steps to reproduce the issue. label Jul 19, 2023
@dayze
Copy link

dayze commented Jul 26, 2023

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

@github-actions
Copy link

⚠️ 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.

1 similar comment
@github-actions
Copy link

⚠️ 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
Copy link

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

@FlushNorris
Copy link

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
Copy link

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

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

and sadly it's not working

@SomniumDigital
Copy link

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
Copy link

any update in this??

@raajnadar
Copy link

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
Copy link

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

@raajnadar why do you think so?

@raajnadar
Copy link

@dimaportenko 681b35d

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

@dimaportenko
Copy link

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

@raajnadar
Copy link

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

@WayneKim92
Copy link

WayneKim92 commented Jul 16, 2024

I got the same issue. In RN 0.74.

@dhruvbhatia
Copy link

dhruvbhatia commented Oct 25, 2024

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
Copy link
Contributor

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

@Abbondanzo
Copy link
Contributor

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
Copy link
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Bug Component: FlatList Needs: Repro This issue could be improved with a clear list of steps to reproduce the issue. Platform: Android Android applications. Resolution: PR Submitted A pull request with a fix has been provided.
Projects
None yet
Development

No branches or pull requests