Animate Single item on flatlist - react-native

Question

How i can animate a single item from flatlist ?
I tryed adding a value to isolate the selected record but didnt' work,maybe i wrote something wrong. Atm the animation is on ALL records
Flatlist:
<View style={style.container}>
<FlatList
data={this.state.ReturnedArray}
width='100%'
ItemSeparatorComponent={this.FlatListItemSeparator}
renderItem={this.renderizza}>
Render Flalist :
renderizza = (item) => {
var str = JSON.parse(JSON.stringify(item.item.itemType)).name + ' ' + JSON.parse(JSON.stringify(item.item.itemType)).cognome
let acronym = str.split(/\s/).reduce((response, word) => response += word.slice(0, 1), '')
return (
<View style={style.containerFlat}>
<View style={style.containerFlat1}>
<Text style={style.txt}>{JSON.parse(JSON.stringify(item.item.itemType)).name} {JSON.parse(JSON.stringify(item.item.itemType)).cognome}</Text>
</View>
<TouchableOpacity style={style.containerFlat2} onPress={() => this.badge(JSON.parse(JSON.stringify(item.item.itemType)).expoToken)}>
<Animated.View style={[style.animatedView, { opacity: this.state.fadeValue}]}><Text>ADDED</Text></Animated.View>
<Text style={style.AvatarTxt} >{acronym}</Text>
</TouchableOpacity>
</View>
)
}
And here the animation :
badge(chiavi) {
console.log(chiavi)
if ((this.state.SelectedUser).includes(chiavi)) {
this.state.SelectedUser.splice(this.state.SelectedUser.indexOf(chiavi), 1)
Animated.timing(this.state.fadeValue, {
toValue: 0,
duration: 0
}).start();
} else {
this.state.SelectedUser.push(chiavi)
Animated.timing(this.state.fadeValue, {
toValue: 1,
duration: 0
}).start()
}
}
Hot to fix ?
Thank you

Answer 1

One way is to maintain an active item in the state and use extraData prop for this variable in Flatlist.Then conditionally render between the Animated and normal Item.
animate = index => {
this.setState({
activeItem: index,
});
//Rest of animation code.
};
<TouchableOpacity onPress={e => this.animate(index)}>
{this.state.activeItem === index && (
<Animated.View
style={[
styles.button,
{ transform: [{ scale: this.animationMap }] },
]}
>
<Text>{item.title}</Text>
</Animated.View>
)
}
{this.state.activeItem !== index && (
<View style={styles.button}>
<Text>{item.title}</Text>
</View>
)
}
</TouchableOpacity>
Here is an sample Demo