kotlinandroid-jetpack-composejetpack-compose-navigationjetpack-compose-animationandroid-jetpack-compose-animation

Dynamically Change Navigation Animation - Jetpack Compose


How can I change the navigation animation of the same destination when navigating in jetpack compose? For example, I want to show the screen horizontally from the right and other times I want that same screen to come vertically from the bottom (when clicking on a notification). I can't really do it using navController.navigate(route) because the route is defined on the same hierarchy as the enterTransition and exitTransition.

composable(
        route = "Details",
        deepLinks = listOf(navDeepLink { uriPattern = "myapp://test/details" }),
        enterTransition = {
                slideInVertically(
                    initialOffsetY = { it },
                    animationSpec = tween(durationMillis = 700, easing = LinearOutSlowInEasing)
                )
            }
        },
        exitTransition = {
            ExitTransition.None
        },
        popEnterTransition = {
            EnterTransition.None
        },
        popExitTransition = {
            slideOutVertically(
                targetOffsetY = { it },
                animationSpec = tween(durationMillis = 700, easing = LinearOutSlowInEasing)
            )
        },
    ) {
         MyComposable()
    }

Solution

  • You can create several routes for the same screen. Something like:

    fun NavGraphBuilder.detailsH() {
        composable("detailsH", /* horizontal transition */) {
            DetailsScreen()
        }
    }
    fun NavGraphBuilder.detailsV() {
        composable("detailsV", /* vertical transition */) {
            DetailsScreen()
        }
    }
    
    NavHost(..) {
        composable("screenA"){
            ScreenA(
                onNavigateToDetails = { navController.navigate("detailsH") }
            )
        }
        composable("screenB"){
            ScreenB(
                onNavigateToDetails = { navController.navigate("detailsV") }
            )
        }
        detailsH()
        detailsV()
    }
    
    @Composable
    fun ScreenA(
        onNavigateToDetails : () -> Unit,
    ) {}