Peeling back the Layers: A Navigation3 Deep Dive

Join us as we explore the Navigation3 API surface and peel back the layers of the library via the various NavDisplay overloads. We will provide insight into the decision behind each overload, how you would use each of them, and the helper APIs that assist you in building your custom logic. This will show you how to fully take advantage of the different building blocks that Navigation3 provides.

Presented at KotlinConf in 2026.

Transcript

1. Peeling back the Layers: A Navigation3 Deep Dive Ian Lake, Marcello Galhardo
2. Today’s agenda What's Nav3? ♦ rememberNavBackStack ♦ NavDisplay ♦ ♦ rememberDecoratedNavEntries ♦ rememberSceneState
3. What's Nav3?
4. State Component(state) Jetpack Compose
5. State Component(state) Jetpack Compose BackStack Navigation 3
6. State Component(state) Jetpack Compose BackStack NavDisplay(backStack) Navigation 3
7. @Serializable object Home : NavKey val backStack = rememberNavBackStack(Home) NavDisplay( backStack = backStack, entryProvider = entryProvider { entry<Home> { Text(“Hello World”) } } )
8. @Serializable object Home : NavKey val backStack = rememberNavBackStack(Home) NavDisplay( backStack = backStack, entryProvider = entryProvider { entry<Home> { Text(“Hello World”) } } )
9. @Serializable object Home : NavKey val backStack = rememberNavBackStack(Home) NavDisplay( backStack = backStack, entryProvider = entryProvider { entry<Home> { Text(“Hello World”) } } )
10. @Serializable object Home : NavKey val backStack = rememberNavBackStack(Home) NavDisplay( backStack = backStack, entryProvider = entryProvider { entry<Home> { Text(“Hello World”) } } )
11. @Serializable object Home : NavKey val backStack = rememberNavBackStack(Home) NavDisplay( backStack = backStack, entryProvider = entryProvider { entry<Home> { Text(“Hello World”) } } )
12. @Serializable object Home : NavKey val backStack = rememberNavBackStack(Home) NavDisplay( backStack = backStack, entryProvider = entryProvider { entry<Home> { Text(“Hello World”) } } )
13. @Serializable object Home : NavKey val backStack = rememberNavBackStack(Home) NavDisplay( backStack = backStack, entryProvider = entryProvider { entry<Home> { Text(“Hello World”) } } )
14. remember NavBackStack
15. val backStack = remember { mutableListOf<Any>() }
16. val backStack = remember { mutableStateListOf<Any>() }
17. val backStack = remember { mutableStateListOf<Any>() } Could be "Anything"
18. val backStack = remember { mutableStateListOf<Any>() } ?
19. val backStack = remember { mutableStateListOf<Any>() } ?
20. remember() Maintains State Recompositions
21. onDispose Process Death Left Composition Configuration Changes remember() Maintains State Recompositions
22. onDispose Process Death Left Composition Resets State Configuration Changes remember() Maintains State Recompositions
23. val backStack = rememberSaveable { mutableStateListOf<Any>() }
25. val backStack = rememberSerializable { mutableStateListOf<Any>() }
26. @Serializable data class Profile(userId: String) // Generated by the Serialization Compiler Plugin. serializer<Profile>()
27. val backStack = rememberSerializable { mutableStateListOf<Any>() }
28. val backStack = rememberSerializable { NavBackStack() }
29. val backStack = rememberNavBackStack()
30. @Serializable data object Home : NavKey @Serializable data class Profile(userId: String): NavKey val backStack = rememberNavBackStack(Home) Button(onClick = { backStack += Profile("me") }) { .. }
31. @Serializable data object Home : NavKey @Serializable data class Profile(userId: String): NavKey val backStack = rememberNavBackStack(Home) Button(onClick = { backStack += Profile("me") }) { .. } 😱
32. // Internal KSerializer to handle Navkey serialization on Android. val descriptor: SerialDescriptor val index = decodeElementIndex(descriptor) val className = decodeStringElement(descriptor, index) val serializer = serializer(Class.forName(className)) return decodeSerializableElement(descriptor, index, serializer) as T
33. // Internal KSerializer to handle Navkey serialization on Android. val descriptor: SerialDescriptor val index = decodeElementIndex(descriptor) val className = decodeStringElement(descriptor, index) val serializer = serializer(Class.forName(className)) return decodeSerializableElement(descriptor, index, serializer) as T
35. // Located in one module @Serializable sealed interface AppModuleKey : NavKey @Serializable data object Home : AppModuleKey @Serializable data class Profile(userId: String): AppModuleKey
36. // Located in one module @Serializable sealed interface AppModuleKey : NavKey @Serializable data object Home : AppModuleKey @Serializable data class Profile(userId: String): AppModuleKey val config = SavedStateConfiguration { serializersModule = SerializersModule { polymorphic(NavKey::class) { subclassesOfSealed<AppModuleKey>() } } } val backStack = rememberNavBackStack(config, Home)
37. Proprietary + Confidential NavDisplay
38. val backStack = rememberNavBackStack(config, Home) NavDisplay( backStack = backStack, )
39. val backStack = rememberNavBackStack(config, Home) NavDisplay( backStack = backStack, entryProvider = entryProvider, )
40. val entryProvider = entryProvider { entry<Home> { HomeScreen() } entry<Profile> { profile -> ProfileScreen(profile) } }
41. fun EntryProviderScope.profileEntry() { entry<Profile> { profile -> val viewModel = metroViewModel<ProfileViewModel>() val uiState by viewModel.uiState.collectAsState() ProfileScreen(uiState) } }
42. val backStack = rememberNavBackStack(config, Home) NavDisplay( backStack = backStack, entryProvider = entryProvider { homeEntry() profileEntry() } )
43. val backStack = rememberNavBackStack(config, Home) NavDisplay( backStack = backStack, entryProvider = entryProvider { homeEntry() profileEntry() } )
44. NavDisplay( backStack: List<T>, modifier: Modifier = Modifier, contentAlignment: Alignment = Alignment.TopStart, onBack: () -> Unit = { if (backStack is MutableList<T>) backStack.removeLastOrNull() }, entryDecorators: List<NavEntryDecorator<T>> = listOf(rememberSaveableStateHolderNavEntryDecorator()), sceneStrategy: SceneStrategy<T> = SinglePaneSceneStrategy(), sceneDecoratorStrategies: List<SceneDecoratorStrategy<T>> = emptyList(), sharedTransitionScope: SharedTransitionScope? = null, sizeTransform: SizeTransform? = null, transitionSpec: AnimatedContentTransitionScope<Scene<T>>.() -> ContentTransform = defaultTransitionSpec(), popTransitionSpec: AnimatedContentTransitionScope<Scene<T>>.() -> ContentTransform = defaultPopTransitionSpec(), predictivePopTransitionSpec: AnimatedContentTransitionScope<Scene<T>>.(Int) -> ContentTransform = defaultPredictivePopTransitionSpec(), entryProvider: (key: T) -> NavEntry<T>, ) 😱
45. NavDisplay( backStack = backStack, //.. )
46. require(backStack.isNotEmpty()) { "NavDisplay backstack cannot be empty" } val entries: List<NavEntry> = rememberDecoratedNavEntries( backStack = backStack, entryDecorators = entryDecorators, entryProvider = entryProvider, ) NavDisplay( entries = entries, sceneStrategies = sceneStrategies, sceneDecoratorStrategies = sceneDecoratorStrategies, sharedTransitionScope = sharedTransitionScope, modifier = modifier, contentAlignment = contentAlignment, sizeTransform = sizeTransform, transitionSpec = transitionSpec, popTransitionSpec = popTransitionSpec, predictivePopTransitionSpec = predictivePopTransitionSpec, onBack = onBack, )
47. require(backStack.isNotEmpty()) { "NavDisplay backstack cannot be empty" } val entries: List<NavEntry> = rememberDecoratedNavEntries( backStack = backStack, entryDecorators = entryDecorators, entryProvider = entryProvider, ) NavDisplay( entries = entries, sceneStrategies = sceneStrategies, sceneDecoratorStrategies = sceneDecoratorStrategies, sharedTransitionScope = sharedTransitionScope, modifier = modifier, contentAlignment = contentAlignment, sizeTransform = sizeTransform, transitionSpec = transitionSpec, popTransitionSpec = popTransitionSpec, predictivePopTransitionSpec = predictivePopTransitionSpec, onBack = onBack, )
48. require(backStack.isNotEmpty()) { "NavDisplay backstack cannot be empty" } val entries: List<NavEntry> = rememberDecoratedNavEntries( backStack = backStack, entryDecorators = entryDecorators, entryProvider = entryProvider, ) NavDisplay( entries = entries, sceneStrategies = sceneStrategies, sceneDecoratorStrategies = sceneDecoratorStrategies, sharedTransitionScope = sharedTransitionScope, modifier = modifier, contentAlignment = contentAlignment, sizeTransform = sizeTransform, transitionSpec = transitionSpec, popTransitionSpec = popTransitionSpec, predictivePopTransitionSpec = predictivePopTransitionSpec, onBack = onBack, )
49. remember DecoratedNavEntries
50. val entries = backStack.map { key -> entryProvider.invoke(key) }
51. Attach additional responsibilities to an object dynamically. Decorators provide a flexible alternative to subclassing for extending functionality. — Design Patterns: Elements of Reusable Object-Oriented Software
52. val decorator = NavEntryDecorator<NavKey> { entry -> entry.Content() }
53. val analyticsDecorator = NavEntryDecorator<NavKey> { entry -> val contentKey = entry.contentKey LifecycleStartEffect(analytics, contentKey) { val tracker = analytics.startTrackingTimeOnScreen(contentKey) onStopOrDispose { tracker.stopTrackingTimeOnScreen()} } entry.Content() }
54. val analyticsDecorator = NavEntryDecorator<NavKey> { entry -> val contentKey = entry.contentKey LifecycleStartEffect(analytics, contentKey) { val tracker = analytics.startTrackingTimeOnScreen(contentKey) onStopOrDispose { tracker.stopTrackingTimeOnScreen()} } entry.Content() }
55. NavEntryDecorator( decorate = { entry -> entry.Content() } )
56. NavEntryDecorator( onPop = { contentKey -> }, decorate = { entry -> entry.Content() } )
57. NavDisplay( //.. entryDecorators: List<NavEntryDecorator<T>> = listOf(rememberSaveableStateHolderNavEntryDecorator()), //.. )
58. NavDisplay( //.. entryDecorators: List<NavEntryDecorator<T>> = listOf(rememberSaveableStateHolderNavEntryDecorator()), //.. )
59. NavEntryDecorator( onPop = { contentKey -> }, decorate = { entry -> entry.Content() } )
60. NavEntryDecorator( onPop = { contentKey -> saveableStateHolder.removeState(contentKey) }, decorate = { entry -> saveableStateHolder.SaveableStateProvider(entry.contentKey) { entry.Content() } } )
61. val backStack = rememberNavBackStack(config, Home) val entries = rememberDecoratedNavEntries( backStack = backStack, entryDecorators = listOf(rememberSaveableStateHolderNavEntryDecorator()), entryProvider = entryProvider {..} ) NavDisplay( entries = entries, )
62. val backStack = rememberNavBackStack(config, Home) val entries = rememberDecoratedNavEntries( backStack = backStack, entryDecorators = listOf(rememberSaveableStateHolderNavEntryDecorator()), entryProvider = entryProvider {..} ) NavDisplay( entries = entries, )
63. val backStack = rememberNavBackStack(config, Home) val entries = rememberDecoratedNavEntries( backStack = backStack, entryDecorators = listOf(rememberSaveableStateHolderNavEntryDecorator()), entryProvider = entryProvider {..} ) NavDisplay( entries = entries, )
64. val backStack = rememberNavBackStack(config, Home) val entries = rememberDecoratedNavEntries( backStack = backStack, entryDecorators = listOf(rememberSaveableStateHolderNavEntryDecorator()), entryProvider = entryProvider {..} ) NavDisplay( entries = entries, )
65. val backStack = rememberNavBackStack(config, Home) val entries = rememberDecoratedNavEntries( backStack = backStack, entryDecorators = listOf(rememberSaveableStateHolderNavEntryDecorator()), entryProvider = entryProvider {..} ) NavDisplay( entries = entries, onBack = { backStack.removeLastOrNull() } )
66. Decorator State BackStack A Home Profile("Ian") Profile State Home State Initial State
67. Decorator State BackStack A Home Profile State Home State Pop Key onPopped()
68. Multiple BackStack BackStack B BackStack A Home Profile("Ian") Settings
69. val homeBackStack = rememberNavBackStack(config, Home) val chatBackStack = rememberNavBackStack(config, ChatList) var selectedTab by remember { mutableStateOf(HomeTab) } NavDisplay( backStack = when (selectedTab) { is HomeTab -> homeBackStack is ChatTab -> chatBackStack }, //.. )
70. val homeBackStack = rememberNavBackStack(config, Home) val homeEntries = rememberDecoratedNavEntries(homeBackStack, entryProvider, entryDecorators = listOf(rememberSaveableStateHolderNavEntryDecorator()), ) val chatBackStack = rememberNavBackStack(config, ChatList) val chatEntries = rememberDecoratedNavEntries(chatBackStack, entryProvider, entryDecorators = listOf(rememberSaveableStateHolderNavEntryDecorator()), ) var selectedTab by remember { mutableStateOf(HomeTab) } NavDisplay( entries = when (selectedTab) { is HomeTab -> homeEntries is ChatTab -> chatEntries }, onBack = { when (selectedTab) { is HomeTab -> homeBackStack.removeLastOrNull() is ChatTab -> chatBackStack.removeLastOrNull() )
71. val homeBackStack = rememberNavBackStack(config, Home) val homeEntries = rememberDecoratedNavEntries(homeBackStack, entryProvider, entryDecorators = listOf(rememberSaveableStateHolderNavEntryDecorator()), ) val chatBackStack = rememberNavBackStack(config, ChatList) val chatEntries = rememberDecoratedNavEntries(chatBackStack, entryProvider, entryDecorators = listOf(rememberSaveableStateHolderNavEntryDecorator()), ) var selectedTab by remember { mutableStateOf(HomeTab) } NavDisplay( entries = when (selectedTab) { is HomeTab -> homeEntries is ChatTab -> chatEntries }, onBack = { when (selectedTab) { is HomeTab -> homeBackStack.removeLastOrNull() is ChatTab -> chatBackStack.removeLastOrNull() )
72. NavDisplay( entries: List<NavEntry<T>>, modifier: Modifier = Modifier, contentAlignment: Alignment = Alignment.TopStart, sceneStrategies: List<SceneStrategy<T>> = listOf(SinglePaneSceneStrategy()), sceneDecoratorStrategies: List<SceneDecoratorStrategy<T>> = emptyList(), sharedTransitionScope: SharedTransitionScope? = null, sizeTransform: SizeTransform? = null, transitionSpec: AnimatedContentTransitionScope<Scene<T>>.() -> ContentTransform = defaultTransitionSpec(), popTransitionSpec: AnimatedContentTransitionScope<Scene<T>>.() -> ContentTransform = defaultPopTransitionSpec(), predictivePopTransitionSpec: AnimatedContentTransitionScope<Scene<T>>.(@NavigationEvent.SwipeEdge Int) -> ContentTransform = defaultPredictivePopTransitionSpec(), onBack: () -> Unit, )
73. NavDisplay( entries: List<NavEntry<T>>, modifier: Modifier = Modifier, contentAlignment: Alignment = Alignment.TopStart, sceneStrategies: List<SceneStrategy<T>> = listOf(SinglePaneSceneStrategy()), sceneDecoratorStrategies: List<SceneDecoratorStrategy<T>> = emptyList(), sharedTransitionScope: SharedTransitionScope? = null, sizeTransform: SizeTransform? = null, transitionSpec: AnimatedContentTransitionScope<Scene<T>>.() -> ContentTransform = defaultTransitionSpec(), popTransitionSpec: AnimatedContentTransitionScope<Scene<T>>.() -> ContentTransform = defaultPopTransitionSpec(), predictivePopTransitionSpec: AnimatedContentTransitionScope<Scene<T>>.(@NavigationEvent.SwipeEdge Int) -> ContentTransform = defaultPredictivePopTransitionSpec(), onBack: () -> Unit, )
74. require(entries.isNotEmpty()) { "NavDisplay entries cannot be empty" } val sceneState = rememberSceneState(entries, strategies, decoratorStrategies, sharedTransitionScope, onBack) // Predictive Back Handling val navigationEventState = rememberNavigationEventState(sceneState) NavigationBackHandler(sceneState, navigationEventState, onBackCompleted = onBack) NavDisplay( sceneState, navigationEventState, modifier, contentAlignment, sizeTransform, transitionSpec, popTransitionSpec, predictivePopTransitionSpec, )
75. require(entries.isNotEmpty()) { "NavDisplay entries cannot be empty" } val sceneState = rememberSceneState(entries, strategies, decoratorStrategies, sharedTransitionScope, onBack) // Predictive Back Handling val navigationEventState = rememberNavigationEventState(sceneState) NavigationBackHandler(sceneState, navigationEventState, onBackCompleted = onBack) NavDisplay( sceneState, navigationEventState, modifier, contentAlignment, sizeTransform, transitionSpec, popTransitionSpec, predictivePopTransitionSpec, )
76. require(entries.isNotEmpty()) { "NavDisplay entries cannot be empty" } val sceneState = rememberSceneState(entries, strategies, decoratorStrategies, sharedTransitionScope, onBack) // Predictive Back Handling val navigationEventState = rememberNavigationEventState(sceneState) NavigationBackHandler(sceneState, navigationEventState, onBackCompleted = onBack) NavDisplay( sceneState, navigationEventState, modifier, contentAlignment, sizeTransform, transitionSpec, popTransitionSpec, predictivePopTransitionSpec, )
77. require(entries.isNotEmpty()) { "NavDisplay entries cannot be empty" } val sceneState = rememberSceneState(entries, strategies, decoratorStrategies, sharedTransitionScope, onBack) // Predictive Back Handling val navigationEventState = rememberNavigationEventState(sceneState) NavigationBackHandler(sceneState, navigationEventState, onBackCompleted = onBack) NavDisplay( sceneState, navigationEventState, modifier, contentAlignment, sizeTransform, transitionSpec, popTransitionSpec, predictivePopTransitionSpec, )
78. require(entries.isNotEmpty()) { "NavDisplay entries cannot be empty" } val sceneState = rememberSceneState(entries, strategies, decoratorStrategies, sharedTransitionScope, onBack) // Predictive Back Handling val navigationEventState = rememberNavigationEventState(sceneState) NavigationBackHandler(sceneState, navigationEventState, onBackCompleted = onBack) NavDisplay( sceneState, navigationEventState, modifier, contentAlignment, sizeTransform, transitionSpec, popTransitionSpec, predictivePopTransitionSpec, )
79. rememberSceneState
81. Global UI NavDisplay Global UI
82. NavDisplay Global UI Global UI
83. NavDisplay Conditional Shared UI Entry Owned Shared UI
84. Conditional Shared UI NavEntry. Content()
85. Conditional Shared UI NavEntry. Content() SinglePane Scene
86. SinglePane Scene NavEntry. Content() Scene Decorator
87. Scene Decorator SinglePane Scene NavEntry. Content() NavDisplay
88. data class SinglePaneScene<T : Any>( override val key: Any, val entry: NavEntry<T>, override val previousEntries: List<NavEntry<T>>, ) : Scene<T> { override val entries: List<NavEntry<T>> = listOf(entry) override val content: @Composable () -> Unit = { entry.Content() } }
89. data class SinglePaneScene<T : Any>( override val key: Any, val entry: NavEntry<T>, override val previousEntries: List<NavEntry<T>>, ) : Scene<T> { override val entries: List<NavEntry<T>> = listOf(entry) override val content: @Composable () -> Unit = { entry.Content() } }
90. data class SinglePaneScene<T : Any>( override val key: Any, val entry: NavEntry<T>, override val previousEntries: List<NavEntry<T>>, ) : Scene<T> { override val entries: List<NavEntry<T>> = listOf(entry) override val content: @Composable () -> Unit = { entry.Content() } }
91. data class SinglePaneScene<T : Any>( override val key: Any, val entry: NavEntry<T>, override val previousEntries: List<NavEntry<T>>, ) : Scene<T> { override val entries: List<NavEntry<T>> = listOf(entry) override val content: @Composable () -> Unit = { entry.Content() } }
92. Yes Yes Render Scene2 Render Scene1 NavEntries Scene Strategy NavDisplay SceneStrategy1 SceneStrategy2 SceneStrategy3 No No Render Scene3 Can create Scene 1 ? Can create Scene 2 ?
93. Yes Render Scene2 NavEntries Scene Strategy NavDisplay SceneStrategy2 SceneStrategy3 No No Render Scene3 Can create Scene 2 ? Yes Render Scene1 SceneStrategy1 Can create Scene 1 ?
94. Yes Yes Render Scene2 Render Scene1 NavEntries Scene Strategy NavDisplay SceneStrategy1 SceneStrategy2 SceneStrategy3 No No Render Scene3 Can create Scene 1 ? Can create Scene 2 ?
95. public class SinglePaneSceneStrategy<T : Any> : SceneStrategy<T> { override fun SceneStrategyScope<T>.calculateScene( entries: List<NavEntry<T>>, ): Scene<T> { return SinglePaneScene( key = entries.last().contentKey, entry = entries.last(), previousEntries = entries.dropLast(1), ) } }
96. public class SinglePaneSceneStrategy<T : Any> : SceneStrategy<T> { override fun SceneStrategyScope<T>.calculateScene( entries: List<NavEntry<T>>, ): Scene<T> { return SinglePaneScene( key = entries.last().contentKey, entry = entries.last(), previousEntries = entries.dropLast(1), ) } }
97. public class SinglePaneSceneStrategy<T : Any> : SceneStrategy<T> { override fun SceneStrategyScope<T>.calculateScene( entries: List<NavEntry<T>>, ): Scene<T> { return SinglePaneScene( key = entries.last().contentKey, entry = entries.last(), previousEntries = entries.dropLast(1), ) } }
98. public class SinglePaneSceneStrategy<T : Any> : SceneStrategy<T> { override fun SceneStrategyScope<T>.calculateScene( entries: List<NavEntry<T>>, ): Scene<T> { return SinglePaneScene( key = entries.last().contentKey, entry = entries.last(), previousEntries = entries.dropLast(1), ) } }
99. Return Scene calculateScene() SinglePaneScene
100. Return Scene calculateScene() SinglePaneScene For Wear OS: SwipeDismissableScene
101. Device state? Return Scene calculateScene() Entry opted in? Invalid Valid Return null No Yes Custom Scenes
102. fun <T : Any> rememberTwoPaneSceneStrategy(): TwoPaneSceneStrategy<T> { val windowSizeClass = currentWindowAdaptiveInfoV2().windowSizeClass return remember(windowSizeClass) { TwoPaneSceneStrategy(windowSizeClass) } } class TwoPaneSceneStrategy<T : Any>( val windowSizeClass: WindowSizeClass, ) : SceneStrategy<T> { override fun SceneStrategyScope<T>.calculateScene( entries: List<NavEntry<T>>, ): Scene<T>? { if (!windowSizeClass.isWidthAtLeastBreakpoint(LOWER_BOUND)) return null return TwoPaneScene(..) // Now return the Scene. } }
103. fun <T : Any> rememberTwoPaneSceneStrategy(): TwoPaneSceneStrategy<T> { val windowSizeClass = currentWindowAdaptiveInfoV2().windowSizeClass return remember(windowSizeClass) { TwoPaneSceneStrategy(windowSizeClass) } } class TwoPaneSceneStrategy<T : Any>( val windowSizeClass: WindowSizeClass, ) : SceneStrategy<T> { override fun SceneStrategyScope<T>.calculateScene( entries: List<NavEntry<T>>, ): Scene<T>? { if (!windowSizeClass.isWidthAtLeastBreakpoint(LOWER_BOUND)) return null return TwoPaneScene(..) // Now return the Scene. } }
104. entry<Home>( metadata = //.. ) { // Composable content }
105. entry<Home>( metadata = TwoPaneScene.twoPane() ) { // Composable content }
106. class TwoPaneScene<T : Any>(..) : Scene<T> { //.. companion object { fun twoPane() = metadata { put(TwoPaneKey, true) } } } object TwoPaneKey : NavMetadataKey<Boolean>
107. override fun SceneStrategyScope<T>.calculateScene( entries: List<NavEntry<T>>, ): Scene<T>? { if (!windowSizeClass.isWidthAtLeastBreakpoint(LOWER_BOUND)) return null val lastTwoEntries = entries.takeLast(2) val optedIn = lastTwoEntries.size == 2 && lastTwoEntries.all { entry -> TwoPaneKey in entry.metadata } if (!optedIn) return null return TwoPaneScene(...) // Now return the Scene. } }
108. override fun SceneStrategyScope<T>.calculateScene( entries: List<NavEntry<T>>, ): Scene<T>? { if (!windowSizeClass.isWidthAtLeastBreakpoint(LOWER_BOUND)) return null val lastTwoEntries = entries.takeLast(2) val optedIn = lastTwoEntries.size == 2 && lastTwoEntries.all { entry -> TwoPaneKey in entry.metadata } if (!optedIn) return null return TwoPaneScene(...) // Now return the Scene. } }
109. SinglePane Scene NavDisplay Entry #2
110. NavDisplay ListDetail Scene Entry #2 Entry #1
111. NavDisplay ListDetail Scene Entry #2 Entry #1 Conditional Shared UI
112. class BottomNavSceneDecoratorStrategy<T : Any> : SceneDecoratorStrategy<T> { override fun SceneDecoratorStrategyScope<T>.decorateScene( scene: Scene<T>, ): Scene<T> { // If the scene provides metadata for a bottom nav display it. if (scene.metadata.containsKey(NAV_BAR)) { return BottomNavScene(scene) } return scene } }
113. class BottomNavSceneDecoratorStrategy<T : Any> : SceneDecoratorStrategy<T> { override fun SceneDecoratorStrategyScope<T>.decorateScene( scene: Scene<T>, ): Scene<T> { // If the scene provides metadata for a bottom nav display it. if (scene.metadata.containsKey(NAV_BAR)) { return BottomNavScene(scene) } return scene } }
114. class BottomNavSceneDecoratorStrategy<T : Any> : SceneDecoratorStrategy<T> { override fun SceneDecoratorStrategyScope<T>.decorateScene( scene: Scene<T>, ): Scene<T> { // If the scene provides metadata for a bottom nav display it. if (scene.metadata.containsKey(NAV_BAR)) { return BottomNavScene(scene) } return scene } }
115. class BottomNavSceneDecoratorStrategy<T : Any> : SceneDecoratorStrategy<T> { override fun SceneDecoratorStrategyScope<T>.decorateScene( scene: Scene<T>, ): Scene<T> { // If the scene provides metadata for a bottom nav display it. if (scene.metadata.containsKey(NAV_BAR)) { return BottomNavScene(scene) } return scene } } Calls scene.content()
117. val sceneState = rememberSceneState( entries, sceneStrategies, sceneDecoratorStrategies, sharedTransitionScope, onBack, )
118. val sceneState = rememberSceneState( entries, sceneStrategies, sceneDecoratorStrategies, sharedTransitionScope, onBack, )
119. val sceneState = rememberSceneState( entries, sceneStrategies, sceneDecoratorStrategies, sharedTransitionScope, onBack, )
120. SharedTransitionLayout { val sharedTransitionScope = this }
121. SharedTransitionLayout { val sharedTransitionScope = this }
122. val sceneState = rememberSceneState( entries, sceneStrategies, sceneDecoratorStrategies, sharedTransitionScope, onBack, )
123. val sceneState = rememberSceneState( entries, sceneStrategies, sceneDecoratorStrategies, sharedTransitionScope, onBack, )
124. Home (NavKey) ChatList (NavKey) ChatDetails (NavKey)
125. Home (NavKey) ChatList (NavKey) ChatDetails (NavKey) SinglePaneScene (Home content) ListDetailScene (ChatList + ChatDetails) 2 NavKeys to one Scene!
126. val sceneState = rememberSceneState(..)
127. val navigationEventState = rememberNavigationEventState(sceneState)
128. NavigationBackHandler( sceneState, navigationEventState, onBackCompleted = onBack, )
129. val sceneState = rememberSceneState(..) val navigationEventState = rememberNavigationEventState(sceneState) NavigationBackHandler(sceneState, navigationEventState, onBack) NavDisplay( sceneState, navigationEventState, modifier, contentAlignment, sizeTransform, transitionSpec, popTransitionSpec, predictivePopTransitionSpec, )
130. val sceneState = rememberSceneState(..) val navigationEventState = rememberNavigationEventState(sceneState) NavigationBackHandler(sceneState, navigationEventState, onBack) NavDisplay( sceneState, navigationEventState, modifier, contentAlignment, sizeTransform, transitionSpec, popTransitionSpec, predictivePopTransitionSpec, )
131. val sceneState = rememberSceneState(..) val navigationEventState = rememberNavigationEventState(sceneState) NavigationBackHandler(sceneState, navigationEventState, onBack) NavDisplay( sceneState, navigationEventState, modifier, contentAlignment, sizeTransform, transitionSpec, popTransitionSpec, predictivePopTransitionSpec, )
132. val sceneState = rememberSceneState(..) val navigationEventState = rememberNavigationEventState(sceneState) NavigationBackHandler(sceneState, navigationEventState, onBack) NavDisplay( sceneState, navigationEventState, modifier, contentAlignment, sizeTransform, transitionSpec, popTransitionSpec, predictivePopTransitionSpec, )
133. NavDisplay (again)
134. val sceneState = rememberSceneState(...) val navigationEventState = rememberNavigationEventState(sceneState) NavigationBackHandler(sceneState, navigationEventState, onBack) NavDisplay( sceneState, navigationEventState, modifier, contentAlignment, sizeTransform, transitionSpec, popTransitionSpec, predictivePopTransitionSpec, ) True to its name!
135. Box { sceneState.currentScene.content() }
136. AnimatedContent( targetState = sceneState.currentScene, modifier = modifier, transitionSpec = transitionSpec, contentAlignment = contentAlignment, contentKey = { scene -> scene.key } ) { targetScene -> targetScene.content() }
137. AnimatedContent( targetState = sceneState.currentScene, modifier = modifier, transitionSpec = transitionSpec, contentAlignment = contentAlignment, contentKey = { scene -> scene.key } ) { targetScene -> targetScene.content() }
138. What else?
139. SeekableTransitionState What else?
140. SeekableTransitionState isPop What else?
141. SeekableTransitionState isPop zIndex What else?
142. SeekableTransitionState isPop zIndex LifecycleOwner What else?
143. SeekableTransitionState isPop zIndex LifecycleOwner OverlayScene What else?
144. val backStack = rememberNavBackStack(config, Home) NavDisplay( backStack = backStack, entryProvider = entryProvider {..} )
145. val backStack = rememberNavBackStack(config, Home) val entries = rememberDecoratedNavEntries( backStack = backStack, entryDecorators = listOf(..), entryProvider = entryProvider {..} ) NavDisplay( entries = entries, onBack = {..} )
146. val backStack = rememberNavBackStack(config, Home) val entries = rememberDecoratedNavEntries( backStack = backStack, entryDecorators = listOf(..), entryProvider = entryProvider {..} ) val sceneState = rememberSceneState(..) val navigationEventState = rememberNavigationEventState(sceneState) NavigationBackHandler(sceneState, navigationEventState, onBackCompleted = {..}) NavDisplay( sceneState, navigationEventState )
147. val backStack = rememberNavBackStack(config, Home) NavDisplay( backStack = backStack, entryProvider = entryProvider {..} )
148. goo.gle/nav3 Ian Lake Software Engineer Marcello Galhardo Software Engineer
149. Thank You, and Donʼt Forget to Vote 🦋 @ianlake.bsky.social 🦋 @marcellogalhardo.dev