Can Some one explain me "onScroll" with "Animated.event"?

Question

Can someone explain me this react native docs in Animated.event in onScroll? Or just could provide me a link to it's refs, plz. Shouldn't I be passing a function to the onScroll (event) => {Some function}?

onScroll={Animated.event(
       [{nativeEvent: {contentOffset: {x: this._scrollX}}}],
       {listener: (event) => console.log(event)}, // Optional async listener
     )}

Other thing, is the Animated.Value in this._scrollX receiving the x value of contentOffset? how come?

https://reactnative.dev/docs/animated#event

Answer 1

Gestures, like panning or scrolling, and other events can map directly to animated values using Animated.event() which triggers when you scroll (in your case). The first level is an array to allow mapping across multiple args, and that array contains nested objects.

For example, when working with horizontal scrolling gestures, you would do the following in order to map event.nativeEvent.contentOffset.x to this._scrollX (should be Animated.Value) without having to setState and re-render the component hierarchy. This is done in an optimized way that is faster than calling setState and re-rendering.

Reference: https://reactnative.dev/docs/animations#animated-api