Animation for changing width/height of component

Animation.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Animated,
  Easing,
  View
} from 'react-native';

const MAX_HEIGHT = 120, MIN_HEIGHT = 60
export default class Demo extends Component {
  state = {
    flexAnim1: new Animated.Value(),
    flexAnim2: new Animated.Value(),
    flexAnim3: new Animated.Value(),
    flexAnim4: new Animated.Value(),
  }

  componentDidMount () {
    this.startAnimation()
  }

  startAnimation () {
    const animKeys = Object.keys(this.state)
    const timing = Animated.timing
    animKeys.forEach(anim => this.state[anim].setValue(MAX_HEIGHT))

    Animated.sequence(
      animKeys.map(anim =>
        timing(this.state[anim], {
          toValue: MIN_HEIGHT,
          easing: Easing.linear,
          duration: 700
        })
      )
    ).start(() => {
      this.startAnimation()
    })
  }

  render() {
    const animKeys = Object.keys(this.state)
    return (
      <View style={styles.container}>
        {animKeys.map(anim => 
          <Animated.View key={anim} style={[styles.bar,{height: this.state[anim]}]} />
        )}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#7b7e7f',
  },
  bar: {
    height: MAX_HEIGHT,
    width: 11,
    borderRadius: 7,
    margin: 5,
    backgroundColor: 'white'
  }
});

AppRegistry.registerComponent('Demo', () => Demo);

Introduction

A friend asked me how to achieve the animation like below:
.
Firstly, I don't know that the value of Animated can be set as any numbers. Thanks to the blog, I finished it.

Preview