diff --git a/docs/extensions/compose.md b/docs/extensions/compose.md index eacbd265e..fa32c18fc 100644 --- a/docs/extensions/compose.md +++ b/docs/extensions/compose.md @@ -80,6 +80,22 @@ fun main() { You can find the `runOnUiThread` method [here](https://github.com/arkivanov/Decompose/blob/master/sample/app-desktop/src/jvmMain/kotlin/com/arkivanov/sample/app/Utils.kt). +## Observing the navigation state manually + +In most of the cases there is no need to manually observe the navigation state. One of the ways described in the sections below can be used instead. For instance, it's advised to use the `Children` function to display a stack of components. However, in some cases observing the navigation state manually can be useful. Every navigation model exposes its state as `Value`, which makes it possible to observe the navigation state in Compose just as any other state. + +```kotlin +import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +import com.arkivanov.decompose.extensions.compose.jetbrains.subscribeAsState + +@Composable +fun RootContent(component: RootComponent) { + val stack by component.childStack.subscribeAsState() + // Use the stack variable here +} +``` + ## Navigating between Composable components The [Child Stack](../navigation/stack/overview.md) navigation model provides [ChildStack](https://github.com/arkivanov/Decompose/blob/master/decompose/src/commonMain/kotlin/com/arkivanov/decompose/router/stack/ChildStack.kt) as `Value` that can be observed in a `Composable` component. This makes it possible to switch child `Composable` components following the `ChildStack` changes. diff --git a/docs/navigation/pages/overview.md b/docs/navigation/pages/overview.md index 4c37eca90..cad711a48 100644 --- a/docs/navigation/pages/overview.md +++ b/docs/navigation/pages/overview.md @@ -37,6 +37,10 @@ There are three steps to initialize `Child Pages`: - Initialize the `Child Pages` navigation model using the `ComponentContext#childPages` extension function and pass `PagesNavigation` into it along with other arguments. - The `childPages` function returns `Value` that can be observed in the UI. Assign the returned `Value` to another property or a variable. +### Displaying pages with Compose + +`Child Pages` state can be observed and displayed in Compose by using the `Pager` `Composable` function from the Compose extensions module provided by Decompose. Please see the [related documentation](../../extensions/compose.md#pager-like-navigation) for more information. + ## Example Here is a very basic example of a pager-like navigation: diff --git a/docs/navigation/stack/overview.md b/docs/navigation/stack/overview.md index 91c335388..37af2c9e9 100644 --- a/docs/navigation/stack/overview.md +++ b/docs/navigation/stack/overview.md @@ -29,6 +29,10 @@ There are three steps to initialize the `Child Stack`: - Initialize the `Child Stack` using the `ComponentContext#childStack` extension function and pass `StackNavigation` into it along with other arguments. - The `childStack` function returns `Value` that can be observed in the UI. Assign the returned `Value` to another property or a variable. +### Displaying the stack with Compose + +`Child Stack` state can be observed and displayed in Compose by using the `Children` `Composable` function from the Compose extensions module provided by Decompose. Please see the [related documentation](../../extensions/compose.md#navigating-between-composable-components) for more information. + ## Example Here is a very basic example of navigation between two child components: