title: How to hide bottom bar on modal screen?
body: <p>I have an app with a bottom bar and I'd like to present a modal screen from one of them <strong>without</strong> the bottom tab. I don't understand why it works as expected on iOS but not on Android.</p>
  <p>Here is my bottom tab navigator which contains all my tabs:</p>
  <pre class="lang-js prettyprint-override"><code>// AppStack.tsx
  
  const Tab = createBottomTabNavigator()
  
  const AppStack = () =&gt; {
    return (
      &lt;Tab.Navigator initialRouteName=&quot;homeStack&quot; &gt;
        &lt;Tab.Screen name=&quot;homeStack&quot; component={HomeStack} /&gt;
        ...
      &lt;/Tab.Navigator&gt;
    )
  }
  </code></pre>
  <p>And here is the stack navigator that contains several screens but also contains one screen that should be presented modally (thus without the bottom bar).</p>
  <pre class="lang-js prettyprint-override"><code>// HomeStack.tsx
  
  const Stack = createNativeStackNavigator()
  
  const HomeStack = () =&gt; {
    return (
      &lt;Stack.Navigator initialRouteName=&quot;home&quot;&gt;
        &lt;Stack.Screen name=&quot;home&quot; component={HomeScreen} /&gt;
        ...
  
        &lt;Stack.Screen
          name=&quot;addStuff&quot;
          component={StuffStack}
          options={{
            presentation: 'fullScreenModal',
          }}
        /&gt;
  
      &lt;/Stack.Navigator&gt;
    )
  }
  
  </code></pre>
  <p>Presenting the <code>addStuff</code> modal screen from one of <code>HomeStack</code>'s screens works on iOS as expected: the bottom bar isn't displayed. But on Android, the bottom bar is still present...</p>
  <pre class="lang-js prettyprint-override"><code>// HomeScreen.tsx
  navigation.navigate('addStuff')
  </code></pre>
  <p>Does anybody have an idea on how to tell react-navigation not to add this bottom bar on this modal screen?</p>