androidx.navigation3.ui

Objects

NavDisplay

Object that indicates the features that can be handled by the NavDisplay
Cmn

Top-level functions summary

Unit
@Composable
<T : Any> NavDisplay(
    sceneState: SceneState<T>,
    navigationEventState: NavigationEventState<SceneInfo<T>>,
    modifier: Modifier,
    contentAlignment: Alignment,
    sizeTransform: SizeTransform?,
    transitionSpec: AnimatedContentTransitionScope<Scene<T>>.() -> ContentTransform,
    popTransitionSpec: AnimatedContentTransitionScope<Scene<T>>.() -> ContentTransform,
    predictivePopTransitionSpec: AnimatedContentTransitionScope<Scene<T>>.(Int) -> ContentTransform
)

A nav display that renders and animates between different Scenes, each of which can render one or more NavEntrys.
Cmn
Unit
@Composable
<T : Any> NavDisplay(
    entries: List<NavEntry<T>>,
    modifier: Modifier,
    contentAlignment: Alignment,
    sceneStrategy: SceneStrategy<T>,
    sizeTransform: SizeTransform?,
    transitionSpec: AnimatedContentTransitionScope<Scene<T>>.() -> ContentTransform,
    popTransitionSpec: AnimatedContentTransitionScope<Scene<T>>.() -> ContentTransform,
    predictivePopTransitionSpec: AnimatedContentTransitionScope<Scene<T>>.(Int) -> ContentTransform,
    onBack: (Int) -> Unit
)

A nav display that renders and animates between different Scenes, each of which can render one or more NavEntrys.
Cmn
Unit
@Composable
<T : Any> NavDisplay(
    backStack: List<T>,
    modifier: Modifier,
    contentAlignment: Alignment,
    onBack: (Int) -> Unit,
    entryDecorators: List<NavEntryDecorator<T>>,
    sceneStrategy: SceneStrategy<T>,
    sizeTransform: SizeTransform?,
    transitionSpec: AnimatedContentTransitionScope<Scene<T>>.() -> ContentTransform,
    popTransitionSpec: AnimatedContentTransitionScope<Scene<T>>.() -> ContentTransform,
    predictivePopTransitionSpec: AnimatedContentTransitionScope<Scene<T>>.(Int) -> ContentTransform,
    entryProvider: (key) -> NavEntry<T>
)

A nav display that renders and animates between different Scenes, each of which can render one or more NavEntrys.
Cmn
AnimatedContentTransitionScope<Scene<T>>.() -> ContentTransform

Default transitionSpec for pop navigation to be used by NavDisplay.
Cmn
android
AnimatedContentTransitionScope<Scene<T>>.(Int) -> ContentTransform

Default transitionSpec for predictive pop navigation to be used by NavDisplay.
Cmn
android
AnimatedContentTransitionScope<Scene<T>>.() -> ContentTransform

Default transitionSpec for forward navigation to be used by NavDisplay.
Cmn
android

Top-level properties summary

ProvidableCompositionLocal<AnimatedContentScope>

Local provider of AnimatedContentScope to NavEntry.Content.
Cmn

Top-level functions

Cmn 
@Composable
fun <T : Any> NavDisplay(
    sceneState: SceneState<T>,
    navigationEventState: NavigationEventState<SceneInfo<T>>,
    modifier: Modifier = Modifier,
    contentAlignment: Alignment = Alignment.TopStart,
    sizeTransform: SizeTransform? = null,
    transitionSpec: AnimatedContentTransitionScope<Scene<T>>.() -> ContentTransform = defaultTransitionSpec(),
    popTransitionSpec: AnimatedContentTransitionScope<Scene<T>>.() -> ContentTransform = defaultPopTransitionSpec(),
    predictivePopTransitionSpec: AnimatedContentTransitionScope<Scene<T>>.(Int) -> ContentTransform = defaultPredictivePopTransitionSpec()
): Unit

A nav display that renders and animates between different Scenes, each of which can render one or more NavEntrys.

