How would I create gender selected button when using react native? - react-native

Question

I am creating an app and face the problem I want to create two button when one is active other is inactive

Answer 1

You can use ButtonGroup of react-native-elements for this use case.

Answer 2

This is a basic example according to your requirement.
import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import RadioGroup from 'react-native-radio-buttons-group';
export default class App extends Component {
state = {
gender: [
{
label: 'Male',
color: 'green',
},
{
label: 'Female',
color: 'green',
}
],
};
onPress = gender => this.setState({ gender });
render() {
let selectedGender = this.state.gender.find(e => e.selected == true);
selectedGender = selectedGender ? selectedGender.value : this.state.gender[0].label;
return (
<View style={styles.container}>
<Text style={styles.header}>
Selected Gender - {selectedGender}
</Text>
<RadioGroup radioButtons={this.state.gender} onPress={this.onPress} />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
header: {
fontSize: 18,
marginBottom: 50,
},
});

Answer 3

You can use switch or else you can use change color of button to show active and inactive.
example of using state variable
import React, { Component } from 'react';
import { View, Button } from 'react-native';
class Test extends Component {
state = {
gender: 'male',
maleButtonColor: '#841584',
femaleButtonColor: '#C0C0C0'
}
onSubmitEmailRP() {
this.password.focus();
}
render() {
return (
<View>
<Button
onPress={() => {
this.setState({
gender: 'male',
maleButtonColor: '#841584',
femaleButtonColor: '#C0C0C0'
})
}}
title="Male"
color="#841584"
/>
<Button
onPress={() => {
this.setState({
gender: 'female',
maleButtonColor: '#C0C0C0',
femaleButtonColor: '#841584'
})
}}
title="Female"
color="#841584"
/>
</View>);
}
}
export default Test;