Highlight only one button at once (react native) - react-native

Question

I currently have three TouchableHighlight buttons and I'd like to keep only one of them highlighted at once and their state stored.
state:
state = {
selected: null,
};
handleClick function
_handleClick(flag) {
if (flag == 1) {
this.setState({selected: true});
}
}
One of the three touchable highlights
<TouchableHighlight
style={styles.container}
onPress={() => this._handleClick('any flag')}
underlayColor="red">
<View>
<Text>
Test
</Text>
</View>
</TouchableHighlight>
So far this only highlights the current button I'm trying to tap for about a second and the underlay colour goes.
Could anyone help me with this?
Thanks

Answer 1

You can try using this:
state:
state = {
selected: null,
SelectedButton: ''
};
handleClick function:
_handleClick(flag, button) {
if (flag == 1) {
this.setState({selected: true});
}
this.setState({SelectedButton: button})
}
Touchable:
<TouchableHighlight
style={styles.container}
onPress={() => this._handleClick('any flag', '1')}
underlayColor="red">
<View style={{backgroundColor: (this.state.SelectedButton === '1' ? 'red' : 'green')}}>
<Text>
Test
</Text>
</View>
</TouchableHighlight>
What it means:
When you press the touchable, the function "handleClick" will not only save the state of the button, but will save the last pressed button too.
And then on the style of the view inside the touchable, here's the magic:
<View`style={{backgroundColor: (this.state.SelectedButton === '1' ? 'red' : 'green')}}>
It means: "If the last selected button it's equals to the atual ID of the button, the color of the view, will be red, otherwise, the color will be green"
You can make this to the others touchables, wich one with your "ID" (1, 2, 3, and so on)
UPDATE:
If each button has a unique value, you can try using:
state:
state = {
selected: null,
value: ''
};
handleClick function:
_handleClick(flag, button) {
if (flag == 1) {
this.setState({selected: true});
}
this.setState({value: 'flag'})
}
Touchable:
<TouchableHighlight
style={[styles.container, { backgroundColor: (this.state.value === 'any flag' ? 'red' : 'green')}]}
onPress={() => this._handleClick('any flag')}
underlayColor="red">
<View>
<Text>
Test
</Text>
</View>
</TouchableHighlight>