How to get selected item in RadioGroup in React native? - react-native

Question

How can i get selected value from RadioGroup.
state = {
gender: '',
data: [
{
label: 'male',
value: "Male",
},
{
label: 'female',
value: "Female",
}
],
}
render() {
return (
<View style={styles.radioGroupContainer}>
<Text style={styles.textLableStyle}>Select Gender</Text>
<RadioGroup style={alignItems = 'flex-start'}
radioButtons={this.state.data}
onPress={
this.onPress
} />
</View>
)
}
Note: On selection of radio button i want value in gender variable.

Answer 1

Install the package by entering the below command in your project root directory.
npm i react-native-radio-buttons-group --save
Basic Usage
import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import RadioGroup from 'react-native-radio-buttons-group';
export default class Vertical extends Component {
state = {
data: [
{
label: 'Default value is same as label',
},
{
label: 'Value is different',
value: "I'm not same as label",
},
{
label: 'Color',
color: 'green',
},
{
disabled: true,
label: 'Disabled',
},
{
label: 'Size',
size: 32,
},
],
};
// update state
onPress = data => this.setState({ data });
render() {
let selectedButton = this.state.data.find(e => e.selected == true);
selectedButton = selectedButton ? selectedButton.value : this.state.data[0].label;
return (
<View style={styles.container}>
<Text style={{ fontSize: 18, marginBottom: 50 }}>
Value = {selectedButton}
</Text>
<RadioGroup radioButtons={this.state.data} onPress={this.onPress} />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
});
Output

Answer 2

make the RadioGroup like that , only giving the RadioGroup tag . by putting that code you will get the value in gender state.
<RadioGroup style={alignItems = 'flex-start'}
radioButtons={this.state.data}
onPress={data => this.setState({gender: data })} />