Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/qamarelsafadi/ComposeMultiplatform
This repository will contain instructors how you could start your first compose mutltiplatform project
https://github.com/qamarelsafadi/ComposeMultiplatform
android compose ios jetpack-compose kmm kmm-app kmm-sample kotlin kotlin-multiplatform kotlin-multiplatform-mobile kotlin-native main maintainermarch
Last synced: about 2 months ago
JSON representation
This repository will contain instructors how you could start your first compose mutltiplatform project
- Host: GitHub
- URL: https://github.com/qamarelsafadi/ComposeMultiplatform
- Owner: qamarelsafadi
- License: apache-2.0
- Created: 2023-02-24T18:52:34.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-08-26T07:42:44.000Z (over 1 year ago)
- Last Synced: 2024-07-31T20:26:42.426Z (4 months ago)
- Topics: android, compose, ios, jetpack-compose, kmm, kmm-app, kmm-sample, kotlin, kotlin-multiplatform, kotlin-multiplatform-mobile, kotlin-native, main, maintainermarch
- Language: Kotlin
- Homepage:
- Size: 4.46 MB
- Stars: 141
- Watchers: 4
- Forks: 11
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-kotlin-multiplatform - ComposeMultiplatform
README
# Compose Multiplatform
Compose
https://user-images.githubusercontent.com/30949634/236697673-dbf52629-9809-41a9-b9fd-8363ea527b99.mov
Multiplatform simplifies and accelerates UI and share it between Android, IOS, Desktop and Web.
# Repositroy
This repository will contain instructions to start your first Compose Multiplatform Project.
## Plugin
Install
[KMM](https://plugins.jetbrains.com/plugin/14936-kotlin-multiplatform-mobile)
plugin in Android Studio
## Instructions
- Create a new KMM project using the plugin above
### Setup Compose for KMM
in your `settings.gradle` file add the following dependency
```kotlin
pluginManagement {
repositories {
google()
gradlePluginPortal()
mavenCentral()
maven("https://maven.pkg.jetbrains.space/public/p/compose/dev") // this one
}
plugins {
kotlin("jvm").version("1.8.21")
kotlin("multiplatform").version("1.8.21")
kotlin("android").version("1.8.21")
id("com.android.application").version("7.4.2")
id("com.android.library").version("7.4.2")
id("org.jetbrains.compose").version("1.4.3")
}
}
```
in your `build.gradle.kts` add compose plugin
```kotlin
plugins {
//trick: for the same plugin versions in all sub-modules
id("com.android.application").version("8.2.0-alpha06").apply(false)
id("com.android.library").version("8.2.0-alpha06").apply(false)
kotlin("android").version("1.8.21").apply(false)
kotlin("multiplatform").version("1.8.21").apply(false)
}
```
now inside `shared module` `build.gradle.kts` add these two plugins
```kotlin
plugins {
kotlin("multiplatform")
id("com.android.library")
kotlin("native.cocoapods") // this
id("org.jetbrains.compose") // and this
}
```
in your `kotlin` block add the following lines
```kotlin
iosX64()
iosArm64()
iosSimulatorArm64()
cocoapods {
version = "1.0.0"
summary = "Some description for the Shared Module"
homepage = "Link to the Shared Module homepage"
ios.deploymentTarget = "14.1"
podfile = project.file("../iosApp/Podfile")
framework {
baseName = "shared"
isStatic = true
}
extraSpecAttributes["resources"] = "['src/commonMain/resources/**', 'src/iosMain/resources/**']" // this is for images
}
// in android block add these lines to support common resources
sourceSets["main"].manifest.srcFile("src/androidMain/AndroidManifest.xml")
sourceSets["main"].res.srcDirs("src/androidMain/res")
sourceSets["main"].resources.srcDirs("src/commonMain/resources")
```
now BEFORE you sync you need to make sure about the following:
- Install cocoapods
```termial
brew install cocoapods
```
- cd to iosApp and init pod
```terminal
pod init
```
- install your pods
```terminal
pod install
```
In `sourceSets`
```kotlin
sourceSets {
val commonMain by getting {
dependencies {
implementation(compose.runtime)
implementation(compose.foundation)
implementation(compose.material)
@OptIn(org.jetbrains.compose.ExperimentalComposeLibrary::class)
implementation(compose.components.resources)
}
}
val androidMain by getting {
dependencies {
api("androidx.activity:activity-compose:1.6.1")
api("androidx.appcompat:appcompat:1.6.1")
api("androidx.core:core-ktx:1.9.0")
}
}
val iosX64Main by getting
val iosArm64Main by getting
val iosSimulatorArm64Main by getting
val iosMain by getting {
dependsOn(commonMain)
iosX64Main.dependsOn(this)
iosArm64Main.dependsOn(this)
iosSimulatorArm64Main.dependsOn(this)
}
}
```
and to avoid Compose targets '[uikit]' are experimental and may have bugs! Error add this in `gradle.properties`
```groovy
org.jetbrains.compose.experimental.uikit.enabled=true
```
Sync now !
## Let the magic begin
Inside your `shared module` commonMain directory create your first Composable function to use it for Android and IOS
```kotlin
@Composable
internal fun App(){
Text(Greeting().greet())
}
```
In your `AndroidMain` make `main.android` class to use your App function
```kotlin
@Composable
fun Application(){
App()
}
```
In your `IosMain` make `main.ios` class to use your App function
```kotlin
import androidx.compose.ui.window.ComposeUIViewController
fun MainViewController() = ComposeUIViewController { App() }
```
Now go to `AndoroidApp` module to use the function we made in main.android class
```kotlin
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colors.background
) {
Application()
}
```
Next go to `IosApp` module to use the function we made in main.ios class
```swift
import shared // this important to import don't forget it!
@main
struct iOSApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
// inside your ContentView class
import SwiftUI
import shared
struct ComposeView: UIViewControllerRepresentable {
func makeUIViewController(context: Context) -> UIViewController {
Main_iosKt.MainViewController()
}
func updateUIViewController(_ uiViewController: UIViewController, context: Context) {}
}
struct ContentView: View {
var body: some View {
ComposeView()
.ignoresSafeArea(.keyboard) // Compose has own keyboard handler
}
}
```
## Run
Add this to solve dependencies conflicts in `gradle.properties`
```groovy
kotlin.native.cacheKind=none
```
now you can run your android normally, for `IOS` you need to run the following command first
```terminal
./gradlew build
./gradlew :shared:linkPodDebugFrameworkIosSimulatorArm64
```
Now open `iosApp.xcworkspace` inside xcode and run the app! or Run it inside Android Studio itself
## Resources
[JetBrains Compose](https://github.com/JetBrains/compose-jb/tree/master/tutorials/Getting_Started)
[Compose Mutliplatofrom Examples](https://github.com/JetBrains/compose-jb/tree/master/experimental/examples)
[Compose Mutliplatofrom Template](https://github.com/JetBrains/compose-multiplatform-ios-android-template)
Happy Kotlin 🚀!