I have a <TouchableWithoutFeedback>
wrapped around an enclosing view, I want to change the colour of this enclosing view when it is clicked on i.e onPressIn
, but the colour changes for all the views, I mean the mapped views, please how can I make the onPressIn change the style of only that particular view not all of them
const herbs = this.state.record.map(herb => (
<TTouchableWithoutFeedback
onPressIn={() => this.setState({ pressed: !this.state.pressed })}
key={herb.id}
>
<View style={this.state.pressed ? BackStyles.herbBox : BackStyles.herb_box}>
<Image
style={BackStyles.image}
source={{ uri: `${herb.name.replace(/ /g, "")}` }}
/>
<View style={{ flexDirection: "column" }}>
<Text style={BackStyles.header}>{herb.name}</Text>
<Text style={BackStyles.sub}>{herb.bot}</Text>
</View>
</View>
</TTouchableWithoutFeedback>
));
const BackStyles = StyleSheet.create({
herb_box: {
backgroundColor: "#fff",
borderRadius: 7,
marginTop: 10,
marginBottom: 10,
flexDirection: "row",
width: "95%",
alignSelf: "center"
// height: '2%'
// justifyContent: 'center',
},
herbBox: {
backgroundColor: "#28B564",
borderRadius: 7,
marginTop: 10,
marginBottom: 10,
flexDirection: "row",
width: "95%",
alignSelf: "center"
}
});
this.setState
it will re-render allFlatlist
for this purpose