title: react native Flatlist renderItem not update
body: <p>I'm using FlatList and It displays all content properly.</p>
  
  <p>But when I'm updating product quantity, it only increases <strong>total amount</strong> but nothing changes in <strong>renderItem</strong> of FlatList.</p>
  
  <p><a href="https://i.stack.imgur.com/j22DP.png" rel="noreferrer"><img src="https://i.stack.imgur.com/j22DP.png" alt="enter image description here"></a></p>
  
  <p>When I press on plus button, total amount is changed but product quantity is not.</p>
  
  <p>How can I update the product quantity?
  Why the quantity of the <code>FlatList</code> item isn't changed, when the <strong>Total amount</strong> is updated?</p>
  
  <p>My code:-</p>
  
  <pre><code>constructor(props) {
      super(props);
      this.state = {
          data:[
              {id:4, productName:'Product 4', shortDescription:'shortDescription 4', qty:1, price:500 },
              {id:5, productName:'Product 5', shortDescription:'shortDescription 5', qty:1, price:1000},
              {id:6, productName:'Product 6', shortDescription:'shortDescription 6', qty:1, price:1000},
          ],
      };
  }
  
  _addQty = (index) =&gt; {
      var data = this.state.data;
      data[index].qty = data[index].qty + 1;
      this.setState(data:data);
  }
  
  
  _getTotalPrice = () =&gt; {
      var total = 0;
      for (var i = 0; i &lt; this.state.data.length; i++) {
          total += this.state.data[i].qty * this.state.data[i].price;
      };
      return total;
  }
  
  
  _renderItem = ({item, index}) =&gt; {
      var imageCloseWidth = 20;
      var margin = 5;
      var subViewWidth = width-(margin*3);
      return  &lt;View key={index} style={{ marginBottom: margin, marginHorizontal: margin, marginTop: index==0?margin:0}}&gt;
                  &lt;View style={{flexDirection: 'row', flex:1}}&gt;
                      &lt;View style={{justifyContent: 'space-between', width:subViewWidth+imageWidth}}&gt;
                          &lt;View&gt;
                              &lt;TouchableOpacity style={{position: 'absolute', right: 0}}&gt;
                                  &lt;View&gt;&lt;Image style={{height:imageCloseWidth, width:imageCloseWidth, tintColor: '#888888'}} source={MyConstants.imgClose} /&gt;&lt;/View&gt;
                              &lt;/TouchableOpacity&gt;
  
                              &lt;Text style={[styles.txtProductName, {width:subViewWidth}]}&gt;{item.productName}&lt;/Text&gt;
                              &lt;Text style={styles.txtSortDesc}&gt;{item.shortDescription}&lt;/Text&gt;
                          &lt;/View&gt;
                          &lt;View style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginTop:5}}&gt;
                              &lt;View style={{flexDirection: 'row', alignItems: 'center'}}&gt;
                                  &lt;TouchableOpacity&gt;
                                      &lt;View&gt;&lt;Image style={{height:20, width:20, tintColor: item.qty&gt;1 ? "#888888":"#BBBBBB"}} source={MyConstants.imgMinus} /&gt;&lt;/View&gt;
                                  &lt;/TouchableOpacity&gt;
                                  &lt;Text style={{marginHorizontal: 5, fontSize: 18}}&gt;{item.qty}&lt;/Text&gt;
  
                                  &lt;TouchableOpacity
                                      onPress={ ()=&gt; {
                                          this._addQty(index);
                                      }}&gt;
                                      &lt;View&gt;&lt;Image style={{height:20, width:20, tintColor: '#888888'}} source={MyConstants.imgPlush} /&gt;&lt;/View&gt;
                                  &lt;/TouchableOpacity&gt;
  
                              &lt;/View&gt;
                              &lt;Text style={{marginHorizontal: 5, fontSize: 18}}&gt;{item.price}&lt;/Text&gt;
                          &lt;/View&gt;
                      &lt;/View&gt;
                  &lt;/View&gt;
              &lt;/View&gt;
  }
  
  
  render() {
      return (
          &lt;View style={styles.container}&gt;
              &lt;FlatList
                  renderItem={this._renderItem}
                  keyExtractor={ (item,index) =&gt; index.toString() }
                  data={this.state.data} /&gt;
              &lt;View style={{flexDirection:'row', justifyContent: 'space-between'}}&gt;
                  &lt;Text style={{flex:3, fontSize: 18}}&gt;Total amount&lt;/Text&gt;
                  &lt;Text style={{flex:1, fontSize: 18, textAlign:'right'}}&gt;{this._getTotalPrice()}&lt;/Text&gt;
              &lt;/View&gt;
          &lt;/View&gt;
      )
  }
  </code></pre>