import androidx.compose.animation.core.tween
import androidx.compose.animation.slideInHorizontally
import androidx.compose.animation.slideOutHorizontally
import androidx.compose.animation.togetherWith
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.lifecycle.viewmodel.compose.viewModel
import androidx.lifecycle.viewmodel.navigation3.rememberViewModelStoreNavEntryDecorator
import androidx.navigation3.runtime.NavBackStack
import androidx.navigation3.runtime.NavEntry
import androidx.navigation3.runtime.NavEntryDecorator
import androidx.navigation3.runtime.entryProvider
import androidx.navigation3.runtime.rememberNavBackStack
import androidx.navigation3.runtime.rememberSavedStateNavEntryDecorator
import androidx.navigation3.runtime.samples.Dashboard
import androidx.navigation3.runtime.samples.DialogBase
import androidx.navigation3.runtime.samples.DialogContent
import androidx.navigation3.runtime.samples.Profile
import androidx.navigation3.runtime.samples.ProfileViewModel
import androidx.navigation3.runtime.samples.Scrollable
import androidx.navigation3.scene.Scene
import androidx.navigation3.scene.rememberSceneSetupNavEntryDecorator
import androidx.navigation3.ui.NavDisplay
import androidx.navigationevent.NavigationEvent

val backStack = rememberNavBackStack(Profile)
val showDialog = remember { mutableStateOf(false) }
NavDisplay(
    backStack = backStack,
    entryDecorators =
        listOf(
            rememberSceneSetupNavEntryDecorator(),
            rememberSavedStateNavEntryDecorator(),
            rememberViewModelStoreNavEntryDecorator(),
        ),
    onBack = { backStack.removeAt(backStack.lastIndex) },
    entryProvider =
        entryProvider({ NavEntry(it) { Text(text = "Invalid Key") } }) {
            entry<Profile> {
                val viewModel = viewModel<ProfileViewModel>()
                Profile(viewModel, { backStack.add(it) }) {
                    backStack.removeAt(backStack.lastIndex)
                }
            }
            entry<Scrollable> {
                Scrollable({ backStack.add(it) }) { backStack.removeAt(backStack.lastIndex) }
            }
            entry<DialogBase> {
                DialogBase(onClick = { showDialog.value = true }) {
                    backStack.removeAt(backStack.lastIndex)
                }
            }
            entry<Dashboard>(
                metadata =
                    NavDisplay.predictivePopTransitionSpec { swipeEdge ->
                        if (swipeEdge == NavigationEvent.EDGE_RIGHT) {
                            slideInHorizontally(tween(700)) { it / 2 } togetherWith
                                slideOutHorizontally(tween(700)) { -it / 2 }
                        } else {
                            slideInHorizontally(tween(700)) { -it / 2 } togetherWith
                                slideOutHorizontally(tween(700)) { it / 2 }
                        }
                    }
            ) { dashboardArgs ->
                val userId = dashboardArgs.userId
                Dashboard(userId, onBack = { backStack.removeAt(backStack.lastIndex) })
            }
        },
)
if (showDialog.value) {
    DialogContent(onDismissRequest = { showDialog.value = false })
}
 
import androidx.compose.animation.SharedTransitionLayout
import androidx.compose.animation.SharedTransitionScope
import androidx.compose.foundation.layout.Box
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.ProvidableCompositionLocal
import androidx.compose.runtime.compositionLocalOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.navigation3.runtime.NavBackStack
import androidx.navigation3.runtime.NavEntry
import androidx.navigation3.runtime.NavEntryDecorator
import androidx.navigation3.runtime.entryProvider
import androidx.navigation3.runtime.navEntryDecorator
import androidx.navigation3.runtime.rememberNavBackStack
import androidx.navigation3.runtime.rememberSavedStateNavEntryDecorator
import androidx.navigation3.scene.Scene
import androidx.navigation3.scene.rememberSceneSetupNavEntryDecorator
import androidx.navigation3.ui.LocalNavAnimatedContentScope
import androidx.navigation3.ui.NavDisplay

/** The [SharedTransitionScope] of the [NavDisplay]. */
val localNavSharedTransitionScope: ProvidableCompositionLocal<SharedTransitionScope> =
    compositionLocalOf {
        throw IllegalStateException(
            "Unexpected access to LocalNavSharedTransitionScope. You must provide a " +
                "SharedTransitionScope from a call to SharedTransitionLayout() or " +
                "SharedTransitionScope()"
        )
    }

/**
 * A [NavEntryDecorator] that wraps each entry in a shared element that is controlled by the
 * [Scene].
 */
val sharedEntryInSceneNavEntryDecorator =
    navEntryDecorator<Any> { entry ->
        with(localNavSharedTransitionScope.current) {
            Box(
                Modifier.sharedElement(
                    rememberSharedContentState(entry.contentKey),
                    animatedVisibilityScope = LocalNavAnimatedContentScope.current,
                )
            ) {
                entry.Content()
            }
        }
    }

