title: React-Native Controlled Modal Freezing
body: <p>Disclaimers: 
  Only can test on iPhone emulator atm. 
  React-Native 0.49
  Mac OSX High Sierra </p>
  
  <p>I want to create a modal which gets its props from a parent component.
  As below:</p>
  
  <pre><code>const Modal = ({ showModal, closeModal }) =&gt; (
    &lt;Modal
      animationType="slide"
      transparent={false}
      visible={showModal}
      onRequestClose={() =&gt; {alert("Modal has been closed.")}}
      &gt;
     &lt;View style={{marginTop: 22}}&gt;
       &lt;Text&gt;Hello World!&lt;/Text&gt;
       &lt;TouchableHighlight onPress={() =&gt; closeModal() }&gt;
          &lt;Text&gt;Hide Modal&lt;/Text&gt;
       &lt;/TouchableHighlight&gt;
     &lt;/View&gt;
    &lt;/Modal&gt;
  );
  </code></pre>
  
  <p>This is the parent example:</p>
  
  <pre><code>&lt;View&gt;
    &lt;Modal
      showModal={this.state.showModal}
      closeModal={() =&gt; this.setState({ showModal: false })}
    /&gt;
    &lt;ScrollView&gt;
        {elements.map(element =&gt; {
          return (
            &lt;Card key={element.id}&gt;  
              &lt;Badge onPress={() =&gt; this.setState({ showModal: true })&gt;
                &lt;Text&gt;Show&lt;/Text&gt;
              &lt;/Badge&gt;
            &lt;/Card&gt;
          );
        })}
    &lt;/ScrollView&gt;
  &lt;/View&gt;
  </code></pre>
  
  <p>When I click the show modal button the modal pops-up as expected but when I click closeModal then the modal disappears and reappears again but this time I cannot interact with it, the UI seems as if it is frozen, I have to then restart the emulator.</p>
  
  <p>If I copy and paste the code straight from the React-Native docs:
  <a href="https://facebook.github.io/react-native/docs/modal.html" rel="noreferrer">https://facebook.github.io/react-native/docs/modal.html</a>
  The modal works fine. It is a self-contained component though.</p>
  
  <p>Any help/advice would be much appreciated.</p>
  
  <p>Regards,
  Emir</p>