React Native Flatlist dynamic style - react-native

Question

I'm trying to make buttons out of react native FlatList items, that means when I click on them they change color.
This is the function that gets rendered by the renderItem prop:
renderRows(item, index) {
return (
<TouchableOpacity
key={index}
style={[styles.item, this.calculatedSize()]}
onPress={() => this.onPressImage(index)}
>
<Image
style={[styles.picture]}
source={{ uri: item.uri }}
/>
<View
style={[
styles.imageTextContainer,
{
backgroundColor:
_.indexOf(this.active, index) === -1
? 'rgba(0,0,0,0.2)'
: 'rgba(26, 211, 132, 0.7)',
},
]}
>
<Text style={styles.imageText}>{item.title}</Text>
</View>
</TouchableOpacity>
)
}
oh yeah and im using loadash to get the index.
The function "onPressImage(index)" works fine, in "this.active" (array) I always have the positions(integer) of the elements I would like to change color,
however nothing happens, the only thing you can see is the response by the touchableOpacity. What am I doing wrong ?

Answer 1

Like Andrew said, you need to trigger a re-render, usually by updating state.
However, if the items don't depend on anything outside the FlatList, I would recommend creating a component (preferably a PureComponent if possible) for the items themselves, and updating their state upon press. This way it will only re-render each list item individually if there is a change instead of the parent component.

Answer 2

Thanks, updating the state was a little bit difficult, the items array I've used has been declared outside the class component, thus only using an "active" array with indices that should change color in the state wasn't enough, I had to map the items array in the state like so:
state = {
items: items.map(e => ({
...e,
active: false,
}))
}
then I could manipulate the active state of the element I wanted to change color like this:
onPressItem(index) {
const { items } = this.state
const newItems = [...this.state.items]
if (items[index].active) {
newItems[index].active = false
} else {
newItems[index].active = true
}
this.setState({ items: newItems })
}
and change the color like so:
style={{
backgroundColor: item.active
? 'rgba(26, 211, 132, 0.7)'
: 'rgba(0,0,0,0.2)',
}}