val backStack = rememberNavBackStack(CatList)
SharedTransitionLayout {
    CompositionLocalProvider(localNavSharedTransitionScope provides this) {
        NavDisplay(
            backStack = backStack,
            onBack = { backStack.removeAt(backStack.lastIndex) },
            entryDecorators =
                listOf(
                    sharedEntryInSceneNavEntryDecorator,
                    rememberSceneSetupNavEntryDecorator(),
                    rememberSavedStateNavEntryDecorator(),
                ),
            entryProvider =
                entryProvider {
                    entry<CatList> {
                        CatList(this@SharedTransitionLayout) { cat ->
                            backStack.add(CatDetail(cat))
                        }
                    }
                    entry<CatDetail> { args ->
                        CatDetail(args.cat, this@SharedTransitionLayout) {
                            backStack.removeAt(backStack.lastIndex)
                        }
                    }
                },
        )
    }
}
 
import androidx.compose.animation.SharedTransitionLayout
import androidx.compose.runtime.remember
import androidx.navigation3.runtime.NavBackStack
import androidx.navigation3.runtime.entryProvider
import androidx.navigation3.runtime.rememberNavBackStack
import androidx.navigation3.ui.NavDisplay

val backStack = rememberNavBackStack(CatList)
SharedTransitionLayout {
    NavDisplay(
        backStack = backStack,
        onBack = { backStack.removeAt(backStack.lastIndex) },
        entryProvider =
            entryProvider {
                entry<CatList> {
                    CatList(this@SharedTransitionLayout) { cat ->
                        backStack.add(CatDetail(cat))
                    }
                }
                entry<CatDetail> { args ->
                    CatDetail(args.cat, this@SharedTransitionLayout) {
                        backStack.removeAt(backStack.lastIndex)
                    }
                }
            },
    )
}
Parameters
sceneState: SceneState<T>

the state that determines what current scene of the NavDisplay.
navigationEventState: NavigationEventState<SceneInfo<T>>

the NavigationEventState responsible for handling back navigation
modifier: Modifier = Modifier

the modifier to be applied to the layout.
contentAlignment: Alignment = Alignment.TopStart

The Alignment of the AnimatedContent
sizeTransform: SizeTransform? = null

the SizeTransform for the AnimatedContent.
transitionSpec: AnimatedContentTransitionScope<Scene<T>>.() -> ContentTransform = defaultTransitionSpec()

Default ContentTransform when navigating to NavEntrys.
popTransitionSpec: AnimatedContentTransitionScope<Scene<T>>.() -> ContentTransform = defaultPopTransitionSpec()

Default ContentTransform when popping NavEntrys.
predictivePopTransitionSpec: AnimatedContentTransitionScope<Scene<T>>.(Int) -> ContentTransform = defaultPredictivePopTransitionSpec()

Default ContentTransform when popping with predictive back NavEntrys.
Cmn 
@Composable
fun <T : Any> NavDisplay(
    entries: List<NavEntry<T>>,
    modifier: Modifier = Modifier,
    contentAlignment: Alignment = Alignment.TopStart,
    sceneStrategy: SceneStrategy<T> = SinglePaneSceneStrategy(),
    sizeTransform: SizeTransform? = null,
    transitionSpec: AnimatedContentTransitionScope<Scene<T>>.() -> ContentTransform = defaultTransitionSpec(),
    popTransitionSpec: AnimatedContentTransitionScope<Scene<T>>.() -> ContentTransform = defaultPopTransitionSpec(),
    predictivePopTransitionSpec: AnimatedContentTransitionScope<Scene<T>>.(Int) -> ContentTransform = defaultPredictivePopTransitionSpec(),
    onBack: (Int) -> Unit
): Unit

A nav display that renders and animates between different Scenes, each of which can render one or more NavEntrys.

The Scenes are calculated with the given SceneStrategy, which may be an assembled delegated chain of SceneStrategys. If no Scene is calculated, the fallback will be to a SinglePaneSceneStrategy.

It is allowable for different Scenes to render the same NavEntrys, perhaps on some conditions as determined by the sceneStrategy based on window size, form factor, other arbitrary logic.

