Skip to content

Samples

Sample apps

There are two sample apps: Counter and Todo List.

Sample counter app

This sample demonstrates the following features: - Nested components - Routing - Reused components - State preservation (using StateKeeper) - Retaining instances (using InstanceKeeper) - Pluggable UI (Android Views, Jetpack Compose, SwiftUI, JS React)

Content: - Shared module which includes the following components: - Counter - this component just increments the counter every 250 ms. It starts counting once created and stops when destroyed. So Counter continues counting while in the back stack, unless recreated. It uses the InstanceKeeper, so counting continues after configuration changes. - CounterInnerContainer - this component contains the Counter and two Routers on the left and on the right side. Each Router displays its stack of Counters and two buttons for navigation. "Next" button pushes another Counter to the corresponding Router, "Prev" button pops the active Counter for the Router. - CounterRootComponent - this component contains the Counter, the Router of CounterInnerContainer and a button pushing another CounterInnerContainer to the stack. System back button is used for backward navigation. - Android sample app - iOS sample app - JavaScript sample app

Sample Counter Component structure

Sample Todo List app

This sample can be found in the JetBrains Compose repository here.

It demonstrates the following features: - Multiplatform: Android, iOS and Desktop - Shared JetBrains Compose UI for Android and Desktop apps - SwiftUI for iOS app - Nested components - Shared routing with view state preservation - Using Lifecycle - Multi-module structure (one component per module) - Inter-component communication (via Reaktive, just an example) - MVI using MVIKotlin - Data persistance using SQLDelight

Please refer to the sample's readme for more information.

Articles