0 Replies - 986 Views - Last Post: 16 May 2018 - 06:29 PM

#1 MrIngram   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 16-May 18

React Native - How would I go about playing an animation uniquely?

Posted 16 May 2018 - 06:29 PM

Hello, I have been working ways to figure this problem out. The way I have my code set up is that I have animations in a flatlist and it has created a single animation for how ever many data I have. For example, my JSON data contains 8 categories, my flatlist automatically contains 8 animations. Here is my code:


       data={ this.state.dataSource}

       ItemSeparatorComponent = {this.FlatListItemSeparator}

       renderItem={({item}) => <View>


         onPress={this.anim_star.bind(this, item.id)}
          style={{position:'absolute',  height: '100%', width: '100%',}}>
          style={{ height: '100%', width: '100%', position: 'absolute'}}






     keyExtractor={(item, index) => index.toString()}


Right here, I have trying to give those animations a unique id (item.id).
Here is the function I used for binding:

anim_star = (id) => {

  let progress = this.state.progress;
  progress[id] = new Animated.Value(0);

    this.setState({ progress });
  Animated.timing(this.state.progress, {
    toValue: 1,
    duration: 2000,
    easing: Easing.linear,


I did a console.log to see my results and I can see the correct id being displayed, but I don't think it's corresponding correctly. The animation does not play at all. When I take off the [item.id] in the progress=this.state.progress, the animation works, but every animation in that flatlist plays.

Here is my console results:

And lastly here are what the constructors look like:


  this.state = {
  isLoading: true,
  id: '',
  dataSource: '',
  progress: {}, 

Also to note, when all animations did play I console logged those results and noticed that the _children array have [AnimatedProps] and I think that is what triggers the animation.


The array(8) represents all the data that have animations triggered. The reason why the 10 is still there is because I didn't remove:
let progress = this.state.progress;
  progress[id] = new Animated.Value(0);

I tried searching for some answers similar to my problem, but I could not find a single solution. Is there a way to play animations uniquely?

Is This A Good Question/Topic? 0
  • +

Page 1 of 1