Modify the project

Add a new dependency

You could retrieve the date using platform-specific libraries and expected and actual declarations. But we recommend that you use this approach only when there's no Kotlin Multiplatform library available. In this case, you can rely on the kotlinx-datetime library.

To use the kotlinx-datetime library:

1. Open the gradle/libs.versions.toml file and add the kotlinx-datetime dependency to the version catalog:

   [versions] kotlinx-datetime = "0.8.0" [libraries] kotlinx-datetime = { module = "org.jetbrains.kotlinx:kotlinx-datetime", version.ref = "kotlinx-datetime" }

2. Open the shared/build.gradle.kts file and add a reference to that library entry to the section that configures the common code source set:

   kotlin { // ... sourceSets { // ... commonMain.dependencies { // ... implementation(libs.kotlinx.datetime) } } }

3. For the web target, timezone support requires the js-joda library. Add a reference to the js-joda npm package to the webApp/build.gradle.kts file:

   kotlin { // ... sourceSets { // ... commonMain.dependencies { // ... implementation(npm("@js-joda/timezone", "2.25.1")) } } }

   Adding the dependency to the webMain source set makes the library available both to the wasmJs and js targets.

4. Once the dependency is added, accept the IDE suggestion to sync the Gradle configuration or press double Shift and execute the Sync Project with Gradle Files command.

5. In the Terminal tool window, run the following command to ensure that the yarn.lock file is updated with the latest dependency versions:

   ./gradlew kotlinUpgradeYarnLock kotlinWasmUpgradeYarnLock

6. In the webApp/src/webMain/kotlin/.../main.kt file, use the @JsModule annotation to import the js-joda npm package:

   import androidx.compose.ui.ExperimentalComposeUiApi import androidx.compose.ui.window.ComposeViewport import kotlin.js.ExperimentalWasmJsInterop import kotlin.js.JsModule @OptIn(ExperimentalWasmJsInterop::class) @JsModule("@js-joda/timezone") external object JsJodaTimeZoneModule private val jsJodaTz = JsJodaTimeZoneModule @OptIn(ExperimentalComposeUiApi::class) fun main() { ComposeViewport { App() } }

Enhance the user interface

1. Open the shared/src/commonMain/kotlin/App.kt file and after the App() composable add the following function which returns a string containing the current date:

   fun todaysDate(): String { fun LocalDateTime.format() = toString().substringBefore('T') val now = Clock.System.now() val zone = TimeZone.currentSystemDefault() return now.toLocalDateTime(zone).format() }

2. Add the imports that are suggested by the IDE.

   Make sure to import the Clock class from kotlin.time, not kotlinx.datetime.

3. In the same file, modify the App() composable to include the Text() composable that invokes this function and displays the result:

   @Composable @Preview fun App() { MaterialTheme { var showContent by remember { mutableStateOf(false) } val greeting = remember { Greeting().greet() } Column( modifier = Modifier .safeContentPadding() .fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally ) { Text( text = "Today's date is ${todaysDate()}", modifier = Modifier.padding(20.dp), fontSize = 24.sp, textAlign = TextAlign.Center ) Button(onClick = { showContent = !showContent }) { Text("Click me!") } AnimatedVisibility(showContent) { Column(Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) { Image(painterResource(Res.drawable.compose_multiplatform), null) Text("Compose: $greeting") } } } } }

4. Follow the IDE's suggestions to import the missing dependencies.

   

Rerun the application

You can now rerun the application using the same run configurations for Android, iOS, desktop, and web:

Next step

In the next part of the tutorial, you'll learn new Compose Multiplatform concepts and create your own application from scratch.

Proceed to the next part

Get help

• Kotlin Slack. Get an invite and join the #multiplatform channel.

• Kotlin issue tracker. Report a new issue.