If this happens, and these Scenes are rendered at the same time due to animation or predictive back, then the content for the NavEntry will only be rendered in the most recent Scene that is the target for being the current scene as determined by sceneStrategy. This enforces a unique invocation of each NavEntry, even if it is displayable by two different Scenes.

WHEN TO USE This overload can be used when you need to switch between different backStacks and each with their own separate decorator states, or when you want to concatenate backStacks and their states to form a larger backstack.

HOW TO USE The entries can first be created via rememberDecoratedNavEntries in order to associate a backStack with a particular set of states.

import androidx.compose.material3.Icon
import androidx.compose.material3.NavigationBar
import androidx.compose.material3.NavigationBarItem
import androidx.compose.material3.Scaffold
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.navigation3.runtime.NavBackStack
import androidx.navigation3.runtime.rememberNavBackStack
import androidx.navigation3.ui.NavDisplay

val tabKeys = listOf(Home, User)

/** set up User entries */
val homeBackStack = rememberNavBackStack(Home)
val homeTabEntries =
    getHomeTabEntries(
        backStackString = homeBackStack.map { (it as SampleKey).name }.toString(),
        backStack = homeBackStack,
    )

/** set up User entries */
val userBackStack = rememberNavBackStack(User)
val userTabEntries =
    getUserTabEntries(
        backStackString = userBackStack.map { (it as SampleKey).name }.toString(),
        backStack = userBackStack,
    )

/** condition for which tab to switch to */
var currentTab: SampleTabKey by remember { mutableStateOf(Home) }

Scaffold(
    bottomBar = {
        NavigationBar {
            tabKeys.forEach { tab ->
                val isSelected = tab == currentTab
                NavigationBarItem(
                    selected = isSelected,
                    onClick = { currentTab = tab },
                    icon = { Icon(imageVector = tab.imageVector, contentDescription = null) },
                )
            }
        }
    }
) {
    /** Swap backStacks based on the current selected tab */
    NavDisplay(
        entries = if (currentTab == Home) homeTabEntries else userTabEntries,
        onBack = { backCount ->
            val currBackStack = if (currentTab == Home) homeBackStack else userBackStack
            repeat(backCount) { currBackStack.removeLastOrNull() }
        },
    )
}
 
import androidx.compose.material3.Icon
import androidx.compose.material3.NavigationBar
import androidx.compose.material3.NavigationBarItem
import androidx.compose.material3.Scaffold
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.navigation3.runtime.NavBackStack
import androidx.navigation3.runtime.rememberNavBackStack
import androidx.navigation3.ui.NavDisplay

val tabKeys = listOf(Home, User)

/** set up User entries */
val homeBackStack = rememberNavBackStack(Home)
val homeBackStackNames = homeBackStack.map { (it as SampleKey).name }
val homeTabEntries =
    getHomeTabEntries(
        backStackString = homeBackStackNames.toString(),
        backStack = homeBackStack,
    )

/** set up User entries */
val userBackStack = rememberNavBackStack(User)
val userTabEntries =
    getUserTabEntries(
        backStackString =
            (homeBackStackNames + userBackStack.map { (it as SampleKey).name }).toString(),
        backStack = userBackStack,
    )

/** condition for which tab to switch to */
var currentTab: SampleTabKey by remember { mutableStateOf(Home) }

Scaffold(
    bottomBar = {
        NavigationBar {
            tabKeys.forEach { tab ->
                val isSelected = tab == currentTab
                NavigationBarItem(
                    selected = isSelected,
                    onClick = { currentTab = tab },
                    icon = { Icon(imageVector = tab.imageVector, contentDescription = null) },
                )
            }
        }
    }
) {
    /** Swap backStacks based on the current selected tab */
    NavDisplay(
        entries = if (currentTab == Home) homeTabEntries else homeTabEntries + userTabEntries,
        onBack = { backCount ->
            for (i in 1..backCount) {
                val currBackStack = if (currentTab == Home) homeBackStack else userBackStack
                currBackStack.removeLastOrNull()
                if (currentTab == User && userBackStack.isEmpty()) {
                    currentTab = Home
                }
            }
        },
    )
}
Parameters
entries: List<NavEntry<T>>

the list of NavEntry built from a backStack. The entries can be created from a backStack decorated with NavEntryDecorator via rememberDecoratedNavEntries.
modifier: Modifier = Modifier

the modifier to be applied to the layout.
contentAlignment: Alignment = Alignment.TopStart

The Alignment of the AnimatedContent
sceneStrategy: SceneStrategy<T> = SinglePaneSceneStrategy()

