Is there any way to remove navigation animation for bottomNavigation bar in scaffold in jetpack compose?

Question

I am using scaffold for my screen and there is a bottomNavigationBar inserted in bottomBar function.

When I click on an item in bottomNavigationBar, I navigate to another screen with this bar and Jetpack Compose uses it's default transition animation that looks like fading.

But the bottom navigationBar also fades during transition and this looks awful because I want it to have no animations at all.

Is there any way to remove transition animation for bottomNavigationBar?

score 5 · Accepted Answer · answered Apr 19 '22 at 16:56

In according to the documentation, animation for navigation is tracked by this issue.

As you can see in the last comment, the animation API for navigation is currently provided by the respective accompanist library. But, in the future it will be moved back to the standard navigation library. So, for now, I suggest you to use the Accompanist library instead of the "default" one.

If you're doing that already, you can replace the animation using something like this:

AnimatedNavHost(
    navController = navController,
    startDestination = ROUTE_MAIN,
    enterTransition = {
        if (initialState.destination.route == ROUTE_MAIN) {
            EnterTransition.None
        } else {
            slideInHorizontally(
                initialOffsetX = { it },
                animationSpec = tween(300)
            )
        }
    },
    exitTransition = {
        if (initialState.destination.route == ROUTE_MAIN) {
            ExitTransition.None
        } else {
            slideOutHorizontally(
                targetOffsetX = { -it },
                animationSpec = tween(300)
            )
        }
    },
    popEnterTransition = {
        if (targetState.destination.route == ROUTE_MAIN) {
            EnterTransition.None
        } else {
            slideInHorizontally(
                initialOffsetX = { -it },
                animationSpec = tween(300)
            )
        }
    },
    popExitTransition = {
        if (targetState.destination.route == ROUTE_MAIN) {
            ExitTransition.None
        } else {
            slideOutHorizontally(
                targetOffsetX = { it },
                animationSpec = tween(300)
            )
        }
    },
) {
    composable(ROUTE_MAIN) { ... }
    composable(ROUTE_DETAILS) { ... }
    ...
}

As you can see in the sample above, I'm disabling the animation from the ROUTE_MAIN using the EnterTransition.None and ExitTransition.None based on the current route (initialState.destination.route) and the target route (targetState.destination.route).

score 1 · Answer 2 · answered Mar 08 '23 at 14:58

You need to hoist your Scaffold outside of the NavHost instead of having individual scaffolds for every screen. This way, any bottom or top app bars, including a bottom nav bar will persist during navigation. This is ideally done by having one top level scaffold for your entire app. See this answer for an example: https://stackoverflow.com/a/74213093/21352655

Is there any way to remove navigation animation for bottomNavigation bar in scaffold in jetpack compose?

2 Answers2