Transitions

GitHub Discussions Change Log License

Search…

Overview

Setup

Transitions

To use the transitions you should first import cafe.adriel.voyager:voyager-transitions (see Setup).
Voyager has built-in transitions! When initializing the Navigator you can override the default content and use, for example, the SlideTransition.
setContent {
    Navigator(HomeScreen) { navigator ->
        SlideTransition(navigator)
    }
}
Available transitions
FadeTransition()
​
SlideTransition()
​
​
​
​
​
ScaleTransition()
​
​
Custom transitions
It's simple to add your own transitions: call ScreenTransition with a custom transitionModifier. Use the available params (screen, transition and event) to animate as needed.
@Composable
fun MyCustomTransition(
    navigator: Navigator,
    modifier: Modifier = Modifier,
    content: ScreenTransitionContent
) {
    ScreenTransition(
        navigator = navigator,
        modifier = modifier,
        content = content,
        transition = {
            val (initialScale, targetScale) = when (navigator.lastEvent) {
                StackEvent.Pop -> ExitScales
                else -> EnterScales
            }
​
            scaleIn(initialScale) with scaleOut(targetScale)
        }
    )
}
​
setContent {
    Navigator(HomeScreen) { navigator ->
        MyCustomTransition(navigator) { screen ->
            screen.Content()
        }
    }
}
Take a look at the source of the available transitions for working examples.

State restoration

Lifecycle

Last modified 5mo ago

Copy link

On this page

Available transitions

Custom transitions