Compose Multiplatform: App Navigation Guide in Jetpack Compose

Jetpack Compose, Google’s modern UI toolkit, has revolutionized Android app development. With the introduction of Compose Multiplatform, its capabilities now extend beyond Android, allowing developers to build applications for iOS, desktop, and web platforms using a single codebase. Efficient navigation is critical to a smooth user experience, and this is even more relevant in multiplatform applications. This article delves into how to implement Compose Multiplatform app navigation in Jetpack Compose, providing detailed code samples and best practices to ensure seamless navigation across different platforms.

What is Compose Multiplatform?

Compose Multiplatform is a declarative UI framework that enables developers to create cross-platform applications with a single codebase. Based on Kotlin and Jetpack Compose, it facilitates UI development across Android, iOS, desktop (JVM), and web, streamlining the development process and enhancing code reusability.

Why is Navigation Important in Compose Multiplatform?

Effective navigation is key to a good user experience. In multiplatform applications, consistent navigation across various platforms is crucial to maintain user familiarity and satisfaction. Jetpack Compose, with its navigation components, offers a unified way to handle navigation in Compose Multiplatform apps.

Setting Up Navigation in Compose Multiplatform

Step 1: Add Dependencies

To get started, you need to include the necessary dependencies in your build.gradle.kts file. For Compose Multiplatform, the dependencies might slightly vary based on your specific needs and the target platforms. Here’s a basic setup:

dependencies {
    implementation(compose.ui)
    implementation(compose.runtime)
    implementation(compose.material)

    // Navigation dependencies
    implementation("androidx.navigation:navigation-compose:2.5.3")

    // Other dependencies based on target platforms
    // For Android
    androidMainImplementation(compose.uiToolingPreview)
    androidMainImplementation("androidx.core:core-ktx:1.9.0")
    androidMainImplementation("androidx.appcompat:appcompat:1.6.1")
    androidMainImplementation("androidx.activity:activity-compose:1.8.2")
    androidMainImplementation("androidx.compose.ui:ui-tooling-preview:1.6.4")

    // For iOS, Desktop, and Web, include relevant platform-specific dependencies
}

Step 2: Define Navigation Graph

A navigation graph defines the routes your application can navigate to. In Compose, this is done using the NavHost and NavController.

import androidx.compose.runtime.Composable
import androidx.navigation.compose.rememberNavController
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable

sealed class Screen(val route: String) {
    object Home : Screen("home")
    object Details : Screen("details")
}

@Composable
fun AppNavigation() {
    val navController = rememberNavController()

    NavHost(navController = navController, startDestination = Screen.Home.route) {
        composable(Screen.Home.route) {
            HomeScreen(navController = navController)
        }
        composable(Screen.Details.route) {
            DetailsScreen()
        }
    }
}

In this example:

• Screen is a sealed class defining possible routes in the app.
• AppNavigation is a composable function that sets up the navigation host.
• rememberNavController creates and retains the navigation controller across recompositions.
• NavHost links the NavController with the navigation graph.
• composable defines the composables associated with each route.

Step 3: Implement Screens

Create composable functions for each screen in your application. These composables define the UI for each route.

import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.navigation.NavController

@Composable
fun HomeScreen(navController: NavController) {
    Column {
        Text("Home Screen")
        Button(onClick = { navController.navigate(Screen.Details.route) }) {
            Text("Go to Details")
        }
    }
}

@Composable
fun DetailsScreen() {
    Text("Details Screen")
}

In the HomeScreen composable, the Button navigates to the DetailsScreen using navController.navigate(Screen.Details.route).

Step 4: Navigation with Arguments

Passing arguments between screens is a common requirement. Compose Navigation supports this using placeholders in the route and navArgument.

import androidx.compose.runtime.Composable
import androidx.navigation.NavType
import androidx.navigation.compose.composable
import androidx.navigation.navArgument

sealed class Screen(val route: String) {
    object Home : Screen("home")
    object Profile : Screen("profile/{userId}") {
        fun createRoute(userId: Int): String = "profile/$userId"
    }
}

@Composable
fun AppNavigation() {
    val navController = rememberNavController()

    NavHost(navController = navController, startDestination = Screen.Home.route) {
        composable(Screen.Home.route) {
            HomeScreen(navController = navController)
        }
        composable(
            route = Screen.Profile.route,
            arguments = listOf(navArgument("userId") { type = NavType.IntType })
        ) { entry ->
            val userId = entry.arguments?.getInt("userId")
            ProfileScreen(userId = userId)
        }
    }
}

@Composable
fun HomeScreen(navController: NavController) {
    Column {
        Text("Home Screen")
        Button(onClick = { navController.navigate(Screen.Profile.createRoute(123)) }) {
            Text("Go to Profile")
        }
    }
}

@Composable
fun ProfileScreen(userId: Int?) {
    Text("Profile Screen for User ID: $userId")
}

Here:

• Screen.Profile now includes a route with a placeholder for the userId.
• createRoute function constructs the route with the actual userId.
• navArgument specifies the argument type.
• In ProfileScreen, the userId is retrieved from the navigation entry arguments.

Step 5: Platform-Specific Navigation

While Jetpack Compose provides a unified way to define navigation, handling navigation in Compose Multiplatform sometimes requires platform-specific adjustments. For instance, iOS might require using custom transitions or navigation patterns.

// Common code
@Composable
expect fun PlatformSpecificNavigation(navController: NavController)

// Android implementation
@Composable
actual fun PlatformSpecificNavigation(navController: NavController) {
    // Android-specific navigation logic
}

// iOS implementation (using Skiko or similar)
@Composable
actual fun PlatformSpecificNavigation(navController: NavController) {
    // iOS-specific navigation logic using custom transitions or navigation controllers
}

By using expect and actual, you can define a common interface for navigation and provide platform-specific implementations as needed.

Best Practices for Navigation in Compose Multiplatform

• Centralize Navigation Logic: Keep navigation logic in a dedicated composable function to maintain clarity and reusability.
• Use Sealed Classes for Routes: Define routes as sealed classes to ensure type safety and discoverability.
• Handle Arguments Properly: Use navArgument and proper argument types to pass data between screens safely.
• Implement Platform-Specific Adjustments: Use expect/actual for navigation elements that require platform-specific handling.
• Test Thoroughly: Ensure navigation works seamlessly on all target platforms through comprehensive testing.

Conclusion

Implementing Compose Multiplatform app navigation in Jetpack Compose involves a combination of shared navigation logic and platform-specific adjustments. By leveraging Jetpack Compose’s navigation components, developers can create a consistent and seamless user experience across Android, iOS, desktop, and web platforms. Centralizing navigation logic, handling arguments effectively, and making platform-specific adjustments are key to building robust and user-friendly Compose Multiplatform applications.