title: backgroundColor in touchableHighlight
body: <p>The following code seeks to highlight which button has been pressed. The issue is that, while when one presses "No" and it, as expected, turns Red, the "Yes" button's background color seems to be black and not blue. </p>
  
  <pre><code>this.state = {
       color: {
                  box1: 'blue',
                  box2: 'blue',
              }
          }
      }
  
  onButtonPressed(value) {
  
      // box1 pressed. 
      if( value === true ) {
          // Change box1 to red, and box2 to blue
          this.setState({color:{box1:'red'}})
          this.setState({color:{box2:'blue'}})
  
      } else { // box2 pressed
          // Change box1 to blue, and box2 to blue
          this.setState({ color: { box1: 'blue' } })
          this.setState({ color: { box2: 'red' } })
      }
  
  }
  
  render() {
      return (
          &lt;View style={styles.container}&gt;
  
              &lt;TouchableHighlight
                  style={{ backgroundColor: this.state.color.box1 }}
                  onPress={() =&gt; this.onButtonPressed(true)}&gt;
                      &lt;Text style={styles.boxText}&gt;Yes&lt;/Text&gt;
              &lt;/TouchableHighlight&gt;
  
              &lt;TouchableHighlight
                  style={{ backgroundColor: this.state.color.box2 }}
  
                  onPress={() =&gt; this.onButtonPressed(false) }&gt;
                      &lt;Text style={styles.boxText}&gt;No&lt;/Text&gt;
              &lt;/TouchableHighlight&gt;
  
  
          &lt;/View&gt;
      );
  }
  </code></pre>
  
  <p>}</p>
  
  <p>Here is the styling:</p>
  
  <pre><code>const styles = StyleSheet.create({
      container: {
          alignItems: 'center',
          justifyContent: 'center',
          backgroundColor: 'black',
      },
      boxText: {
          fontSize: 100,
          color: 'black',
      },
  });
  </code></pre>