React-native animated.event custom onScroll listener
Write handler function like:
handleScroll = (e) => {
console.log(e.nativeEvent.contentOffset.y);
}
and you can add listener
like this:
Animated.event(
[{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }],
{ listener: (event) => this.handleScroll(event) }
)
When you look at the source code:
/**
* Takes an array of mappings and extracts values from each arg accordingly,
* then calls `setValue` on the mapped outputs. e.g.
*
*```javascript
* onScroll={Animated.event(
* [{nativeEvent: {contentOffset: {x: this._scrollX}}}]
* {listener}, // Optional async listener
* )
* ...
* onPanResponderMove: Animated.event([
* null, // raw event arg ignored
* {dx: this._panX}, // gestureState arg
* ]),
*```
*
* Config is an object that may have the following options:
*
* - `listener`: Optional async listener.
* - `useNativeDriver`: Uses the native driver when true. Default false.
*/
event,
This is how I made it work:
onScroll={Animated.event(
[{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }],
{
useNativeDriver: true,
listener: event => {
const offsetY = event.nativeEvent.contentOffset.y
// do something special
},
},
)}
Couldn't get Michal's solution to work for me. Ended up going with this
onScroll={({ nativeEvent }) => {
animatedY.setValue(nativeEvent.contentOffset.y);
// other actions to be performed on scroll
}}