3

I am building a header that animates/hides as the user scrolls down a Flatlist. Is there any way to find out the scroll position of the Flatlist in pixels?

I'm using react native 0.59.8. I've tried using onScroll hoping it passes a value to the callback - it doesn't. I've also tried onScrollBeginDrag, onScrollEndDrag and onMomentumScrollEnd.. None of them provide information of the current scroll position.

onSroll={(info)=>{console.log(info)}

I would expect to get some information about the scroll, but none is passed.

SirCameron
  • 53
  • 1
  • 5
  • I don't quite get your issue, in my test it works as expected. I've created a short fiddle for getting the scroll value from the onScroll Event, maybe you can track down your issue like this. Here is the fiddle: https://jsfiddle.net/s7b5p0tx/1/ The scroll position will be displayed in console. – NickG Jul 09 '19 at 12:48
  • 1
    @NickG I'm referring to React Native, not React js (web). – SirCameron Jul 09 '19 at 13:00
  • oh well, my bad – NickG Jul 09 '19 at 13:06
  • sorry to point out the obvious, but your code above is `onSroll` not `onScroll` – Mike M Jul 09 '19 at 13:38
  • @MikeM Whoops. Typing too fast. Thanks! And thanks to all the answers. I don't have enough cred to upvote. – SirCameron Jul 10 '19 at 13:19

3 Answers3

3

use the code

<FlatList onScroll={this.handleScrollView} />

handleScrollView: function(event: Object) {
 this.setState({ scrollPosition: event.nativeEvent.contentOffset.y });
}
kirtan dudhat
  • 95
  • 5
0

its working 

     onScroll={(r) => console.log(r.nativeEvent.contentOffset.y)}

post your code here if you want to find bug

Aurangzaib Rana
  • 4,028
  • 1
  • 14
  • 23
0

A Flatlist, as said in the docs, has all the props of a ScrollView, so as answered here,

Add a handler to your FlatList:

<FlatList onScroll={this.handleScroll} />

And then:

handleScroll: function(event) {
   console.log(event.nativeEvent.contentOffset.y);
},
Romain Lavalle
  • 129
  • 1
  • 7