Skip to content

Latest commit

 

History

History
59 lines (45 loc) · 1.26 KB

9-Animations.md

File metadata and controls

59 lines (45 loc) · 1.26 KB

Chapter 9 - Animations

So how do we make animations in React Native?

We use mostly a declarative library called Animated API.

The steps to create a basic animation:

1. We need to create a value to animate first and set it to an initial value:

state = {
  animatedValue: new Animated.Value(0)
}

2. Then we want to animate this value over time:

Animated.timing(
  this.state.animatedValue, // The value to drive
  {
    toValue: 100,     // Animate to final value of 1
    duration: 1000, // over 1 sec.
  }
).start(); // Start the animation

3. And finally use it:

<Animated.View
  style={{
    width: 100,
    height: 100,
    backgroundColor: "steelblue",
    transform: [
      {
        translateX: this.state.animatedValue
      }
    ]
  }}
/>

Which components can be animated?

  • Animated.Image
  • Animated.ScrollView
  • Animated.Text
  • Animated.View

Exercise

If you are stuck, then have a look at the source code.

Resources