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 composeApp/build.gradle.kts file and add the dependencies to the project:

   • Add the main kotlinx-datetime dependency to the section that configures the common code source set. For simplicity, you can include the version number directly instead of adding it to the version catalog.

   • For the web target, timezone support requires the js-joda library. Add a reference to the js-joda npm package in the webMain dependencies.

   kotlin { // ... sourceSets { // ... commonMain.dependencies { // ... implementation("org.jetbrains.kotlinx:kotlinx-datetime:0.7.1") } webMain.dependencies { implementation(npm("@js-joda/timezone", "2.22.0")) } } }

2. Once the dependency is added, you're prompted to resync the project. Click the Sync Gradle Changes button to synchronize Gradle files:

3. In the Terminal tool window, run the following command:

   ./gradlew kotlinUpgradeYarnLock kotlinWasmUpgradeYarnLock

   This Gradle task ensures that the yarn.lock file is updated with the latest dependency versions.

4. In the webMain source set, 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 composeApp/src/commonMain/kotlin/App.kt file and 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. Make sure to import all the missing dependencies for the todaysDate() function from the updated packages, and opt in when prompted by the IDE.

   

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.