Animated.stagger() Example

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

const {width, height} = Dimensions.get('window');

export default class Stagger extends Component{

    componentWillMount(){
        this.anime1 = new Animated.Value(0);
        this.anime2 = new Animated.Value(0);
        this.anime3 = new Animated.Value(0);
    }

    componentDidMount(){
        Animated.stagger(300, [
            Animated.timing( this.anime1, {
                toValue: height,
                duration: 5000,
            }),
            Animated.timing( this.anime2, {
                toValue: height,
                duration: 5000,
            }),
            Animated.timing( this.anime3, {
                toValue: height,
                duration: 5000,
            }),
        ]).start();
    }

    render(){
        const animeStyle1 = {
            height: this.anime1
        },
        animeStyle2 = {
            height: this.anime2
        },
        animeStyle3 = {
            height: this.anime3
        };
        return(
            <View style={[styles.flexBox, styles.backdrop]}>
                <Animated.View style={[styles.box, animeStyle1]}></Animated.View>
                <Animated.View style={[styles.box, animeStyle2]}></Animated.View>
                <Animated.View style={[styles.box, animeStyle3]}></Animated.View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    flexBox:{
        flex: 1, flexDirection: 'row',
    },
    adjustCenter:{
        justifyContent: 'center',
        alignItems: 'center',
    },
    backdrop:{
        backgroundColor: 'rgba(205, 220, 57, 0.8)',
    },
    box:{
        flex: 1, backgroundColor: 'rgba(38, 50, 56, 0.8)', marginHorizontal: 2, 
    },
});