1

The primary goal is to start an animation without all of them playing at the same time in my flatlist.

I have been working and researching the solution to this problem and I came to figure out that each animation needs to be unique in the flatlist. So I used item.id to work with that. Here is what I got so far:

    anim_star = (id) => {
  // Alert.alert(id);
  let progress = this.state.progress;
  progress[id] = new Animated.Value(0);
  console.log(this.state.progress);
  this.setState({ progress });
  Animated.timing(this.state.progress[id], {
    toValue: 1,
    duration: 2000,
    easing: Easing.linear,
  }).start();
 }

enter image description here

_children: array(0) is indicating that no animation is being played. For proof, I collected my results for when I do a standard animation with all animations are activated when I click anyone. (Which is not what I need.)

enter image description here

Here is what my constructor looks like:

    constructor(props)
{
  super(props);

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

I am not sure if I should keep the empty object in the progress or not, but it seems to work out.

Lastly, here is the rest of my code:

<FlatList

       data={ this.state.dataSource}

       ItemSeparatorComponent = {this.FlatListItemSeparator}


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


       <Card>




         <View>
         <TouchableOpacity
         onPress={this.anim_star.bind(this, item.id)}
          style={{position:'absolute',  height: '100%', width: '100%',}}>
          <Animation
          progress={this.state.progress[item.id]}
          source={require('../Animations/favourite_app_icon.json')}
          style={{ height: '100%', width: '100%', position: 'absolute'}}
          resizeMode={`contain`}

          />
          </TouchableOpacity>



         </View>

       </Card>


       </View>


     }

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

  />

Right here, I am binding the id of which animation that I clicked on. When I click the animation the correct id pops up, but the animation does not play. I may alright figured this out, I just can't seem to get the animation to start again with this code.

Laney Williams
  • 573
  • 3
  • 13
  • 34

0 Answers0