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

Open
3 tasks done
myl0204 opened this issue Oct 11, 2018 · 59 comments
Open
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.

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.

@gijs-faraday
Copy link

Same here

@demedos
Copy link

demedos commented Sep 9, 2022

Still an issue on 0.67.4. I faced it using scrollToIndex, but the result is the same

@ivankdev
Copy link

ivankdev commented Nov 4, 2022

same issue

@etrpekson99
Copy link

still exists pls fix

@chj-damon
Copy link

still have this issue in RN 0.66

@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..

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.
Projects
None yet
Development

No branches or pull requests