CODEWITHSUNDEEP
react-native
Mahdi Bashirpour
Mahdi Bashirpour

Reputation: 18803

Use requestAnimationFrame in React Native

How to use requestAnimationFrame in react native.

I use this for the performance of TouchableOpacity like this

this.requestAnimationFrame(() => {
    if (this.state.scrollEnabled)
        this._panel.transitionTo({toValue: 0});
    else {
        this.setState({scrollEnabled: true}, () => {
            this._panel.transitionTo({toValue: height})
        })
    }
});

And return this error

this.requestAnimationFrame is not a function

Upvotes: 6

Views: 19767

Answers (2)

Behzad kahvand
Behzad kahvand

Reputation: 446

You have to remove this from the first line:

requestAnimationFrame(() => {
      ....
});

Upvotes: 15

Noel De Martin
Noel De Martin

Reputation: 2857

Update Nov 19: The previous documentation mentioned the TimerMixin I am referring to in my answer, but it's now been removed from the documentation. So using the native browser API should be the recommended approach (which is already the accepted answer).

Actually it is recommended not to use timing functions such as requestAnimationFrame directly in react-native. It's recommended to use TimerMixin instead, and doing that you end up calling it like the code in the original question.

So maybe a better answer would be "you're missing the TimerMixin".

Here's the official documentation explaining this bit: https://facebook.github.io/react-native/docs/timers#timermixin

Upvotes: 1

Related Questions