Odtnhj

I am having an issue with FlatList. I have a flatlist and flatlistitem component. I have also checkbox in flatlistitem. I used Animated for show and hide checkbox in flatlistitem. i want to show and hide all checkboxes When i press a toggle button. But when i click the toggle button only last flatlistitem's checkbox show and hide.

I'll be happy if you can help me. The view:

<Animated.View 
style=
 opacity: this.state.controlOpacity,
 width: this.state.controlWidth>
 <CheckBox 
 checked=this.state.currentValue
 onPress=()=> this.toggleCheckForApprove()
 />
</Animated.View>

when i click the select all toggle button calling:

 selectAll() 
if (!this.state.editMode) 
 Animated.sequence([
 Animated.parallel([
 Animated.timing(this.state.controlOpacity, 
 toValue: 1,
 duration: 300
 ),
 Animated.timing(this.state.controlWidth, 
 toValue: 30,
 duration: 300
 )
 ])
 ]).start();
 else 
 Animated.sequence([
 Animated.parallel([
 Animated.timing(this.state.controlOpacity, 
 toValue: 0,
 duration: 300
 ),
 Animated.timing(this.state.controlWidth, 
 toValue: 0,
 duration: 300
 )
 ])
 ]).start();

this.setState( editMode: !this.state.editMode );
console.log("edit state: " + this.state.editMode)

and this is my flatlist :

<FlatList
 ref="flatList"
 data=this.props.invoices
 extraData=this.state
 renderItem=( item, index ) => 

 return (
 <FlatListItem
 ref=instance => 
 this.child = instance;
 
 item=item
 index=index
 parentFlatList=this
 />
 );
 
 keyExtractor=(item, index) => index.toString()
 />
 <AddModal ref="addModal" parentFlatList=this />
 <InvoiceDetailModal ref="invoiceDetailModal" parentFlatList=this />
 <PdfModal ref="pdfModal" parentFlatList=this />