Access one data from every list in react native listitem - react-native

Question

I want to select one item from each ListItem. But the problem is that I can only choose one item at a time. I have used multiselect, but the problem is there is that multiple items could be selected from each section item.
**
I want to access one data from every list in react native listitem.I
want to select one item from each ListItem. But the problem is that I
can only choose one item at a time. I have used multiselect, but the
problem is there is that multiple items could be selected from each
section item.I have used flatlist then in renderitem I have used
listItem.
**
ProductAttributes:Object {
"Id": 9,
"Name": "Size",
"Values": Array [
Object {
"ColorSquaresRgb": null,
"CustomProperties": Object {},
"FullSizePictureUrl": null,
"Id": 21,
"IsPreSelected": false,
"Name": "8",
"PictureId": 0,
"PictureUrl": null,
"PriceAdjustment": null,
"PriceAdjustmentValue": 0,
},
Object {
"ColorSquaresRgb": null,
"CustomProperties": Object {},
"FullSizePictureUrl": null,
"Id": 22,
"IsPreSelected": false,
"Name": "9",
"PictureId": 0,
"PictureUrl": null,
"PriceAdjustment": null,
"PriceAdjustmentValue": 0,
},
],
}
ProductAttributes: Object {
"Id": 10,
"Name": "Color",
"Values": Array [
Object {
"ColorSquaresRgb": "#663030",
"CustomProperties": Object {},
"FullSizePictureUrl": "img1",
"Id": 25,
"IsPreSelected": true,
"Name": "Red",
"PictureId": 53,
"PictureUrl": "img2",
"PriceAdjustment": null,
"PriceAdjustmentValue": 0,
},
Object {
"ColorSquaresRgb": "#363656",
"CustomProperties": Object {},
"FullSizePictureUrl": "img3",
"Id": 26,
"IsPreSelected": false,
"Name": "Blue",
"PictureId": 54,
"PictureUrl": "img4",
"PriceAdjustment": null,
"PriceAdjustmentValue": 0,
},
],
}
And the UI is
<FlatList
data={this.state.product_attributes2}
ListHeaderComponent={null}
renderItem={({ item, index }) => {
console.log("ProductAttributes: ", item);
return (
<>
<ListItem.Accordion
style={{ height: 50 }}
content={
<>
<Iconsss
name="filter-menu"
size={20}
style={{ marginRight: 10 }}
/>
<ListItem.Content>
<ListItem.Title>{item.Name}</ListItem.Title>
</ListItem.Content>
</>
}
isExpanded={this.state.expanded}
onPress={() => {
this.setState({ expanded: !this.state.expanded });
}}
>
<View
style={{
borderTopWidth: 1,
borderColor: "rgba(38, 38, 38,0.8)",
}}
>
{item?.Values?.map((l, i) => {
return (
<ListItem
key={i}
onPress={() => {
console.log(l.IsPreSelected);
this.setState({
select_choice: true,
choice_name: l.Name,
// IsPreSelected:l.IsPreSelected,
});
}}
bottomDivider
Checkbox
>
<ListItem.CheckBox
// checked={this.state.IsPreSelected}
checked={l.IsPreSelected === true ? true : false}
onPress={() =>
this.setState({ IsPreSelected: !l.IsPreSelected })
}
/>
<ListItem.Content>
<ListItem.Title
style={{ color: "rgba(38, 38, 38,1)" }}
>
{l.Name}
</ListItem.Title>
</ListItem.Content>
{l?.ColorSquaresRgb === null ? null : (
<View
style={{
backgroundColor: l?.ColorSquaresRgb,
height: 20,
// width:20,
borderRadius: 20,
flex: 0.3,
justifyContent: "center",
// alignItems:"center",
}}
/>
)}
{l?.PictureUrl === null ? null : (
<Image
source={{ uri: l.PictureUrl }}
style={{
flex: 0.7,
resizeMode: "contain",
height: 50,
}}
/>
)}
</ListItem>
);
})}
</View>
</ListItem.Accordion>
</>
);
}}
keyExtractor={(item, index) => {
return index.toString();
}}
ListFooterComponent={null}
/>