React Native Animated.stagger()

Animated.stagger()

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

const arr = []
for (var i = 0; i < 500; i++) {
  arr.push(i)
}

class animations extends Component {

  constructor () {
    super()
    this.animatedValue = []
    arr.forEach((value) => {
      this.animatedValue[value] = new Animated.Value(0)
    })
  }

  componentDidMount () {
    this.animate()
  }

  animate () {
    const animations = arr.map((item) => {
      return Animated.timing(
        this.animatedValue[item],
        {
          toValue: 1,
          duration: 4000
        }
      )
    })
    Animated.stagger(10, animations).start()
  }

  render () {
    const animations = arr.map((a, i) => {
      return <Animated.View key={i} style={{opacity: this.animatedValue[a], height: 20, width: 20, backgroundColor: 'red', marginLeft: 3, marginTop: 3}} />
    })
    return (
      <View style={styles.container}>
        {animations}
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'wrap'
  }
})

AppRegistry.registerComponent('SampleApp', () => animations);

thanks for this example! gave me a nice idea of Animated.stagger()

Very helpful - thanks!!

@dabit3 Quick question.. I noticed that in this example, you're not using state at all to keep track of the value - it's just assigned to a local prop this.animatedValue. That leads me to believe that the Animated lib simply mutates the value and React is ok with it because it's probably not calling the render() function on each frame..? Am I understanding that correctly? What would be the purpose to storing the value in local state vs just some prop hanging off the class - as in this example?