title: How to hide bottom bar in Jetpack Compose when using Accompanists` Navigation Animation
body: <p><strong>Situation</strong></p>
  <p>I'm writing a pretty simple app using <code>Kotlin</code> &amp; <code>Android Jetpack Compose</code></p>
  <p>I have a <code>scaffold</code> containing my <code>navHost</code> and a <code>bottomBar</code>.
  I can use that <code>bottomBar</code> to navigate between three main screens.
  One of those main screens has a detail screen, which should not show a <code>bottomBar</code>.</p>
  <hr />
  <p><strong>My Code</strong></p>
  <p>So far, this was a piece of cake:</p>
  <pre><code>// MainActivitys onCreate
  
  setContent {
      val navController = rememberAnimatedNavController()
      val navBackStackEntry by navController.currentBackStackEntryAsState()
      val currentRoute = navBackStackEntry?.destination?.route?.substringBeforeLast(&quot;/&quot;)
  
      BottomBarNavTestTheme {
          Scaffold(
              bottomBar = {
                  if (currentRoute?.substringBeforeLast(&quot;/&quot;) == Screen.Detail.route) {
                      MyBottomNavigation(
                          navController,
                          currentRoute,
                          listOf(Screen.Dashboard, Screen.Map, Screen.Events) // main screens
                      )
                  }
              }
          ) { innerPadding -&gt;
              NavHost( // to be replaced by AnimatedNavHost
                  navController = navController,
                  startDestination = Screen.Dashboard.route,
                  modifier = Modifier.padding(innerPadding)
              ) {
                  composable(Screen.Dashboard.route) { DashboardScreen() }
                  composable(Screen.Map.route) { MapScreen { navController.navigate(Screen.Detail.route) } }
                  composable(Screen.Events.route) { EventsScreen() }
                  composable(Screen.Detail.route) { MapDetailScreen() }
              }
          }
      }
  }
  </code></pre>
  <hr />
  <p><strong>Problem</strong>:</p>
  <p>I would like transitions between my screens, so i'm using <a href="https://google.github.io/accompanist/navigation-animation/#download" rel="noreferrer">Accompanists Navigation Animation</a>:
  Just replace <code>NavHost</code> with <code>AnimatedNavHost</code>.</p>
  <p>When navigating from <code>mainScreen</code> to <code>detailScreen</code> there is a strange effect:</p>
  <ol>
  <li>the bottomBar hides</li>
  <li>the main screen resizes: (see the bottom aligned text)</li>
  <li>the animation to the detail screen takes place.</li>
  </ol>
  <p>This looks bad, how can i fix it?</p>
  <img src="https://i.stack.imgur.com/Scklt.gif" width="300">
  <hr />
  <p><strong>Solution</strong></p>
  <p>An optimal solution would look like this:</p>
  <ul>
  <li>Main screen keeps bottom bar &amp; fades out.</li>
  <li>Simultaneously the detail page enters without a bottom bar.</li>
  </ul>