I created a React Native component that consists of 5 icons in a row. The icons are clickable and I want to animate the one that is clicked.
My problem is: When I click an icon, ALL the icons are animated. This is because they are produced in a loop and all given the same properties.
How can I set up my component so that I can somehow only animate the one icon that is pressed?
Here's the component:
import React from 'react';
import { StyleSheet, Animated, View, Text, TouchableHighlight, } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
const AnimatedIcon = Animated.createAnimatedComponent(Icon);
export class IconRow extends React.Component {
constructor(props) {
super(props);
this.state = { iconFontSize: new Animated.Value(50) };
}
onIconPress = (index) => {
Animated.sequence([
Animated.timing(this.state.iconFontSize, { toValue: 40, duration: 100 }),
Animated.timing(this.state.iconFontSize, { toValue: 58, duration: 100 }),
Animated.timing(this.state.iconFontSize, { toValue: 50, duration: 100 }),
]).start();
}
renderIcons() {
var icons = [];
for (var i = 0; i < 5; i++) {
icons.push(
<TouchableHighlight key={i} underlayColor="transparent" onPress={this.onIconPress.bind(this, i)}>
<AnimatedIcon name="heart" style={{fontSize:this.state.iconFontSize, color: "red"}} />
</TouchableHighlight>
);
}
return icons;
}
render() {
return (
<View style={{flexDirection: "row"}}>
{this.renderIcons()}
</View>
);
}
}