https://kotlinlang.org logo
Join Slack
Powered by
Guys, something wrong with my questions? I find no...
# multiplatform
p
Guys, something wrong with my questions? I find no replies on the last one 😃 If I do anything wrong feel free to let me know, so I do not disturb anybody =)
m
if you share the part of your code that you're having a problem with, people might be able to help you more
anyway, if you are trying to set up navigation in compose multiplatform
if you need any further help let me know 😄
p
OK. Thank you! I'll take it into account. I would come back to my question later to revise it. =)
m
in the code that you shared the project has screens declared here AppNavigation
This is where the starting destination is coming from
however, this is a bit old approach that is not type-safe
p
And I will certainly check your answers later up)
✅ 1
Well, while going on with my investigation, feels like I've found a possible reason for my probem. Having taken a look at androidx docs (https://developer.android.com/reference/kotlin/androidx/navigation/compose/package-summary#NavHost(androidx.navigation[…]Function1,kotlin.Function1), I've found that there are several NavHost functions, one of them asks for graphs (my scenario) and one more asking for startDestination (everyone else's 😃 scenario). You can see exactly this kind of problem on mine screens. ...to be continued...
And then I thought, that there are some problems with dependencies (with what else?), and dived into comparison of mine, yours, and the other guy from github's gradle files. Well, I've found out that you and me use the same versions of compose navigation, but just for the hope it helps, I copied some deps from your files
So, here's my libs.toml:
Copy code
[versions]
androidx-lifecycle = "2.8.0"
compose-plugin = "1.6.11"
junit = "4.13.2"
kotlin = "2.0.20"
kotlinx-coroutines = "1.8.1"
compose-navigation = "2.8.0-alpha10"
koin-bom = "4.0.0"
ktor = "3.0.0-rc-1"

[libraries]
kotlin-test = { module = "org.jetbrains.kotlin:kotlin-test", version.ref = "kotlin" }
kotlin-test-junit = { module = "org.jetbrains.kotlin:kotlin-test-junit", version.ref = "kotlin" }
junit = { group = "junit", name = "junit", version.ref = "junit" }
androidx-lifecycle-viewmodel = { group = "org.jetbrains.androidx.lifecycle", name = "lifecycle-viewmodel", version.ref = "androidx-lifecycle" }
androidx-lifecycle-runtime-compose = { group = "org.jetbrains.androidx.lifecycle", name = "lifecycle-runtime-compose", version.ref = "androidx-lifecycle" }
kotlinx-coroutines-swing = { group = "org.jetbrains.kotlinx", name = "kotlinx-coroutines-swing", version.ref = "kotlinx-coroutines" }
compose-navigation = { group = "org.jetbrains.androidx.navigation", name="navigation-compose", version.ref = "compose-navigation" }

[plugins]
jetbrainsCompose = { id = "org.jetbrains.compose", version.ref = "compose-plugin" }
compose-compiler = { id = "org.jetbrains.kotlin.plugin.compose", version.ref = "kotlin" }
kotlinMultiplatform = { id = "org.jetbrains.kotlin.multiplatform", version.ref = "kotlin" }
here's my build.gradle.kts:
Copy code
import org.jetbrains.compose.desktop.application.dsl.TargetFormat
import org.jetbrains.kotlin.gradle.ExperimentalWasmDsl
import org.jetbrains.kotlin.gradle.targets.js.webpack.KotlinWebpackConfig

plugins {
    alias(libs.plugins.kotlinMultiplatform)
    alias(libs.plugins.jetbrainsCompose)
    alias(libs.plugins.compose.compiler)
}

kotlin {
    @OptIn(ExperimentalWasmDsl::class)
    wasmJs {
        moduleName = "composeApp"
        browser {
            val projectDirPath = project.projectDir.path
            commonWebpackConfig {
                outputFileName = "composeApp.js"
                devServer = (devServer ?: KotlinWebpackConfig.DevServer()).apply {
                    static = (static ?: mutableListOf()).apply {
                        // Serve sources to debug inside browser
                        add(projectDirPath)
                    }
                }
            }
        }
        binaries.executable()
    }
    
    jvm("desktop")
    
    sourceSets {
        val desktopMain by getting
        commonMain.dependencies {
            implementation(compose.runtime)
            implementation(compose.foundation)
            implementation(compose.material)
            implementation(compose.ui)
            implementation(compose.components.resources)
            implementation(compose.components.uiToolingPreview)
            implementation(libs.androidx.lifecycle.viewmodel)
            implementation(libs.androidx.lifecycle.runtime.compose)
            implementation(libs.compose.navigation)
        }
        desktopMain.dependencies {
            implementation(compose.desktop.currentOs)
            implementation(libs.kotlinx.coroutines.swing)
        }
    }
}


compose.desktop {
    application {
        mainClass = "org.example.project.MainKt"

        nativeDistributions {
            targetFormats(TargetFormat.Dmg, TargetFormat.Msi, TargetFormat.Deb)
            packageName = "org.example.project"
            packageVersion = "1.0.0"
        }
    }
}
Just to make it clear: Error message:
Copy code
e: file:///home/paulstern/docs/dev/kmp-adreg/composeApp/src/commonMain/kotlin/org/example/project/App.kt:25:13 None of the following candidates is applicable:
fun NavHost(navController: NavHostController, graph: NavGraph, modifier: Modifier = ..., contentAlignment: Alignment = ..., enterTransition: AnimatedContentTransitionScope<NavBackStackEntry>.() -> EnterTransition = ..., exitTransition: AnimatedContentTransitionScope<NavBackStackEntry>.() -> ExitTransition = ..., popEnterTransition: AnimatedContentTransitionScope<NavBackStackEntry>.() -> EnterTransition = ..., popExitTransition: AnimatedContentTransitionScope<NavBackStackEntry>.() -> ExitTransition = ...): Unit
fun NavHost(navController: NavHostController, startDestination: String, modifier: Modifier = ..., contentAlignment: Alignment = ..., route: String? = ..., enterTransition: AnimatedContentTransitionScope<NavBackStackEntry>.() -> EnterTransition = ..., exitTransition: AnimatedContentTransitionScope<NavBackStackEntry>.() -> ExitTransition = ..., popEnterTransition: AnimatedContentTransitionScope<NavBackStackEntry>.() -> EnterTransition = ..., popExitTransition: AnimatedContentTransitionScope<NavBackStackEntry>.() -> ExitTransition = ..., builder: NavGraphBuilder.() -> Unit): Unit
m
first of all, if you want to use type-safe navigation you have to annotate your screen with @Serializable sealed class AppNavigation( val route: String, val arguments: List<NamedNavArgument> ) { @Serializable data object Splash : AppNavigation( route = "Splash", arguments = emptyList() ) @Serializable data object Login : AppNavigation( route = "Login", arguments = emptyList() ) } NavHost( navController = navigator, startDestination = AppNavigation.Splash, graph = TODO() ) { }
if not
p
Oops... Looks like just misinterpretation of the error message. Fixed current code block to
Copy code
Box(modifier = Modifier.fillMaxSize()) {
            NavHost(
                navController = navigator,
                startDestination = AppNavigation.Splash.route, // Fix: unknown parameter
                modifier = Modifier.fillMaxSize()
            ) {}
        }
and now I get no error in this place. Sorry if it took too much of your attention)
m
Cool, no worries
Now you just have to define routes inside the navHost
Copy code
Box(modifier = Modifier.fillMaxSize()) {
    NavHost(
        navController = navigator,
        startDestination = AppNavigation.Splash.route, // Fix: unknown parameter
        modifier = Modifier.fillMaxSize()
    ) {
        composable(route = AppNavigation.Splash.route){
            // content of splash screen
        }
        composable(route = AppNavigation.Login.route){
            // content of login screen
        }
    }
}
p
Thank you so much! Help from a human not from a book or Web-page is invaluable!
17 Views
Open in Slack
PreviousNext
Powered by