In the official react-native document, there is a section about the Animated.event method. For example, they use the following code:
onScroll={Animated.event(
// scrollX = e.nativeEvent.contentOffset.x
[{ nativeEvent: {
contentOffset: {
x: scrollX
}
}
}]
)}
I want to map the correct value to the Animated.event method, and I also want to map the onScroll callback parameter to my My own callback. Basically I want to do something like this:
onScroll={(event) => {
myOwnCallback(event.nativeEvent.contentOffset.x)
Animated.event(
// scrollX = e.nativeEvent.contentOffset.x
[{nativeEvent: {
contentOffset: {
x: scrollX
}
}
}]
)
}}
Can you explain how to do this?
When you view the source code:
/**
* Takes an array of mappings and extracts values from each arg accordingly,
* then calls `setValue` on the mapped outputs. eg
*
*```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 work:
onScroll={Animated.event(
[{ nati veEvent: {contentOffset: {y: this.state.scrollY}} }],
{
useNativeDriver: true,
listener: event => {
const offsetY = event. nativeEvent.contentOffset.y
// do something special
},
},
))
In the official In the react-native documentation, there is a section about the Animated.event method. For example, they use the following code:
onScroll={Animated.event(
// scrollX = e.nativeEvent.contentOffset.x
[{ nativeEvent: {
contentOffset: {
x: scrollX
}
}
}]
)}
I want to map the correct value to the Animated.event method, and I also want to map the onScroll callback parameter to my own callback. Basically I want to do something like this:< /p>
onScroll={(event) => {
myOwnCallback(event.nativeEvent.contentOffset.x)
Animated.event(
// scrollX = e.nativeEvent.contentOffset.x
[{nativeEvent: {
contentOffset: {
x: scrollX
}
}
}]
)
}}
Can you explain how to do this?
When you view the source code:
/**
* Takes an array of mappings and extracts values from each arg accordingly,
* then calls `setValue` on the mapped outputs. eg
*
*```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 work:< /p>
onScroll={Animated.event(
[{ nativeEvent: {contentOffset: {y: this.state.scrollY}} }] ,
{
useNativeDriver: true,
listener: event => {
const offsetY = event.nativeEvent.contentOffset.y
// do something special
},
},
)}