title: Best practice for using react-native modals
body: <p>My react-native app has several situations where different modals can be presented. I am wondering what's the best way to accomplish this. In general I see two different approaches:</p>
  
  <p><strong>a)</strong> 
  On the root view I always have the <code>Modal</code>-component mounted and simply switch the content, like this...</p>
  
  <pre><code>&lt;View&gt;
      {...}
      &lt;Modal visible={this.props.modal &gt; 0}&gt;
           {this.props.modal === 1 &amp;&amp; &lt;ModalContent1 /&gt;}
           {this.props.modal === 2 &amp;&amp; &lt;ModalContent2 /&gt;}
           {this.props.modal === 3 &amp;&amp; &lt;ModalContent3 /&gt;}
      &lt;/Modal&gt;
  &lt;/View&gt;
  </code></pre>
  
  <p><strong>b)</strong> Every modal brings it's own <code>Modal</code>-component and is mounted somewhere in the tree, near the place it is triggered from.</p>
  
  <p>Which way would you prefer and why?</p>
  
  <p>A question that applies to both approaches is, if the <code>Modal</code>-component should always be mounted and only triggered using the <code>visible</code>-prop. If that's the way to go, I assume approach b) needs more memory, because multiple instances of the <code>Modal</code>-component are created.</p>