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();
}
_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.)
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.