title: Fix modal styling with react native navigation
body: <p>I want to change the styling of the modal that react native navigation module provides.</p>
  <p>I have an overlay menu stacked on top of the main Home page, the menu should have the functionality to switch between screens of the menu itself. The navigation module is created inside the menu and has some sort of fixed boundaries. I can find any solutions online. Module version 6.x</p>
  <p>I would like the app to look like without the navigation modal but with the functionality.</p>
  <p>The result with navigation:</p>
  <p><a href="https://i.stack.imgur.com/YFic6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YFic6.png" alt="enter image description here" /></a></p>
  <pre><code>&lt;SafeAreaView style={{flex: 1}}&gt;
    &lt;View style={styles.main}&gt;
      &lt;View style={styles.menu}&gt;
        &lt;View style={styles.container} &gt;
  
        &lt;NavigationContainer&gt;
          &lt;Stack.Navigator
            screenOptions={{ headerShown: false, }}
              
          &gt;
            &lt;Stack.Screen
              name=&quot;Home&quot;
              component={Home}
            /&gt;
            &lt;Stack.Screen name=&quot;Profile&quot; component={Home} /&gt;
          &lt;/Stack.Navigator&gt;
        &lt;/NavigationContainer&gt;
        {/* &lt;Home /&gt; */}
      &lt;/View&gt;
    &lt;/View&gt;
    &lt;/View&gt;
  &lt;/SafeAreaView&gt;
  </code></pre>
  <p>without navigation:</p>
  <p><a href="https://i.stack.imgur.com/GW4rZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GW4rZ.png" alt="enter image description here" /></a></p>
  <pre><code>&lt;SafeAreaView style={{flex: 1}}&gt;
    &lt;View style={styles.main}&gt;
      &lt;View style={styles.menu}&gt;
        &lt;View style={styles.container} &gt;
        &lt;Home /&gt;
      &lt;/View&gt;
    &lt;/View&gt;
    &lt;/View&gt;
  &lt;/SafeAreaView&gt;
  </code></pre>