cl3m/multiplatform-compose

A demo to show usage of Jetbrains Compose in Android and iOS.

Multiplatform Compose

A demo to show usage of Jetbrains Compose in Android and iOS. Originally a Jetpack Compose implementation with native view and yoga for iOS.

Table of contents

• Libraries
• Demos
• Troubleshooting
• Alternatives
• License

Libraries

• kotlinx coroutines
• ktor
• Jetbrains Compose (uikit experimental)
• PreCompose (for navigation)

Demos

Run the app to see a demo of compose on ios.

AsyncImage

The image composable allow url loading

AsyncImage(url = "https://loremflickr.com/320/240/ocean", modifier = Modifier.size(200.dp))

SafeArea

SafeArea.current to get PaddingValues.

DarkMode

DarkMode.current to fix dark mode on iOS.

Troubleshooting

e: java.lang.IllegalStateException: No file for ***

Compose function and CompositonLocal have to be internal and not exposed to iOS module.

Alternatives

• Compose Multiplatform by JetBrains started native support via Skia (Skiko), you can have a look at the sample. Touchlab made a demo for Droidcon NYC App It will use the compose compiler but not native component.

• Redwood Compose by Cash App. Native UI with multiplatform Compose. Use the compose compiler and native iOS component.

• Platform-Kit by IceRock based on Compose Multiplatform by JetBrains, add support via UIKit, thus use the compose compiler and native iOS component.

• multiplatform-compose This original repo, an experiment with native view and yoga for layout. You can also have a look at kmp-redux that show Compose integration with SwiftUI.

License

Copyright 2021 Clément Beffa

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

multiplatform-compose's Issues

Fitting in SwiftUI

Would it be possible to fit Swift UI into the current implementation?
From what it seems, current components are fully based on UI Kit

Although Swift UI is only supported by the newer platforms, it seems very interesting to use: it is simple yet powerful. Would it be a match?

java.lang.ArrayIndexOutOfBoundsException on start

I'm having an AOB when using the latest version when starting the application on Android (100% reproducible, repository clean)

I'm creating this issue in parallel from testing few things as well

Some contextual information :

• Android version : 12
• Model : Fold 3 / SM-F926B
• commit d9236ff
• Android Studio 2021.1.1 Patch 2

java.lang.ArrayIndexOutOfBoundsException: length=18; index=18
at androidx.compose.ui.graphics.Color.getColorSpace-impl(Color.kt:670)
at androidx.compose.ui.graphics.ColorKt.compositeOver--OWjLjI(Color.kt:559)
at androidx.compose.material.MaterialTextSelectionColorsKt.calculateContrastRatio-nb2GgbA(MaterialTextSelectionColors.kt:199)
at androidx.compose.material.MaterialTextSelectionColorsKt.calculateSelectionBackgroundColor-ysEtTa8(MaterialTextSelectionColors.kt:83)
at androidx.compose.material.MaterialTextSelectionColorsKt.rememberTextSelectionColors(MaterialTextSelectionColors.kt:51)
at androidx.compose.material.MaterialThemeKt.MaterialTheme(MaterialTheme.kt:71)
at com.rouge41.kmm.compose.material.MaterialThemeKt.MaterialTheme(MaterialTheme.kt:14)
at com.rouge41.kmm.compose.test.ThemeKt.Theme(Theme.kt:20)
at com.rouge41.kmm.compose.test.ContentKt.Content(Content.kt:13)
at com.rouge41.kmm.compose.androidApp.MainActivity$onCreate$1.invoke(MainActivity.kt:26)
at com.rouge41.kmm.compose.androidApp.MainActivity$onCreate$1.invoke(MainActivity.kt:25)

Fullstack here : fullstack.txt

Is there any example project?

Can I somewhere find an example project implementing this multiplatform-compose?

Execution failed for task ':multiplatform-compose:cinteropYogaKitIosArm64' finished with non-zero exit value 1

I have installed cocoapod and cocoapod-generator, but get blow error.

MAC: ​

​MacBook Pro (13-inch, M1, 2020).   

Android Studio:

