Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React native bind animated event

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});
    }
}
like image 267
Malte Schulze-Boeing Avatar asked Mar 10 '17 10:03

Malte Schulze-Boeing


People also ask

How do I stop animated loops in React Native?

stopAnimation(({ value }) => console. log("Final Value: " + value) ), 250 ); In this example, after 250 milliseconds, we'll stop the 500 millisecond animation.

How do you smooth animation in React Native?

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.

What is interpolate React Native?

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.


2 Answers

Finally got it work:

Bound the function to the Animated.event listener:

onScroll={Animated.event(
                    [{ nativeEvent: { contentOffset: { y: this.state.animTop } } }],
                    { listener: this._handleScroll },
                )}
like image 124
Malte Schulze-Boeing Avatar answered Sep 20 '22 07:09

Malte Schulze-Boeing


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
}
like image 23
Scherdin Avatar answered Sep 22 '22 07:09

Scherdin