How to remove default transitions in Jetpack Compose Navigation

user_11568041 0
Viewed 1280

I'm using the following sippet of code to navigate from a composable to another one, but it has a default fade animation. How can I remove it? I tried using an empty anim resource but it doesn't work.

navHostController.navigate(
    "destination_route",
    navOptions {
        popUpTo("this_route") {
            inclusive = true
        }
        anim {
            enter = R.anim.empty_animation
            exit = R.anim.empty_animation
            popEnter = R.anim.empty_animation
            popExit = R.anim.empty_animation
        }
    }
)

R.anim.empty_animation:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <!--Empty to disable animation-->
</set>
android-jetpack-navigation android-jetpack-compose android
2 Answers

As of right now, as EpicPandaForce said it is not possible, but that is because it is in the works!

Currently this functionality is served under accompanist, in the accompanist-navigation-animation artifact. You can read more about it here or in a more detailed blogpost here where they talk a bit about the future of it too.

The gist of it is that with that dependency (and without it when it eventually gets merged to the normal navigation-compose library) you will be able to write something like this:

composable(
  "profile/{id}",
  enterTransition = { _, _ ->
    // Whatever EnterTransition object you want, like:
    fadeIn(animationSpec = tween(2000))
  }
) { // Content }
user_94402110

Currently, there is no way to configure the animations in the NavHost offered by Navigation-Compose's current version (2.4.0-beta02).

@Composable
public fun NavHost(
    navController: NavHostController,
    graph: NavGraph,
    modifier: Modifier = Modifier
) {
    val backStackEntry = visibleTransitionsInProgress.lastOrNull() ?: visibleBackStack.lastOrNull()

    var initialCrossfade by remember { mutableStateOf(true) }
    if (backStackEntry != null) {
        // while in the scope of the composable, we provide the navBackStackEntry as the
        // ViewModelStoreOwner and LifecycleOwner
        Crossfade(backStackEntry.id, modifier) { //// <<----- this

As Crossfade is not configurable, the transition cannot be changed.

To change the animation, you have to abandon using the NavHost provided by Navigation-Compose.

user_24133030
Related