the SceneStrategy to determine which scene to render a list of entries.
sizeTransform: SizeTransform? = null

the SizeTransform for the AnimatedContent.
transitionSpec: AnimatedContentTransitionScope<Scene<T>>.() -> ContentTransform = defaultTransitionSpec()

Default ContentTransform when navigating to NavEntrys.
popTransitionSpec: AnimatedContentTransitionScope<Scene<T>>.() -> ContentTransform = defaultPopTransitionSpec()

Default ContentTransform when popping NavEntrys.
predictivePopTransitionSpec: AnimatedContentTransitionScope<Scene<T>>.(Int) -> ContentTransform = defaultPredictivePopTransitionSpec()

Default ContentTransform when popping with predictive back NavEntrys.
onBack: (Int) -> Unit

a callback for handling system back press. The passed Int refers to the number of entries to pop from the end of the backstack, as calculated by the sceneStrategy.
See also
rememberDecoratedNavEntries
Cmn 
@Composable
fun <T : Any> NavDisplay(
    backStack: List<T>,
    modifier: Modifier = Modifier,
    contentAlignment: Alignment = Alignment.TopStart,
    onBack: (Int) -> Unit = {
        if (backStack is MutableList<T>) {
            repeat(it) { backStack.removeAt(backStack.lastIndex) }
        }
    },
    entryDecorators: List<NavEntryDecorator<T>> = listOf(rememberSavedStateNavEntryDecorator()),
    sceneStrategy: SceneStrategy<T> = SinglePaneSceneStrategy(),
    sizeTransform: SizeTransform? = null,
    transitionSpec: AnimatedContentTransitionScope<Scene<T>>.() -> ContentTransform = defaultTransitionSpec(),
    popTransitionSpec: AnimatedContentTransitionScope<Scene<T>>.() -> ContentTransform = defaultPopTransitionSpec(),
    predictivePopTransitionSpec: AnimatedContentTransitionScope<Scene<T>>.(Int) -> ContentTransform = defaultPredictivePopTransitionSpec(),
    entryProvider: (key) -> NavEntry<T>
): Unit

A nav display that renders and animates between different Scenes, each of which can render one or more NavEntrys.

The Scenes are calculated with the given SceneStrategy, which may be an assembled delegated chain of SceneStrategys. If no Scene is calculated, the fallback will be to a SinglePaneSceneStrategy.

It is allowable for different Scenes to render the same NavEntrys, perhaps on some conditions as determined by the sceneStrategy based on window size, form factor, other arbitrary logic.

If this happens, and these Scenes are rendered at the same time due to animation or predictive back, then the content for the NavEntry will only be rendered in the most recent Scene that is the target for being the current scene as determined by sceneStrategy. This enforces a unique invocation of each NavEntry, even if it is displayable by two different Scenes.

import androidx.compose.animation.core.tween
import androidx.compose.animation.slideInHorizontally
import androidx.compose.animation.slideOutHorizontally
import androidx.compose.animation.togetherWith
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.lifecycle.viewmodel.compose.viewModel
import androidx.lifecycle.viewmodel.navigation3.rememberViewModelStoreNavEntryDecorator
import androidx.navigation3.runtime.NavBackStack
import androidx.navigation3.runtime.NavEntry
import androidx.navigation3.runtime.NavEntryDecorator
import androidx.navigation3.runtime.entryProvider
import androidx.navigation3.runtime.rememberNavBackStack
import androidx.navigation3.runtime.rememberSavedStateNavEntryDecorator
import androidx.navigation3.runtime.samples.Dashboard
import androidx.navigation3.runtime.samples.DialogBase
import androidx.navigation3.runtime.samples.DialogContent
import androidx.navigation3.runtime.samples.Profile
import androidx.navigation3.runtime.samples.ProfileViewModel
import androidx.navigation3.runtime.samples.Scrollable
import androidx.navigation3.scene.Scene
import androidx.navigation3.scene.rememberSceneSetupNavEntryDecorator
import androidx.navigation3.ui.NavDisplay
import androidx.navigationevent.NavigationEvent

