Hello everyone, it’s me again :stuck_out_tongue: I...

# compose

[Sebastian Höbarth]

Hello everyone, it’s me again 😛 I use Accompanist Navigation to animate between screens. I use the example Transition from the Docs of the AnimatedNavHost . Navigating from overview to detail screen, the overview has this as exitTransition set. So the current screen should just slide out, although when the transition starts, the UI jumps up and then slides out. I can’t figure out where this Jump originates. Does someone have a similar problem and can pinpoint me in the direction what I’m doing wrong? (Attached a video in the thread)

exitTransition = {
 when (targetState.destination.route) {
      DetailDestination.route -> slideOutOfContainer(
          AnimatedContentScope.SlideDirection.Left,
          animationSpec = tween(600)
          )
      else -> null
 }
},

[Sebastian Höbarth]

Slowmotion video of the actual transition that happens.

[Oleksandr Balan]

I assume that's due to the bottom bar which hides and causes recomposition of the list screen with a new, larger height.

[nlindberg]

I have something like this to delay the hide of the bottom menu until the screen transition is over:

@Composable
fun BottomMenu(selectedScreen: ContentScreen, navigationActions: NavigationActions) {
    val show = selectedScreen in ContentScreen.bottomMenuScreens
    val size by animateDpAsState(if (show) 60.dp else 0.dp, animationSpec = tween(300, 300))
    Column (
        Modifier
            .height(size)

Maybe it can be helpfull for you.

[Sebastian Höbarth]

if I AnimateVisibility of the BottomBar in the Scaffold, the BottomBar is stuck at the top of the screen when navigating back with Compose Version 1.3.0-beta03 (@nlindberg thanks, the delay does the trick for the recompose screen jump)

bottomBar = {
                    AnimatedVisibility(
                        appState.shouldShowBottomBar,
                        enter = fadeIn(tween(300, 300)) + expandIn(tween(300, 300)),
                        exit = shrinkOut(tween(300, 300)) + fadeOut(tween(300, 300))
                    ) {
                        BottomBar(
                            destinations = appState.topLevelDestinations,
                            onNavigateToDestination = appState::navigate,
                            currentDestination = appState.currentDestination
                        )
                    }
                },

[nlindberg]

Not sure not actually using scaffold for my bottom menu 🤷

[Sebastian Höbarth]

With this animation setup it’s working, but there is this ugly white gap 🫣 @nlindberg

enter = slideInVertically(tween(300, 300), initialOffsetY = { it }),
exit = slideOutVertically(tween(300, 300), targetOffsetY = { it })

[nlindberg]

Not sure exactly how the rest of your setup looks but, for this to work you need the screen to take up available space so that when the bottom menu size animates to 0 height the rest of the screen takes up the space simultaniously

[Sebastian Höbarth]

Found it @nlindberg. I had the PaddingValues that Scaffold supply’s added to the NavHost
If I remove .padding(padding) it works. But now I have to make sure in the screens if the BottomBar is shown that the content of that screen has enough padding to reach above it.

AnimatedNavHost(
                        navController = appState.navController,
                        bottomSheetNavigator = appState.bottomSheetNavigator,
                        showListAndDetail = appState.showListAndDetail,
                        onNavigateToDestination = appState::navigate,
                        onBackClick = appState::onBackClick,
                        onListAndDetailShown = { showNavRailFab = !it },
                        modifier = Modifier
                            .padding(padding)
                            .consumedWindowInsets(padding),
                    )