Android Studio Chipmunk | 2021.2.1 Canary 7
Build #AI-212.5457.46.2112.8043657, built on January 5, 2022
Runtime version: 11.0.12+0-b1504.28-7817840 aarch64
VM: OpenJDK 64-Bit Server VM by JetBrains s.r.o.
macOS 12.1
GC: G1 Young Generation, G1 Old Generation
Memory: 4096M
Cores: 8
Registry: external.system.auto.import.disabled=true, ide.instant.shutdown=false
Non-Bundled Plugins: com.intellij.lang.jsgraphql (3.1.2), com.jetbrains.kmm (0.3.0(212-1.6.0-release-795-IJ)-132)

Error:

Execution failed for task ':multiplatform-compose:cinteropYogaKitIosArm64'.
> Process 'command '/Applications/Android Studio Preview C.app/Contents/jre/Contents/Home/bin/java'' finished with non-zero exit value 1

* Try:
Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Exception is:
org.gradle.api.tasks.TaskExecutionException: Execution failed for task ':multiplatform-compose:cinteropYogaKitIosArm64'.
	at org.gradle.api.internal.tasks.execution.ExecuteActionsTaskExecuter.lambda$executeIfValid$3(ExecuteActionsTaskExecuter.java:186)
	at org.gradle.internal.Try$Failure.ifSuccessfulOrElse(Try.java:268)
	at org.gradle.api.internal.tasks.execution.ExecuteActionsTaskExecuter.executeIfValid(ExecuteActionsTaskExecuter.java:184)
	at org.gradle.api.internal.tasks.execution.ExecuteActionsTaskExecuter.execute(ExecuteActionsTaskExecuter.java:173)
	at org.gradle.api.internal.tasks.execution.CleanupStaleOutputsExecuter.execute(CleanupStaleOutputsExecuter.java:109)
	at org.gradle.api.internal.tasks.execution.FinalizePropertiesTaskExecuter.execute(FinalizePropertiesTaskExecuter.java:46)
	at org.gradle.api.internal.tasks.execution.ResolveTaskExecutionModeExecuter.execute(ResolveTaskExecutionModeExecuter.java:62)
	at org.gradle.api.internal.tasks.execution.SkipTaskWithNoActionsExecuter.execute(SkipTaskWithNoActionsExecuter.java:57)
	at org.gradle.api.internal.tasks.execution.SkipOnlyIfTaskExecuter.execute(SkipOnlyIfTaskExecuter.java:56)
	at org.gradle.api.internal.tasks.execution.CatchExceptionTaskExecuter.execute(CatchExceptionTaskExecuter.java:36)
	at org.gradle.api.internal.tasks.execution.EventFiringTaskExecuter$1.executeTask(EventFiringTaskExecuter.java:77)
	at org.gradle.api.internal.tasks.execution.EventFiringTaskExecuter$1.call(EventFiringTaskExecuter.java:55)
	at org.gradle.api.internal.tasks.execution.EventFiringTaskExecuter$1.call(EventFiringTaskExecuter.java:52)
	at org.gradle.internal.operations.DefaultBuildOperationRunner$CallableBuildOperationWorker.execute(DefaultBuildOperationRunner.java:200)
	at org.gradle.internal.operations.DefaultBuildOperationRunner$CallableBuildOperationWorker.execute(DefaultBuildOperationRunner.java:195)
	at org.gradle.internal.operations.DefaultBuildOperationRunner$3.execute(DefaultBuildOperationRunner.java:75)
	at org.gradle.internal.operations.DefaultBuildOperationRunner$3.execute(DefaultBuildOperationRunner.java:68)
	at org.gradle.internal.operations.DefaultBuildOperationRunner.execute(DefaultBuildOperationRunner.java:153)
	at org.gradle.internal.operations.DefaultBuildOperationRunner.execute(DefaultBuildOperationRunner.java:68)
	at org.gradle.internal.operations.DefaultBuildOperationRunner.call(DefaultBuildOperationRunner.java:62)
	at org.gradle.internal.operations.DefaultBuildOperationExecutor.lambda$call$2(DefaultBuildOperationExecutor.java:76)
	at org.gradle.internal.operations.UnmanagedBuildOperationWrapper.callWithUnmanagedSupport(UnmanagedBuildOperationWrapper.java:54)
	at org.gradle.internal.operations.DefaultBuildOperationExecutor.call(DefaultBuildOperationExecutor.java:76)
	at org.gradle.api.internal.tasks.execution.EventFiringTaskExecuter.execute(EventFiringTaskExecuter.java:52)
	at org.gradle.execution.plan.LocalTaskNodeExecutor.execute(LocalTaskNodeExecutor.java:41)
	at org.gradle.execution.taskgraph.DefaultTaskExecutionGraph$InvokeNodeExecutorsAction.execute(DefaultTaskExecutionGraph.java:411)
	at org.gradle.execution.taskgraph.DefaultTaskExecutionGraph$InvokeNodeExecutorsAction.execute(DefaultTaskExecutionGraph.java:398)
	at org.gradle.execution.taskgraph.DefaultTaskExecutionGraph$BuildOperationAwareExecutionAction.execute(DefaultTaskExecutionGraph.java:391)
	at org.gradle.execution.taskgraph.DefaultTaskExecutionGraph$BuildOperationAwareExecutionAction.execute(DefaultTaskExecutionGraph.java:377)
	at org.gradle.execution.plan.DefaultPlanExecutor$ExecutorWorker.lambda$run$0(DefaultPlanExecutor.java:127)
	at org.gradle.execution.plan.DefaultPlanExecutor$ExecutorWorker.execute(DefaultPlanExecutor.java:191)
	at org.gradle.execution.plan.DefaultPlanExecutor$ExecutorWorker.executeNextNode(DefaultPlanExecutor.java:182)
	at org.gradle.execution.plan.DefaultPlanExecutor$ExecutorWorker.run(DefaultPlanExecutor.java:124)
	at org.gradle.internal.concurrent.ExecutorPolicy$CatchAndRecordFailures.onExecute(ExecutorPolicy.java:64)
	at org.gradle.internal.concurrent.ManagedExecutorImpl$1.run(ManagedExecutorImpl.java:48)
	at org.gradle.internal.concurrent.ThreadFactoryImpl$ManagedThreadRunnable.run(ThreadFactoryImpl.java:56)
