What the React Native docs forgot to tell you about animations

  • The last animation function is Animated.decay() and has some specific use cases.
  • Based on that and a deceleration value, it calculates what the end value is and how long the animation should take.
  • this.animatedValue = new = new Animated.ValueXY({x: 15, y: 0, y: 0});getTranslateTransformThis method with transform your {x: 10, y: 200} value to a directly usable transform.
  • this.animatedValue = new Animated.ValueXY({x: 10, y: 200});Animated.Value style={{ – transform: /// is short for Animated.View style={{ – transform: [ – {translateX: this.animatedValue.x}, – {translateY: this.animatedValue.y} – ] – }} /stopAnimationStops any running animation.
  • It has a callback with the final value after the animation has = { – console.log(‘finalValue: ‘+ finalValue) – })resetAnimationStops any running animation and sets the value back to its original value.

React Native is great. It’s pretty awesome to be able to build a native app with only JavaScript knowledge. One of the things I like most is making the animations, it can add so much to the…

React Native is great. It’s pretty awesome to be able to build a native app with only JavaScript knowledge. One of the things I like most is making the animations, it can add so much to the experience of an app. Unfortunately React Native’s documentation about animations is not so great. Some things are explained rather vaguely and other things are plain missing. That’s why I wanted to give you a quick overview of the things I think need a bit of extra explanation. There’s still more out there, but these are the things you’ll probably need most.

One last thing to note before I begin, I write this as an addition to the React Native documentation. You should check that first if you haven’t already. Here I’ll try not to repeat too much from the original docs.

The Animated library has 3 functions to animate things on screen, Animated.timing, Animated.spring and Animated.decay. How to use them is pretty clear from the documentation, but when to use which function can be confusing.

Animated.timing gives you the most control. You define the duration and you set the easing. Especially if you’ve got a specific easing from the motion design, this could be your easiest option. However if you don’t have a predefined easing, it can be hard to give the animation the right feel. Then Animated.spring is your better option. This function provides a spring physics model, it’s based on movements form the real world.

What the React Native docs forgot to tell you about animations