val backStack = rememberNavBackStack(Profile)
val showDialog = remember { mutableStateOf(false) }
NavDisplay(
    backStack = backStack,
    entryDecorators =
        listOf(
            rememberSceneSetupNavEntryDecorator(),
            rememberSavedStateNavEntryDecorator(),
            rememberViewModelStoreNavEntryDecorator(),
        ),
    onBack = { backStack.removeAt(backStack.lastIndex) },
    entryProvider =
        entryProvider({ NavEntry(it) { Text(text = "Invalid Key") } }) {
            entry<Profile> {
                val viewModel = viewModel<ProfileViewModel>()
                Profile(viewModel, { backStack.add(it) }) {
                    backStack.removeAt(backStack.lastIndex)
                }
            }
            entry<Scrollable> {
                Scrollable({ backStack.add(it) }) { backStack.removeAt(backStack.lastIndex) }
            }
            entry<DialogBase> {
                DialogBase(onClick = { showDialog.value = true }) {
                    backStack.removeAt(backStack.lastIndex)
                }
            }
            entry<Dashboard>(
                metadata =
                    NavDisplay.predictivePopTransitionSpec { swipeEdge ->
                        if (swipeEdge == NavigationEvent.EDGE_RIGHT) {
                            slideInHorizontally(tween(700)) { it / 2 } togetherWith
                                slideOutHorizontally(tween(700)) { -it / 2 }
                        } else {
                            slideInHorizontally(tween(700)) { -it / 2 } togetherWith
                                slideOutHorizontally(tween(700)) { it / 2 }
                        }
                    }
            ) { dashboardArgs ->
                val userId = dashboardArgs.userId
                Dashboard(userId, onBack = { backStack.removeAt(backStack.lastIndex) })
            }
        },
)
if (showDialog.value) {
    DialogContent(onDismissRequest = { showDialog.value = false })
}
 
import androidx.compose.animation.SharedTransitionLayout
import androidx.compose.animation.SharedTransitionScope
import androidx.compose.foundation.layout.Box
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.ProvidableCompositionLocal
import androidx.compose.runtime.compositionLocalOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.navigation3.runtime.NavBackStack
import androidx.navigation3.runtime.NavEntry
import androidx.navigation3.runtime.NavEntryDecorator
import androidx.navigation3.runtime.entryProvider
import androidx.navigation3.runtime.navEntryDecorator
import androidx.navigation3.runtime.rememberNavBackStack
import androidx.navigation3.runtime.rememberSavedStateNavEntryDecorator
import androidx.navigation3.scene.Scene
import androidx.navigation3.scene.rememberSceneSetupNavEntryDecorator
import androidx.navigation3.ui.LocalNavAnimatedContentScope
import androidx.navigation3.ui.NavDisplay

/** The [SharedTransitionScope] of the [NavDisplay]. */
val localNavSharedTransitionScope: ProvidableCompositionLocal<SharedTransitionScope> =
    compositionLocalOf {
        throw IllegalStateException(
            "Unexpected access to LocalNavSharedTransitionScope. You must provide a " +
                "SharedTransitionScope from a call to SharedTransitionLayout() or " +
                "SharedTransitionScope()"
        )
    }

/**
 * A [NavEntryDecorator] that wraps each entry in a shared element that is controlled by the
 * [Scene].
 */
val sharedEntryInSceneNavEntryDecorator =
    navEntryDecorator<Any> { entry ->
        with(localNavSharedTransitionScope.current) {
            Box(
                Modifier.sharedElement(
                    rememberSharedContentState(entry.contentKey),
                    animatedVisibilityScope = LocalNavAnimatedContentScope.current,
                )
            ) {
                entry.Content()
            }
        }
    }

val backStack = rememberNavBackStack(CatList)
SharedTransitionLayout {
    CompositionLocalProvider(localNavSharedTransitionScope provides this) {
        NavDisplay(
            backStack = backStack,
            onBack = { backStack.removeAt(backStack.lastIndex) },
            entryDecorators =
                listOf(
                    sharedEntryInSceneNavEntryDecorator,
                    rememberSceneSetupNavEntryDecorator(),
                    rememberSavedStateNavEntryDecorator(),
                ),
            entryProvider =
                entryProvider {
                    entry<CatList> {
                        CatList(this@SharedTransitionLayout) { cat ->
                            backStack.add(CatDetail(cat))
                        }
                    }
                    entry<CatDetail> { args ->
                        CatDetail(args.cat, this@SharedTransitionLayout) {
                            backStack.removeAt(backStack.lastIndex)
                        }
                    }
                },
        )
    }
}
 
