Article -1 Compose Multiplatform Moko resource integration

Boobalan Munusamy
2 min readOct 3, 2023

--

This article aims to guide you through the process of setting up Moko Resource in a Compose Multiplatform application. For a comprehensive understanding of the API, please visit the official Moko Resource page at https://github.com/icerockdev/moko-resources.

To streamline the configuration, we will provide straightforward steps to get you started. Additionally, you can watch a video tutorial for a visual walkthrough of the same process.

  1. TOML file configuration
# For famous libraries https://github.com/terrakok/kmp-awesome#-compose-ui
[versions]
moko-version = "0.23.0"

[libraries]

# For resource access
moko-classpath = {group = "dev.icerock.moko", name = "resources-generator", version.ref = "moko-version"}
moko-resource = {group = "dev.icerock.moko", name = "resources", version.ref = "moko-version"}
moko-resource-compose = {group = "dev.icerock.moko", name = "resources-compose", version.ref = "moko-version"}

[bundles]
moko-resources = ["moko-resource", "moko-resource-compose"]

2. shared’s build.gradle.kts configuration

plugins {
id ("dev.icerock.mobile.multiplatform-resources")
}

dependencies {
implementation(libs.material3)
commonMainApi(libs.bundles.moko.resources)

}
multiplatformResources {
multiplatformResourcesPackage = "com.biggboss.shared" // required
}

//Make sure your calling below function in each platform
val androidMain by getting {
dependsOn(commonMain)
}
val iosMain by creating {
dependsOn(commonMain)
}
val desktopMain by getting {
dependsOn(commonMain)
}

Open iOSApp project (iosApp.xcworkspace) in XCode and add below script in “Build Phase” by clicks on “+” -> New Run Script Phase

# Type a script or drag a script file from your workspace to insert its path.
"$SRCROOT/../gradlew" -p "$SRCROOT/../" :shared:copyFrameworkResourcesToApp \
-Pmoko.resources.PLATFORM_NAME="$PLATFORM_NAME" \
-Pmoko.resources.CONFIGURATION="$CONFIGURATION" \
-Pmoko.resources.ARCHS="$ARCHS" \
-Pmoko.resources.BUILT_PRODUCTS_DIR="$BUILT_PRODUCTS_DIR" \
-Pmoko.resources.CONTENTS_FOLDER_PATH="$CONTENTS_FOLDER_PATH"

Create strings.xml in shared project under commonMain->MR->base folder

Folder struc
<?xml version="1.0" encoding="UTF-8" ?>
<resources>
<string name="app_name">BiggBoss</string>
<string name = "title_home">Shows</string>
</resources>

That’s all, it’s time to access the resources.

import dev.icerock.moko.resources.compose.stringResource
fun SplashScreen() {
val app_name: String = stringResource(MR.strings.app_name)
var greetingText by remember { mutableStateOf("Hello, World! $app_name") }
}

Source: https://github.com/piappstudio/BiggBoss

Happy coding, please do subscribe my channel https://www.youtube.com/@piappstudio

--

--

Boobalan Munusamy

Android Lead Engineer at T-Mobile| Concentrix Catalyst | Android, AOSP, iOS, Jetpack Compose