title: React Native Dynamically Change View’s Background Color
body: <p>I’m trying to make an app where the background color changes every time you tap the screen. I have the tap event working, but the I don’t know how to change the background color.</p>
  
  <p>Here is my code right now:</p>
  
  <pre><code>import React, {Component} from 'react';
  import {
      AppRegistry,
      StyleSheet,
      Text,
      View,
      TouchableHighlight
  } from 'react-native';
  
  let randomHex = () =&gt; {
      let letters = '0123456789ABCDEF';
      let color = '#';
      for (let i = 0; i &lt; 6; i++ ) {
          color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
  }
  
  export default class randomBackground extends Component {
      constructor(props) {
          super(props)
  
          this.onClick = this.onClick.bind(this)
      }
      onClick() {
          console.log('clicked ')
      }
      render() {
          return (
              &lt;TouchableHighlight onPress={ this.onClick } style={styles.container}&gt;
                  &lt;View&gt;
                      &lt;Text style={styles.instructions}&gt;
                          Tap to change the background
                      &lt;/Text&gt;
                  &lt;/View&gt;
              &lt;/TouchableHighlight&gt;
          );
      }
  }
  const styles = StyleSheet.create({
      container: {
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center',
          backgroundColor: randomHex()
      },
      instructions: {
          color: "white"
      }
  });
  AppRegistry.registerComponent('randomBackground', () =&gt; randomBackground);
  </code></pre>
  
  <p>I’d like to have the background regenerate every time the screen is tapped.</p>