Screen shot of mobile. Currently I press on one radio button and it shows me this result:
Image of expected behavior of radio button:

I have added the radio button with every item that comes from flatlist (API). I want that when I click on one radio button, only that one will be selected, just like I in expected behavior. But when I click on on radio button, all radio button are selected.
My code
const [selectedIndex, setSelectedIndex] = useState(0)
const [radioButtonValue, setRadioButtonValue] = useState('1')
const onPress = (index) => {
setSelectedIndex(index)
};
const onRadiochange = (index, value) => {
setSelectedIndex(index)
setRadioButtonValue(value)
};
const renderItem = ({ item }) => {
const index = item.index;
let items = []
if (item.audit_sub_category) {
items = item.audit_sub_category.map((audit_sub_category) => {
return (
<>
<View style={{
flexDirection: "row",
alignItems: 'center',
maxWidth:200
}}>
<Text >
{audit_sub_category.name}
{"\n"}
{/* {audit_sub_category[0]} */}
</Text>
<RadioButton.Group
onValueChange={(value) =>
onRadiochange(index, value)
}>
<View style={styles.singleRadioButtonContainer}>
<Text>Yes</Text>
<RadioButton
color="#5d86d7"
value="1"
status={
selectedIndex === index &&
radioButtonValue === '1'
? 'checked'
: 'unchecked'
}
onPress={() => { onPress(index) }}
/>
</View>
<View style={styles.singleRadioButtonContainer}>
<Text>No</Text>
<RadioButton
color="#5d86d7"
value="0"
status={
selectedIndex === index &&
radioButtonValue === '0'
? 'checked'
: 'unchecked'
}
onPress={() => {onPress(y)}}
/>
</View>
</RadioButton.Group>
</View >
</>
)
})
}
Other return code
return (
<ScrollView style={GlobalSS.scrollviewcontainer}>
<Text style={styles.textStyle}>
{item.name}
</Text>
<View
style={{
flexDirection: 'row',
justifyContent: 'space-evenly',
marginHorizontal: 20
}}>
<Text style={{ alignSelf: "center", }}>
{items}
</Text>
</View>
</ScrollView>
);
}
Flatlist code
<FlatList
style={styles.container}
data={audit}
renderItem={renderItem}
keyExtractor={(item, index) => index.toString()}
refreshControl={
<RefreshControl
refreshing={refreshing}
onRefresh={fetchAuditData} />
}
ListEmptyComponent={myListEmpty}
/>
