title: Detox - Testing visibility of modal in react native
body: <p>We are using detox to write E2E testing of a react native app where we have a case which needs to test if a modal appears after a button tap. </p>
  
  <p>But detox was not able to identify modal with the given <code>testID</code> thought the modal opens as expected. Is there a different way test modal in reactnative using detox?</p>
  
  <p>Below is the modal JSX</p>
  
  <pre><code>&lt;Modal
      testID="loadingModal"
      animationType="none"
      transparent
      visible={loading}
      onRequestClose={() =&gt; {}}
    &gt;
      &lt;View style={styles.modalContainer}&gt;
        &lt;View style={styles.loginModal}&gt;
          &lt;ActivityIndicator
            animating
            size="large"
            color="#00e0ff"
          /&gt;
          &lt;Text style={styles.login}&gt;Logging in...&lt;/Text&gt;
        &lt;/View&gt;
      &lt;/View&gt;
    &lt;/Modal&gt;
  </code></pre>
  
  <p>And below is the code to test the visibility of modal</p>
  
  <pre><code>it('should have welcome screen', async () =&gt; {      
      ....
  
      await element(by.text('CONTINUE')).tap();
      await waitFor(element(by.id('loadingModal'))).toBeVisible().withTimeout(5000);
      await expect(element(by.id('loadingModal'))).toBeVisible(); // this always fails    
  });
  </code></pre>