ReactNative checkbox inside flatlist - react-native

Question

I have checkboxes inside Flatlist like this
constructor(props) {
super(props);
this.state = {
checked: false
}
}
breakfastData = ({item}) => {
return(
<ListItem style={{flex:1 , flexDirection: 'row' , justifyContent:'space-between'}} >
<Text>{item}</Text>
<CheckBox
checked={this.state.checked}
onPress={() => this.setState({checked: !this.state.checked})} style={{ alignSelf: 'flex-end'}} color="#FC7B04" />
</ListItem>
)
}
render(){
return(
<View>
<FlatList
data={this.state.breakfast}
renderItem={ this.breakfastData }
keyExtractor={(item, index) => index}
/>
</View>
)
}
here is a screenshot from the app but the checkboxes don't work when i click any of the check boxes
i just want the user feel that the check box is checked

Answer 1

You must set checked for each item.
constructor(props) {
super(props);
this.state = {
breakfast:[
{id:1,checked:false},
{id:2,checked:false}
]
}
}
onItemPress = (item, index) => {
var tempItem = item
tempItem.checked = !item.checked
const tempArr = [...this.state.breakfast]
tempArr[index] = tempItem
this.setState({
breakfast: tempArr
})
}
breakfastData = ({item}) => {
return(
<ListItem style={{flex:1 , flexDirection: 'row' , justifyContent:'space-between'}} >
<Text>{item}</Text>
<TouchableOpacity onPress={() => {this.onItemPress(item,index)}}>
<CheckBox checked={item.checked} style={{ alignSelf: 'flex-end'}} color="#FC7B04" />
</TouchableOpacity>
</ListItem>
)
}
render(){
return(
<View>
<FlatList
data={this.state.breakfast}
renderItem={ this.breakfastData }
extraData ={ this.state}
keyExtractor={(item, index) => index}
/>
</View>
)
}