All About React Native Animation

Animations are achieved in React Native using the Animation API.

Below are the methods

• Animated.timing() — Maps time range to easing value.
• Animated.decay() — starts with an initial velocity and gradually slows to a stop.
• Animated.spring() — Simple single-spring physics model (Based on Rebound and Origami). Tracks velocity state to create fluid motions as the toValue updates, and can be chained together.

Here we are going to see all the below functions in Animated React Native

• decay()
• parallel()
• timing()

We are jumping directly to the code…
Lets have all the variables for above animations in the constructor of the component.

  constructor(){
    super();
    this.spinValue = new Animated.Value(0)
    this.animatedValue = new Animated.Value(0)
    this.springValue = new Animated.Value(0.3)
    this.decayValue = new Animated.Value(0)

    // for Parallel animation
    this.animatedValue1 = new Animated.Value(0)
    this.animatedValue2 = new Animated.Value(0)
    this.animatedValue3 = new Animated.Value(0)
  }

Animation Functions

Below are the animations functions that you may want to apply to a view.

	 decay(){
		this.decayValue.setValue(0);
		Animated.decay(
		  this.decayValue,
		  {
			velocity: 0.01,
			useNativeDriver: true
		  }
		).start()
	  }

	  spring () {
		this.springValue.setValue(0.3)
		Animated.spring(
		  this.springValue,
		  {
			toValue: 1,
			friction: 1
		  }
		).start()
	  }

	  animate () {
		this.animatedValue.setValue(0)
		Animated.timing(
		  this.animatedValue,
		  {
			toValue: 1,
			duration: 2000,
			easing: Easing.linear
		  }
		).start(() => this.animate())
	  }

	  spin () {
		this.spinValue.setValue(0)
		Animated.timing(
		  this.spinValue,
		  {
			toValue: 1,
			duration: 4000,
			easing: Easing.linear
		  }
		).start(() => this.spin())
	  }

	  animateParellel () {
		this.animatedValue1.setValue(0)
		this.animatedValue2.setValue(0)
		this.animatedValue3.setValue(0)
		const createAnimation = function (value, duration, easing, delay = 0) {
		  return Animated.timing(
			value,
			{
			  toValue: 1,
			  duration,
			  easing,
			  delay
			}
		  )
		}
		Animated.parallel([
		  createAnimation(this.animatedValue1, 2000, Easing.ease),
		  createAnimation(this.animatedValue2, 1000, Easing.ease, 1000),
		  createAnimation(this.animatedValue3, 1000, Easing.ease, 2000)
		]).start()
	  }

Call the functions in the componentDidMount

  componentDidMount () {
    this.spin()
    this.animateParellel()
    this.decay();
    this.animate()
  }

Its that simple.
Please leave your valuable comments below.