Skip to content

Commit

Permalink
Added links from navigation docs to Compose extensions docs
Browse files Browse the repository at this point in the history
  • Loading branch information
arkivanov committed Jan 20, 2024
1 parent 6253ba7 commit 52b7b2e
Show file tree
Hide file tree
Showing 3 changed files with 24 additions and 0 deletions.
16 changes: 16 additions & 0 deletions docs/extensions/compose.md
Original file line number Diff line number Diff line change
Expand Up @@ -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<T>`, 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<ChildStack>` that can be observed in a `Composable` component. This makes it possible to switch child `Composable` components following the `ChildStack` changes.
Expand Down
4 changes: 4 additions & 0 deletions docs/navigation/pages/overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -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<ChildPages>` 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:
Expand Down
4 changes: 4 additions & 0 deletions docs/navigation/stack/overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -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<ChildStack>` 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:
Expand Down

0 comments on commit 52b7b2e

Please sign in to comment.