Mastering React Native

Understanding Animated

LayoutAnimation is great for transitioning views between states using simple animation logic. However, LayoutAnimation is limited in that it doesn't allow you to sequence more complex animations or potentially tie an animation to a user gesture. This is where the Animated API fills the gap. Internally, the Animated API leverages requestAnimationFrame to synchronize animations to 60 frames per second. It then updates the state via setNativeProps as a means of avoiding React's diffing algorithm, thus keeping the animations performant and smooth.

In order to use the Animated API, you need two things. First, you'll need an Animated.* component--Animated.Image, Animated.View, or Animated.Text. These special Animated.* components ...