I am React Native Beginner and am using expo-radio-button.
But i am unable to select a single radio button at a time in flatlist.
if i select single button it will select only one button.
help me to fix this. i need to show and select yes or no in the radio button for each questions
Click here to see output that i want
var myArray = [
{
isSignReq: "1",
sno: "1",
yesno: "0",
},
{
isSignReq: "1",
sno: "2",
yesno: "0",
},
{
isSignReq: "1",
sno: "3",
yesno: "0",
},
];
const [account, setAccount] = useState([]);
const setFormSubmit = (val) => {
console.log(val);
};
<FlatList
data={myArray}
keyExtractor={() => {
return (
new Date().getTime().toString() +
Math.floor(Math.random() * Math.floor(new Date().getTime())).toString()
);
}}
renderItem={(itemData) => {
return (
<View style={{ flexDirection: "row", marginVertical: "2%" }}>
<Text style={styles.data1}>{itemData.item.sno}</Text>
<Text style={styles.data2}>{itemData.item.name}</Text>
<View style={{ width: "30%", marginLeft: "1%" }}>
<RadioButtonGroup
onSelected={(value) => {
setFormSubmit(value), setAccount(value);
}}
selected={account}
size={22}
containerStyle={{ flexDirection: "row" }}
>
<RadioButtonItem label={"Yes"} value={itemData.item.isSignReq} />
<RadioButtonItem label={"No"} value={itemData.item.yesno} />
</RadioButtonGroup>
</View>
</View>
);
}}
/>
renderItem = ({item, index}) => {
.....
<RadioButton
innerColor={Colors.darkBlue}
outerColor={Colors.lightGray}
animation={'bounceIn'}enter code here
isSelected={this.state.selectedIndex === index}
onPress={() => {this.onPress(index)}}
/>
}
and replace onPress with
onPress = (index) => {
this.setState({ selectedIndex: index });
}
and update FlatList with extraData props as FlatList needs to be re-rendered as
<FlatList
keyExtractor={this._keyExtractor}
data={this.state.data}
renderItem={this.renderItem}
ItemSeparatorComponent={this.renderSeparator}
extraData={this.state}
/>