We'll start by focusing on animating properties, how to animate them, and how they effect layout. There are different techniques to use when animating layout properties, color properties, and various other aspects. The most basic animation method that Animated provides is the Animated.timing method. This will allow you to define an animation for a set duration. You will animate from one value to another.

Because Animated.timing is the most basic we'll focus on how to use it then dive into using it animate properties.

Each Animated method generally follows the signature Animated.timing(ANIMATED_VALUE, CONFIGURATION). The ANIMATED_VALUE is an instance of Animated.Value. This is an instance that can be passed around, and is typically passed into an Animated.View.

When using an Animated.View it will attach listeners onto the Animated.Value you provide it. Once you trigger start an animation on the Animated.Value it will be notified and know when and what to update. This is as deep as we will dive into it now, but we'll get into the core of Animated later.

new Animated.Value(0)

constructor(props) {
  super(props);

  this._animation = new Animated.Value(0)
}

constructor(props) {
  super(props);

  this.state = {
    snowflakes: [
      new Animated.Value(0),
      new Animated.Value(0),
      new Animated.Value(0)
    ]
  }
}

componentWillMount() {
  this._animation = new Animated.Value(0)
}

This is what declaring an animated value looks like. This may be on state or it may just be declared on the component instance in a constructor or componentWillMount. Typically it doesn't matter where it lives, however if you are using setState and adding additional elements that are driven by animations it is best to add the animations onto state.

An example is if you had an array of snow flakes that were animated. You might be deriving snow flakes to render based upon animations in an array. If you wanted to add more snow flakes you would need to do a setState to trigger a re-render.