title: Changing backgroundColor depending on the state value
body: <p>I am learning how to use React components on React Native and I am now starting the Handling Events. I created a handler that turns a text component to <code>ON</code> or <code>OFF</code> whenever the user presses the button. I managed to change the color of the button whenever the boolean value of the <code>state</code> changes but I haven't managed to do it with the <code>backgroundColor</code>of the screen. I tried to create a function <code>{color}</code> to render the color depending on the <code>isToggleOn</code> but my attempt was unsuccessful.</p>
  <p>I think I have to pass a <code>props</code> to it but I don't know how to apply it in this case. Could you give me a hand?</p>
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  import { View, Text, Button } from 'react-native';
  import { render } from 'react-dom';
  
  export default class HomeScreen extends React.Component {
    constructor(props) {
      super(props);
      this.state = { isToggleOn: true };
  
      // This binding is necessary to make `this` work in the callback
      this.handleClick = this.handleClick.bind(this);
    }
  
    handleClick() {
      this.setState((state) =&gt; ({
        isToggleOn: !state.isToggleOn,
      }));
    }
  
    render() {
      //I tried to render the `color` by creating a function
      const { color } = this.state.isToggleOn ? 'red' : 'blue';
  
      return (
        &lt;View
          style={{
            flex: 1,
            alignItems: 'center',
            justifyContent: 'center',
            backgroundColor: color,
          }}&gt;
          &lt;Text&gt;{this.state.isToggleOn ? 'ON' : 'OFF'}&lt;/Text&gt;
          &lt;Button
            color={this.state.isToggleOn ? 'red' : 'blue'}
            title={this.state.isToggleOn ? 'TURN OFF' : 'TURN ON'}
            onPress={this.handleClick}
          /&gt;
        &lt;/View&gt;
      );
    }
  }
  </code></pre>