Caused by: org.gradle.process.internal.ExecException: Process 'command '/Applications/Android Studio Preview C.app/Contents/jre/Contents/Home/bin/java'' finished with non-zero exit value 1
	at org.gradle.process.internal.DefaultExecHandle$ExecResultImpl.assertNormalExitValue(DefaultExecHandle.java:414)
	at org.gradle.process.internal.DefaultJavaExecAction.execute(DefaultJavaExecAction.java:42)
	at org.gradle.process.internal.DefaultExecActionFactory.javaexec(DefaultExecActionFactory.java:168)
	at org.gradle.api.internal.project.DefaultProject.javaexec(DefaultProject.java:1156)
	at org.jetbrains.kotlin.compilerRunner.KotlinToolRunner.runViaExec(KotlinToolRunner.kt:77)
	at org.jetbrains.kotlin.compilerRunner.KotlinToolRunner.run(KotlinToolRunner.kt:73)
	at org.jetbrains.kotlin.gradle.tasks.CInteropProcess.processInterop(KotlinNativeTasks.kt:981)
``

Jetpack Canvas Graphics API

Have you considered implementing the new Canvas API for iOS? It does seem like a big project but it would be a pretty amazing API. Multi-platform drawing with a modern declarative style! I guess it could be nice to wait for Swift interop to write it in the new similar Paths and Shapes API in SwiftUI.

Builds for iOS fail when using material3

If I add compose.material3 to my project and use any of its classes in my code, it works fine on Android, but on iOS it fails with the following error message:

e: java.lang.RuntimeException: Failed to compute the detailed error message. See the root cause exception.

Shortly: The required symbol androidx.compose.material3/Surface|-7040802471905007841[0] is missing in the module or module dependencies. This could happen if the required dependency is missing in the project. Or if there is a dependency that has a different version (without the required symbol) in the project than the version (with the required symbol) that the module was initially compiled with.