title: React Native Execute a Function on State Change
body: <p>I am wanting to fire a function when state changes in my app. I have a modal with a button that changes state.</p>
  
  <p>My home component (edited)</p>
  
  <pre><code>...
  constructor(props) {
  super(props);
    this.state = {
      color:'red',
      modalVisible: false,
    }
  }
  ...
  render() {
   return (
    &lt;View&gt;
  
        &lt;Modal
           animationType={"slide"}
           transparent={false}
           visible={this.state.modalVisible}
        &gt;
         &lt;View style={{marginTop: 22}}&gt;
          &lt;TouchableOpacity onPress={()=&gt;this.setState({color:'blue'})}&gt;
            &lt;Text&gt;Blue&lt;/Text&gt;
          &lt;TouchableOpacity&gt;
           &lt;TouchableOpacity onPress={()=&gt;this.setModalVisible(false)}&gt;
            &lt;Text&gt;Blue&lt;/Text&gt;
          &lt;TouchableOpacity&gt;
         &lt;/View&gt;
      &lt;/Modal&gt;
  
     &lt;Text style={{color:this.state.color}}&gt;
       Foo
     &lt;/Text&gt;
    &lt;/View&gt;
   )
   ...
  </code></pre>
  
  <p>However when I close the modal, the color of my text is not changed to blue. It stays red until I open the modal back up, and then close again. Its like the state of 'color' is not being updated. I have ran into this before using redux and 'componentWillReceiveProps(nextProps)' but this has stumped me being in the same component.</p>
  
  <p>I am using the native modal component from the docs. <a href="https://facebook.github.io/react-native/docs/modal.html" rel="nofollow noreferrer">https://facebook.github.io/react-native/docs/modal.html</a></p>