Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
React Native 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);
@Sam1301

This comment has been minimized.

Copy link

@Sam1301 Sam1301 commented Jun 10, 2017

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

@tbehunin

This comment has been minimized.

Copy link

@tbehunin tbehunin commented Aug 13, 2019

Very helpful - thanks!!

@tbehunin

This comment has been minimized.

Copy link

@tbehunin tbehunin commented Aug 13, 2019

@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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment