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

Answer 1

You have to remove this from the first line:

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

Answer 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