title: React Native: Flatlist Onpress function disables all TouchableHighlight fields instead of just the one which was pressed
body: <p>This is my first question in Stackoverflow and I am not a professional developer, so be kind guys :) If any additional information is needed, just let me know.</p>
  
  <p>So, I am trying to create a flatlist for a delivery man showing his daily itinerary. In this example he has 4 address to go to. When he arrives at the first place, in this case "METAL", he should press the yellow button. Pressing the yellow button should disable it and chage its background color, but just for the first place "METAL".</p>
  
  <p>Right now, when i press the yellow button it disables and changes the background color for all buttons in the flatlist, I am not sure how to target just the one button that was clicked.</p>
  
  <p>I attached some pictures to show whats going on. The last picture is just an example of what I want.</p>
  
  <p><a href="https://imgur.com/a/G1S0ap4" rel="nofollow noreferrer">https://imgur.com/a/G1S0ap4</a></p>
  
  <p>This's what the code first loads</p>
  
  <p><a href="https://i.stack.imgur.com/o0mUS.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/o0mUS.jpg" alt="This&#39;s what the code first loads"></a></p>
  
  <p>This is what happens when i press the yellow button. All buttons have been disabled</p>
  
  <p><a href="https://i.stack.imgur.com/pfRWg.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pfRWg.jpg" alt="This is what happens when i press the yellow button. All buttons have been disabled"></a></p>
  
  <p>This is what i wanted it to do, disable just the button that i actually clicked on</p>
  
  <p><a href="https://i.stack.imgur.com/Hm7eZ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Hm7eZ.jpg" alt="This is what i wanted it to do, disable just the button that i actually clicked on"></a></p>
  
  <pre><code>        this.state = {disablearrived: false,
          disablesuccess: false,
          disablenotdelivered: false,
          showView: true,
          fadeAnim: new Animated.Value(0),
          colorarrived: '#E5C454',
          colorsuccess: '#52D273',
          colornotdelivered: '#E94F64',
          data: [
            { id: "1", custid: "1111111111111", name: "METAL",  nf: "166951" },
            { id: "2", custid: "222222222222", name: "BRUNO", nf: "166952" },
            { id: "3", custid: "8248632473", name: "Doc Hudson" },
            { id: "4", custid: "8577673", name: "Cruz Ramirez" },
  
          ],
        };
  
  
  
      onPressButtonarrived(item) {
        //  Alert.alert('Chegada às: '+new Date().toLocaleTimeString('pt-BR', {timeZone: 'America/Sao_Paulo'}))
          this.setState({ disablearrived: true })
          this.setState({ colorarrived: '#D6D6D6' })
        }
  
      render() {
      return (
        &lt;View style={{ backgroundColor: '#252525'}}&gt;
        &lt;View&gt;
          &lt;Text style={styles.normalblue}&gt;Bem vindo, Victor&lt;/Text&gt;
          &lt;Text style={styles.normalblue}&gt;Estas são suas entregas de dia&lt;/Text&gt;
          &lt;/View&gt;
          &lt;FlatList
            data={this.state.data}
            extraData={this.state}
            keyExtractor={item =&gt; item.id}
            renderItem={({ item }) =&gt; {
              return (
                &lt;View style={{backgroundColor: '#484848', borderBottomColor: '#252525', borderBottomWidth: 20}}&gt;
                  &lt;Text style={styles.bigyellow}&gt;{item.name}&lt;/Text&gt;
                  &lt;Text style={styles.smallblue}&gt;{item.add}, {item.addnumber}&lt;/Text&gt;
          &lt;Text style={styles.normalyellow}&gt;NF {item.nf}&lt;/Text&gt;
          &lt;View style={styles.containercontent}&gt;
          &lt;View style={{backgroundColor: this.state.colorarrived, justifyContent: 'center', flex: 1}}&gt;
          &lt;TouchableHighlight style={styles.buttonview}
          onPress={() =&gt; {this.onPressButtonarrived(item)}} disabled={this.state.disablearrived}&gt;
        &lt;View style={styles.btnIcon}&gt;
        &lt;Icon name="location" size={30} /&gt;
          &lt;Text&gt;Chegada&lt;/Text&gt;
        &lt;/View&gt;
      &lt;/TouchableHighlight&gt;
  &lt;/View&gt;
          &lt;View style={{backgroundColor: this.state.colorsuccess, justifyContent: 'center', flex: 1}}&gt;
          &lt;TouchableHighlight style={styles.buttonview}
          onPress={() =&gt; {this.onPressButtonsuccess(item)}} disabled={this.state.disablesuccess}&gt;
        &lt;View style={styles.btnIcon}&gt;
        &lt;Icon name="check" size={30} /&gt;
          &lt;Text&gt;Entregue&lt;/Text&gt;
        &lt;/View&gt;
      &lt;/TouchableHighlight&gt;
  &lt;/View&gt;
  {this.state.showView &amp;&amp; (
          &lt;View style={{backgroundColor: this.state.colornotdelivered, justifyContent: 'center', flex: 1}}&gt;
          &lt;TouchableHighlight style={styles.buttonview}
          onPress={() =&gt; {this.onPressButtonnotdelivered(item)}} disabled={this.state.disablenotdelivered}&gt;
        &lt;View style={styles.btnIcon}&gt;
        &lt;Icon name="block" size={30} /&gt;
          &lt;Text&gt;Não Entregue&lt;/Text&gt;
        &lt;/View&gt;
      &lt;/TouchableHighlight&gt;
  &lt;/View&gt;
  )}
                &lt;/View&gt;
                &lt;/View&gt;
              );
            }}
          /&gt;
        &lt;/View&gt;
      );
    }
  </code></pre>