Here is a component I am working with:
class LanguageScreen extends Component {
_onPressButton() {
}
render() {
var enButton = <RoundButton
buttonStyle={'black-bordered'}
text={'EN'}
locale={'en'}
selected={true}
style={styles.roundButtonStyle}
onPress={this._onPressButton}
/>
var arButton = <RoundButton
buttonStyle={'golden-gradient'}
text={'ع'}
locale={'ar'}
selected={false}
style={styles.roundButtonStyle}
onPress={this._onPressButton}
/>
return(
<View style={styles.rootViewStyle}>
<View style={styles.buttonContainerRootViewStyle}>
<View style={styles.buttonContainerViewStyle}>
{enButton}
{arButton}
</View>
</View>
<View style={styles.submitButtonContainerViewStyle}>
<Button style={styles.submitButtonStyle}/>
</View>
</View>
);
}
}
I want the styling of one button to change when the user clicks on another, like in this screenshot here: https://i.sstatic.net/Akeko.png
In other words, I want only one button to be highlighted at a time. If the user clicks on EN, I want it to stay highlighted and remove highlight from the other button.
This is the RoundButton component class I'm using:
class RoundButton extends Component {
constructor(props) {
super(props);
this.state = { isSelected: true === props.selected };
}
onClickListen = () => {
this.setState({
isSelected: !this.state.isSelected
});
this.forceUpdate();
}
render() {
if (this.state.isSelected) {
return this.goldenGradient(this.props);
} else {
return this.blackBordered(this.props)
}
}
goldenGradient(props) {
return(
<TouchableOpacity
style={styles.buttonStyle}
onPress={this.props.onPress}
onPressOut={this.onClickListen}
>
<LinearGradient
colors={['#E9E2B0', '#977743']}
start={{x: 1.0, y: 0.0}}
end={{x: 0.0, y: 1.0}}
style={styles.linearGradient}
>
<Text style={this.props.locale == 'ar' ? styles.goldenGradientTextStyleAr : styles.goldenGradientTextStyle}>
{props.text}
</Text>
</LinearGradient>
</TouchableOpacity>
);
}
blackBordered(props) {
return(
<TouchableOpacity
style={
styles.buttonStyle,
styles.blackBorderedStyle
}
onPress={this.props.onPress}
onPressOut={this.onClickListen}
>
<Text style={this.props.locale == 'ar' ? styles.blackBorderedTextStyleAr : styles.blackBorderedTextStyle}>
{props.text}
</Text>
</TouchableOpacity>
);
}
}
I have been trying to make it so that clicking on one button will also trigger a click event for the other button, but I haven't found a solution that works yet. Any suggestions on how I can achieve this?