React Native Scrollview detect negative scroll

Question

I am using a code snippet like this:

componentDidMount() {
    this.state.scrollY.addListener((value) => this.handleScroll(value));
  }

  handleScroll(pullDownDistance) {
//pull down distance knows how much you pulled

}

To detect when a user is attempting to scroll. the 'pullDownDistance' variable will give you the distance of each pull down.

I am trying to emulate something like the gif implemented below:

Something like this gif: https://github.com/LennyBoyatzis/RN-Pull-To-Refresh-Gears/blob/master/images/giphy.gif

Where it is possible to pull the scroll view in the opposite direction, and then it will reload. I can't seem to get the view to detect any sort of 'pull down in the opposite direction, as the pulldown function (handleScroll) does not seem to be executed.

is there a way to detect scrolls in that direction?

@Codesingh yeah basically, It seems like iOS behaives different than android (that gif is iOS), but I am just trying to figure out how I can detect when the user is 'pulling down' the view basically — Joe Caraccio
– Joe Caraccio, Commented Jan 8, 2017 at 20:21
*Where it is possible to pull the scroll view in the opposite direction *, do you mind throwing some light on what do you mean by this ? — Vikram Belde
– Vikram Belde, Commented Jan 8, 2017 at 22:45

Dirk · Accepted Answer · 2018-11-17 13:13:25Z

3

If you implement onScroll handler of a ScrollView (RN 0.57), you'll notice that when you overscroll (meaning: scroll up, while scrollview is already at top), the event event.nativeEvent.contentOffset.y has negative values for iOS, but it remains 0 for Android.

Therefor, for iOS it's quite easy to detect negative scroll. For Android you'll have to look for some other solution.

answered Nov 17, 2018 at 13:13

Dirk

2,2072 gold badges21 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React Native Scrollview detect negative scroll

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related