Use requestAnimationFrame in React Native

Question

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

Solution 1

You have to remove this from the first line:

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

Solution 2

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

Comments

[Mahdi Bashirpour]

Thank you I had an interesting mistake :)

[powerup7]

facebook.github.io/react-native/docs/performance - there's nothing on using TimerMixin as the better solution in the performance article. Care to elaborate on why TimerMixin is better?

[Noel De Martin]

@powerup7 Seems like they've updated the docs and it's no longer there, you can see here what they were saying about it before: web.archive.org/web/20190309012525/https://facebook.github.i‌​o/… I'll update my response to reflect this new information.

[powerup7]

Cheers. Thanks for actually replying.