Need a little help with some JS. Is it possible to bind an animated event as needed below?
I need to do this:
onScroll={
Animated.event([
{
nativeEvent: {
contentOffset: {y: this.state.animTop}
}
}
])
}
I also need to do this
onScroll={(e) => {
let positionY = e.nativeEvent.contentOffset.y;
this._handleScroll(positionY);
this.setState({y: positionY})
}}
I have tried binding both like this, but it not take doing the Animated.event
componentDidMount() {
this._handleScroll = this._handleScroll.bind(this);
}
onScroll={
this._handleScroll
}
_handleScroll(e) {
Animated.event([
{
nativeEvent: {
contentOffset: {y: this.state.animTop}
}
}
]);
if(e > 30) {
this.setState({statusBarHidden: true});
} else {
this.setState({statusBarHidden: false});
}
}
stopAnimation(({ value }) => console. log("Final Value: " + value) ), 250 ); In this example, after 250 milliseconds, we'll stop the 500 millisecond animation.
Enabling usage of native driver is the easiest way of improving your animations performance quickly. However, the subset of style props that can be used together with native driver is limited. You can use it with non-layout properties like transforms and opacity. It will not work with colors, height, and others.
Interpolation is a way of estimating a function at intermediate points, learning from the ranges you provide. In React Native, you can interpolate animated values using . interpolate which takes an inputRange, that interpolates and maps the values to an outputRange.
Finally got it work:
Bound the function to the Animated.event listener:
onScroll={Animated.event(
[{ nativeEvent: { contentOffset: { y: this.state.animTop } } }],
{ listener: this._handleScroll },
)}
You could also use setValue()
.
So that would work like this:
_handleScroll(event) {
// Do stuff
this.state.animTop.setValue(event.nativeEvent.contentOffset.y);
// Do other stuff
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With