title: How to check individual item in FlatList with checkbox in react native?
body: <p>I am creating a react native app and I used this <a href="https://react-native-elements.github.io/react-native-elements/docs/checkbox.html" rel="nofollow noreferrer">react native checkbox </a> to check individual item in a FlatList. But if I check one Item, it checked all the Item in FlatList. I can't use any status in data array like <a href="http://stackoverflow.com/questions/59931276/how-can-we-check-uncheck-individual-checkbox-in-flatlist-based-on-index-or-by-ke">this question answer 1.</a> Are there any way to do this or How to do check individual Item in a FlatList?</p>
  
  <p><a href="https://i.stack.imgur.com/280rI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/280rI.png" alt="Sample Screen 1"></a>
  <a href="https://i.stack.imgur.com/F90Gs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/F90Gs.png" alt="Sample screen 2"></a></p>
  
  <p><strong>This is what I tried,</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import {
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    Image,
    Alert,
    ScrollView,
    FlatList,
  } from 'react-native';
  import {CheckBox} from 'react-native-elements';
  
  export default class Test extends Component {
  
    constructor(props) {
      super(props);
      this.state = {
        calls: [
      {id:1,  name: "Mark Doe",   date:"12 jan", time:'11:14 am', image:"https://bootdey.com/img/Content/avatar/avatar7.png"},
      {id:2,  name: "Clark Man",  date:"12 jul", time:'15:58 am', image:"https://bootdey.com/img/Content/avatar/avatar6.png"} ,
      {id:3,  name: "Jaden Boor", date:"12 aug", time:'12:45 am', image:"https://bootdey.com/img/Content/avatar/avatar5.png"} ,
      {id:4,  name: "Srick Tree", date:"12 feb", time:'08:32 am', image:"https://bootdey.com/img/Content/avatar/avatar4.png"} ,
      {id:5,  name: "John Doe",   date:"12 oct", time:'07:45 am', image:"https://bootdey.com/img/Content/avatar/avatar3.png"} ,
      {id:6,  name: "John Doe",   date:"12 jan", time:'09:54 am', image:"https://bootdey.com/img/Content/avatar/avatar2.png"} ,
      {id:8,  name: "John Doe",   date:"12 jul", time:'11:22 am', image:"https://bootdey.com/img/Content/avatar/avatar1.png"} ,
      {id:9,  name: "John Doe",   date:"12 aug", time:'13:33 am', image:"https://bootdey.com/img/Content/avatar/avatar4.png"} ,
      {id:10, name: "John Doe",   date:"12 oct", time:'11:58 am', image:"https://bootdey.com/img/Content/avatar/avatar7.png"} ,
      {id:11, name: "John Doe",   date:"12 jan", time:'09:28 am', image:"https://bootdey.com/img/Content/avatar/avatar1.png"},
    ],
        checked: true,
      };
    }
  
    renderItem = ({item}) =&gt; {
  
      return (
        &lt;TouchableOpacity&gt;
          &lt;View style={styles.row}&gt;
            &lt;Image source={{ uri: item.image }} style={styles.pic} /&gt;
            &lt;View&gt;
              &lt;View style={styles.nameContainer}&gt;
                &lt;Text style={styles.nameTxt}&gt;{item.name}&lt;/Text&gt;
              &lt;/View&gt;
              &lt;View style={styles.end}&gt;
                &lt;Image style={[styles.icon, {marginLeft:15, marginRight:5, width:14, height:14}]} source={{uri:"https://img.icons8.com/small/14/000000/double-tick.png"}}/&gt;
                &lt;Text style={styles.time}&gt;{item.date} {item.time}&lt;/Text&gt;
              &lt;/View&gt;
            &lt;/View&gt;
            &lt;CheckBox
              // iconRight
              title="SMS"
              checkedIcon="dot-circle-o"
              uncheckedIcon="circle-o"
              checked={this.state.checked}
              onPress={() =&gt; this.setState({checked: !this.state.checked})}
            /&gt;
  
          &lt;/View&gt;
        &lt;/TouchableOpacity&gt;
      );
    }
  
    render() {
      return(
        &lt;View style={{ flex: 1 }} &gt;
            &lt;Text
            style={{
              fontSize: 26,
              color: '#0080ff',
              textAlign: 'center',
              marginBottom: 30,
              marginTop: 10,
            }}&gt;
            Testing check box
          &lt;/Text&gt;
          &lt;FlatList 
            extraData={this.state}
            data={this.state.calls}
            keyExtractor = {(item) =&gt; {
              return item.id;
            }}
            renderItem={this.renderItem}/&gt;
        &lt;/View&gt;
      );
    }
  }
  
  const styles = StyleSheet.create({
    row: {
      flexDirection: 'row',
      alignItems: 'center',
      borderColor: '#dcdcdc',
      backgroundColor: '#fff',
      borderBottomWidth: 1,
      padding: 10,
      justifyContent: 'space-between',
  
    },
    pic: {
      borderRadius: 25,
      width: 50,
      height: 50,
    },
    nameContainer: {
      flexDirection: 'row',
      justifyContent: 'space-between',
      // width: 270,
    },
    nameTxt: {
      marginLeft: 15,
      fontWeight: '600',
      color: '#222',
      fontSize: 15,
  
    },
    mblTxt: {
      fontWeight: '200',
      color: '#777',
      fontSize: 13,
    },
    end: {
      flexDirection: 'row',
      alignItems: 'center',
    },
    time: {
      fontWeight: '400',
      color: '#666',
      fontSize: 12,
  
    },
    icon:{
      height: 28,
      width: 28, 
    }
  });
  </code></pre>