title: React Native: Rerender FlatList when toggle button is pressed on a row item
body: <p>I just can't seem to wrap my head around how I'm supposed to accomplish this despite reading the documentation and pages of similar questions.</p>
  
  <p>I have a list of items where each item can be individually displayed either using its name in text for compact viewing, or an image for full viewing. I have a native base icon setup to toggle the display choice. I know it works because it will update my view if I click it and navigate away and back again.</p>
  
  <p>Array of objects with a prop for view toggle, and a prop for the data</p>
  
  <pre><code>data[{imgView: false, data:data}, {...}]
  </code></pre>
  
  <p>The data is static with the only change being filters for what is shown.
  I've tried using the extraData prop but it I can't get it to work properly. If I use it with a state property it errors because where I need to perform the setState is in the render function which is obviously not going to work. I tried making a global variable to reference but it doesn't do anything. I don't know how to reference the prop in my row item to use that.</p>
  
  <p>I tried using componentWillReceiveProps but I don't know how I can reference the props in my data objects and it didn't seem to work with just a setState call without a check in place for testing.</p>
  
  <p>What I'm trying to do is:<br>
  press button in row item -> toggles view property for that row item only<br>
  toggled row item property -> triggers rerender of the list</p>
  
  <p>Edit: Adding some code pieces</p>
  
  <pre><code>constructor(props) {
    super(props);
    this.state = {
      data: result,
      update: false
    };
  };
  
  _renderItem = ({item}) =&gt; {
    return (
      &lt;Image source={item.imgView ? 
        images[item.data.imgFull] : 
        images[item.data.name]} 
        style={{flex:1}}
      /&gt;
      &lt;Icon name="arrow-dropdown" 
        style={{color:'black'}}
        onPress ={() =&gt; {item.imgView = !item.imgView}}
      /&gt;
    );
  );
  
  render() {
    return (
      &lt;FlatList
        data={this.state.data}
        extraData={this.state.update}
        keyExtractor={(item, index) =&gt; index} //to remove warning for now
        renderItem={this._renderItem}
      /&gt;
    );
  };
  </code></pre>
  
  <p>I don't know if I'm going about this properly, but when the onPress in the icon component of the _renderItem function is called I'd like to toggle the state.update so the extraData forces a rerender.</p>