title: Dismiss modal when navigating to another screen
body: <p>I have an App with <strong>Home Screen</strong>, in this screen I'm rendering a <strong>Modal</strong> which opens on <code>button press</code>, inside the <code>Modal</code> I have a button that is supposed to <em>navigate me to another screen</em>, it's navigating correctly but when I navigate to another screen the <em>modal doesn't disappear</em>, how can i hide it?</p>
  
  <p>Adding the code to demonstrate</p>
  
  <p><strong>Home:</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import Modal from './Modal';
  
  class Home extends Component {
    state = {
      isModalVisible: false
    };
  
    toggleModal = () =&gt;
      this.setState({ isModalVisible: !this.state.isModalVisible });
  
    render() {
      const { navigate } = this.props.navigation;
  
      &lt;Modal
      visible={this.state.isModalVisible}
      navigation={this.props.navigation}
      /&gt;
      );
    }
  }
  
  export default Home;
  </code></pre>
  
  <p><strong>Modal:</strong></p>
  
  <pre><code>import React, { Component } from "react";
  import Modal from "react-native-modal";
  
  class Modal extends Component {
  
    render() {
      const { navigate } = this.props.navigation;
  
      return (
          &lt;Modal
          isVisible={this.props.visible}&gt;
            &lt;Button onPress={() =&gt; {navigate('Main')}}&gt;
              &gt;Button&lt;/Text&gt;
            &lt;/Button&gt;
          &lt;/Modal&gt;
      );
    }
  }
  
  export default Modal;
  </code></pre>