title: Create a Modal in front of every component in React Native
body: <p>I want to make the Modal to appear in front of all other components.
  The root will be App.js, which create a router inside by using react-navigation, which contains a tab named Book.js.
  In the Book.js, it will display a list of BookItem.js
  What I want is when I click for every BookItem, a modal will display and cover everything including the router's bottomtabbar, but using the code I provided, which modalVisible = false, it will show the followings:</p>
  
  <p><a href="https://ibb.co/mSJ48FQ" rel="nofollow noreferrer">https://ibb.co/mSJ48FQ</a></p>
  
  <p>App.js</p>
  
  <pre><code>export default function App() {
    return (
      &lt;View style={styles.container}&gt;
        &lt;Router /&gt;
      &lt;/View&gt;
    );
  }
  </code></pre>
  
  <p>Router.js</p>
  
  <pre><code>export default createAppContainer(createBottomTabNavigator);
  </code></pre>
  
  <p>Books.js</p>
  
  <pre><code>    const createBookList = (data) =&gt; {
          setBooklist(data.datas.map(item =&gt; (
              &lt;BookItem key={item.bid} data={item} /&gt;
          )))
  
      };
  
      return (
          &lt;View style={styles.search}&gt;
              &lt;ScrollView&gt;
                  {booklist}
              &lt;/ScrollView&gt;
          &lt;/View&gt;
      );
  </code></pre>
  
  <p>Bookitem.js</p>
  
  <pre><code>    return (
          &lt;View&gt;
              &lt;Modal isVisible={modalVisible}&gt;
                  &lt;View&gt;
                      &lt;Text&gt;Modal&lt;/Text&gt;
                      &lt;Button title="Hide modal" onPress={() =&gt; { setmModalVisible(false) }} /&gt;
                  &lt;/View&gt;
              &lt;/Modal&gt;
              &lt;TouchableOpacity onPress={() =&gt; { setmModalVisible(true) }}&gt;
                  &lt;View style={styles.container}&gt;
                      { bookdetail }
                  &lt;/View&gt;
              &lt;/TouchableOpacity&gt;
          &lt;/View&gt;
  </code></pre>