voyager VS simple-stack-compose-integration

// composeApp/src/commonMain/kotlin/ui/screens/expenses/ExpensesScreenViewModel.kt package ui.screens.expenses import Expense import cafe.adriel.voyager.core.model.StateScreenModel import cafe.adriel.voyager.core.model.screenModelScope import io.github.oshai.kotlinlogging.KotlinLogging import kotlinx.coroutines.delay import kotlinx.coroutines.launch private val logger = KotlinLogging.logger {} /** * Base state definition for our screen */ data class ExpensesScreenState( val data: List, ) { /** * Computed property to get the avg price of the expenses */ val avgExpenses: String get() = data.map { it.price }.average().toString() } /** * View model of our screen * More about ViewModels below */ class ExpensesScreenViewModel : StateScreenModel( ExpensesScreenState( data = listOf(), ), ) { init { /** * Simulating the "API request" by adding some latency * and fake data */ screenModelScope.launch { logger.info { "Fetching expenses" } delay(3000) mutableState.value = ExpensesScreenState( data = listOf( Expense( id = "1", name = "Rent", icon = "🏠", price = 102573, ), Expense( id = "2", name = "Apple one", icon = "🍎", price = 2595, ), Expense( id = "3", name = "Netflix", icon = "📺", price = 1299, ), ) ) } } } // composeApp/src/commonMain/kotlin/ui/screens/expenses/ExpensesScreen.kt package ui.screens.expenses import Expense import androidx.compose.foundation.layout.* import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.items import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.* import androidx.compose.runtime.Composable import androidx.compose.runtime.collectAsState import androidx.compose.runtime.getValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.unit.dp import cafe.adriel.voyager.core.model.rememberScreenModel import cafe.adriel.voyager.core.screen.Screen import io.github.oshai.kotlinlogging.KotlinLogging import ui.theme.BorderRadius import ui.theme.IconSize import ui.theme.Spacing private val logger = KotlinLogging.logger {} /** * Voyager screen, since there are no params * we can define it as a plain `object` */ object ExpensesScreen : Screen { @Composable override fun Content() { /** * Instantiating our ViewModel * https://voyager.adriel.cafe/screenmodel */ val viewModel = rememberScreenModel { ExpensesScreenViewModel() } /** * More about this below, but for now, differently than JS * we handle values over time with Kotlin coroutine `Flow's` (in this case, `StateFlow`) * you can think of it as something similar to `Observables` in reactive programming */ val state by viewModel.state.collectAsState() val onExpenseClicked: (Expense) -> Unit = { logger.info { "Redirect to edit screen" } } Scaffold( topBar = { CenterAlignedTopAppBar( title = { Text("My subscriptions", style = MaterialTheme.typography.titleMedium) }, ) }, bottomBar = { BottomAppBar( contentPadding = PaddingValues(horizontal = Spacing.Large), ) { Row( modifier = Modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.SpaceBetween, ) { Column { Text( "Average expenses", style = MaterialTheme.typography.bodyLarge, ) Text( "Per month".uppercase(), style = MaterialTheme.typography.bodyMedium, ) } Text( state.avgExpenses, style = MaterialTheme.typography.labelLarge, ) } } }, ) { paddingValues -> Box(modifier = Modifier.padding(paddingValues)) { ExpenseList(state.data, onExpenseClicked) } } } } @Composable private fun ExpenseList( expenses: List, onClick: (expense: Expense) -> Unit, ) { LazyColumn( verticalArrangement = Arrangement.spacedBy(Spacing.Small_100), ) { items( items = expenses, key = { it.id }, ) { expense -> ExpenseListItem( expense = expense, onClick = { logger.info { "Clicked on ${expense.name}" } onClick(expense) }, ) } item { Spacer(Modifier.height(Spacing.Medium)) } } } @Composable private fun ExpenseListItem( expense: Expense, onClick: () -> Unit = {}, ) { Surface( modifier = Modifier .fillMaxWidth() .padding(horizontal = Spacing.Medium) .defaultMinSize(minHeight = 56.dp), onClick = onClick, shape = RoundedCornerShape(BorderRadius.small), color = MaterialTheme.colorScheme.surfaceVariant, ) { Row( modifier = Modifier .padding( horizontal = Spacing.Medium_100, vertical = Spacing.Small_100, ), verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(Spacing.Large), ) { Text( text = expense.icon ?: "", fontSize = IconSize.Medium, modifier = Modifier.defaultMinSize(minWidth = 24.dp), ) Text( text = expense.name, style = MaterialTheme.typography.bodyLarge.copy(color = MaterialTheme.colorScheme.onSurfaceVariant), modifier = Modifier.weight(1f), ) Text( text = (expense.price).toString(), style = MaterialTheme.typography.bodyLarge.copy(color = MaterialTheme.colorScheme.onSurfaceVariant), ) } } }

KMP use cases increasing, developers migrating or creating your projects to KMP, no routing system or navigation available to KMP (Except Voyager), that was the opportunity to create one.

If I were to start a project right now, I'd use https://github.com/adrielcafe/voyager although, it doesn't support Web Canvas or iOS yet I don't think.

Voyager has some bugs (apparently SavedStateHandle doesn't work and the PR is open since Nov 24), Appyx is nice but I hear it's laggy (but honestly, everything in Compose is laggy all the time, so if you use Compose, that's pretty standard tbh), I don't know enough about Navigation-Reimagined to tell you, Compose-Destinations is a codegenerator over Navigation-Compose so you drag in Accompanist-Navigation to have basic screen transitions which is pre-alpha tech.

Voyager

https://github.com/adrielcafe/voyager/issues/42 open since January

Yes, I've checked (it doesn't). I've also read AndroidScreenLifecycleOwner's source code, and I don't see a way for it to ever go to the ON_PAUSE state.

Using any of the 5 prominent community alternatives is a better approach (even though most people hoping to use the docs as if it was like, written for stable code, will muck around with their apps crashing if the user inputs a & symbol). I have this thing but I'd consider taking a look at https://github.com/adrielcafe/voyager or maybe https://github.com/olshevski/compose-navigation-reimagined

Yup, that's why we're working on https://github.com/Zhuinden/simple-stack-compose-integration/ to make it as simple as backstack.goTo(SomeScreenKey(arg1, arg2)) instead of this navController.navigateTo("some/screen&arg1=${UrlEncoder.encode(arg1.toBase64())} stuff. If you are working on an Android app that will always be on Android-only, why would you inherit limitations from Kotlin Multi-platform?

We have https://github.com/Zhuinden/simple-stack-compose-integration/ but the fact that I'd normally prefer to use fragments kinda holds it back

Simple-Stack-Compose https://github.com/Zhuinden/simple-stack-compose-integration

However, it's worth noting that thanks to a guy named @matejdro we are working on a pure-Compose version, in which setup has been reduced to

And ,yes, although not being made for Compose, also Simple stack :)

i'd love to recommend simple-stack-compose-integration but i never wrote this missing link

Using any of the 5 prominent community alternatives is a better approach (even though most people hoping to use the docs as if it was like, written for stable code, will muck around with their apps crashing if the user inputs a & symbol). I have this thing but I'd consider taking a look at https://github.com/adrielcafe/voyager or maybe https://github.com/olshevski/compose-navigation-reimagined

If you're deadset on full compose navigation I'd check out Zhuinden`s simple-stack-compose-integration

I'm almost tempted to use multiple ComposeViews, but I'm definitely not using 1 ComposeView N composables any time soon, even though technically I have the code to support it.