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

user_18453555 0
Viewed 270

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?

android-jetpack-compose
1 Answers

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).

user_10943330
Related