import androidx.compose.animation.SharedTransitionLayout
import androidx.compose.runtime.remember
import androidx.navigation3.runtime.NavBackStack
import androidx.navigation3.runtime.entryProvider
import androidx.navigation3.runtime.rememberNavBackStack
import androidx.navigation3.ui.NavDisplay

val backStack = rememberNavBackStack(CatList)
SharedTransitionLayout {
    NavDisplay(
        backStack = backStack,
        onBack = { backStack.removeAt(backStack.lastIndex) },
        entryProvider =
            entryProvider {
                entry<CatList> {
                    CatList(this@SharedTransitionLayout) { cat ->
                        backStack.add(CatDetail(cat))
                    }
                }
                entry<CatDetail> { args ->
                    CatDetail(args.cat, this@SharedTransitionLayout) {
                        backStack.removeAt(backStack.lastIndex)
                    }
                }
            },
    )
}
Parameters
backStack: List<T>

the collection of keys that represents the state that needs to be handled
modifier: Modifier = Modifier

the modifier to be applied to the layout.
contentAlignment: Alignment = Alignment.TopStart

The Alignment of the AnimatedContent
onBack: (Int) -> Unit = { if (backStack is MutableList<T>) { repeat(it) { backStack.removeAt(backStack.lastIndex) } } }

a callback for handling system back press. The passed Int refers to the number of entries to pop from the end of the backstack, as calculated by the sceneStrategy.
entryDecorators: List<NavEntryDecorator<T>> = listOf(rememberSavedStateNavEntryDecorator())

list of NavEntryDecorator to add information to the entry content
sceneStrategy: SceneStrategy<T> = SinglePaneSceneStrategy()

the SceneStrategy to determine which scene to render a list of entries.
sizeTransform: SizeTransform? = null

the SizeTransform for the AnimatedContent.
transitionSpec: AnimatedContentTransitionScope<Scene<T>>.() -> ContentTransform = defaultTransitionSpec()

Default ContentTransform when navigating to NavEntrys.
popTransitionSpec: AnimatedContentTransitionScope<Scene<T>>.() -> ContentTransform = defaultPopTransitionSpec()

Default ContentTransform when popping NavEntrys.
predictivePopTransitionSpec: AnimatedContentTransitionScope<Scene<T>>.(Int) -> ContentTransform = defaultPredictivePopTransitionSpec()

Default ContentTransform when popping with predictive back NavEntrys.
entryProvider: (key) -> NavEntry<T>

lambda used to construct each possible NavEntry

defaultPopTransitionSpec

Cmn android 
fun <T : Any> defaultPopTransitionSpec(): AnimatedContentTransitionScope<Scene<T>>.() -> ContentTransform

Default transitionSpec for pop navigation to be used by NavDisplay.

defaultPredictivePopTransitionSpec

Cmn android 
fun <T : Any> defaultPredictivePopTransitionSpec(): AnimatedContentTransitionScope<Scene<T>>.(Int) -> ContentTransform

Default transitionSpec for predictive pop navigation to be used by NavDisplay.

defaultTransitionSpec

Cmn android 
fun <T : Any> defaultTransitionSpec(): AnimatedContentTransitionScope<Scene<T>>.() -> ContentTransform

Default transitionSpec for forward navigation to be used by NavDisplay.

Top-level properties

LocalNavAnimatedContentScope

Cmn 
val LocalNavAnimatedContentScope: ProvidableCompositionLocal<AnimatedContentScope>

Local provider of AnimatedContentScope to NavEntry.Content.

This does not have a default value since the AnimatedContentScope is provided at runtime by AnimatedContent.

import androidx.compose.animation.SharedTransitionLayout
import androidx.compose.runtime.remember
import androidx.navigation3.runtime.NavBackStack
import androidx.navigation3.runtime.entryProvider
import androidx.navigation3.runtime.rememberNavBackStack
import androidx.navigation3.ui.NavDisplay

val backStack = rememberNavBackStack(CatList)
SharedTransitionLayout {
    NavDisplay(
        backStack = backStack,
        onBack = { backStack.removeAt(backStack.lastIndex) },
        entryProvider =
            entryProvider {
                entry<CatList> {
                    CatList(this@SharedTransitionLayout) { cat ->
                        backStack.add(CatDetail(cat))
                    }
                }
                entry<CatDetail> { args ->
                    CatDetail(args.cat, this@SharedTransitionLayout) {
                        backStack.removeAt(backStack.lastIndex)
                    }
                }
            },
    )
}