Multiplatform Compose

A Kotlin library to use Jetpack Compose in Android and iOS. Allow to write UI for both in Kotin. Still experimental as many compose features are not yet available.

Table of contents

• Requirements
• Installation
• Usage
• Known issues
• Troubleshooting
• Roadmap
• Contributing
• Sponsors
• License

Requirements

• Android Studio Canary
• cocoapods (gem install cocoapods)
• cocoapods-generate (gem install cocoapods-generate)

Installation

The library is not yet published to Maven Central as it is still experimental.

Usage

The simpliest code is :

@Composable
fun Content(resources: Resources) {
    Text("Hello world!")
}

A better start would be :

@Composable
fun Content(resources: Resources) {
    HelloPlatform()
}

@Composable
fun HelloPlatform() {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally) {
            Text("Hello, ${Platform().platform}!")
    }
}

More advance sample are in the demos directory of the test library.

Image

The image composable allow url loading

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

iOS Composables

HumanAppearance

Allow iOS styling such as font or global tintColor.

HumanAppearance(tintColor: Color, backgroundColor: Color?, style: TextStyle) {
    // ...
}

SafeArea

Add safe area insets to the view, works in root, TabView and NavigationView

SafeArea {
    // ...
}

Layout without the safe area, with the safe area and on android

TabView

UITabBarController for Compose

TabView {
    Tab(title = "First", image = UIImage.systemImageNamed("a.circle.fill")) {
      // ...
    }
    Tab(title = "Second", image = UIImage.systemImageNamed("a.circle.fill")) {
      // ...
    }
}

NavigationView

UINavigationController for Compose, renamed to NavHost but as additional parameter title, leadingButton and trailingButton in composable

val navController = rememberNavController()
NavHost(navController = navController, startDestination = "first") {
    composable("first", title = "First", trailingButton = Button(onClick = {}) { Text ("Edit") }) {
			SafeArea {
	    Button(onClick = { navController.navigate("second") }) { 
                // ...
            }
        }
    }
    composable("second", title = "Second") {
        SafeArea {
	    // ...
        }
    }
}

Known issues

• Jetpack Compose require Android Studio Canary and an alpha build of Gradle. There is some workaround in build.gradle.kts to make it work (testApi).
• Jetpack Compose is not supported in Kotlin Multiplatform Mobile library (KT-38694). Unfortunatly, the workaround was messing with actual/expect function and prevent the use of expect function with default value. The library now use @Suppress("ACTUAL_FUNCTION_WITH_DEFAULT_ARGUMENTS") to workaround this problem. If you use an expect function with default value and without the suppress, you will get an error function not found or java.lang.IllegalStateException: 2. expected value parameter count to be higher.
• Jetpack Compose dependencies can not be used in commonMain because they have a dependency on kotlinx-coroutines-android.
• Android Studio does not autocomplete cocoapods imported library in iosMain. Thus it is in iosx64Main and symlinked to iosArm64Main.
• Images needs currently to be included in the android and ios resources separately.
• Navigation is currently not shared in the library
• Latest Android Studio Canary shows many undefined error but everthing compile fine. It was not the case before.

Troubleshooting

cinteropYogaKitIosArm64 FAILED YogaKit module not found

You did not read the requirements. Install cocoapods-generate "gem install cocoapods-generate", invalid cache and restat Android Studio

Roadmap

• More Jetpack Compose feature support
• Better images/resources support
• UI Test with Github Actions
• Performance improvement/optimisation
• Use Compose compiler and runtime on iOS

Sponsors

No one yet, be the first sponsor!

Contributing

All development (both new features and bug fixes) is performed in the develop branch. This way master always contains the sources of the most recently released version. Use git-flow if possible.

You can start a PR with incomplete implementation to shows what you are working on. Please send PRs with bug fixes or new features to the develop branch. Documentation fixes in the markdown files are an exception to this rule. They are updated directly in master.

The develop branch is pushed to master on release.

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.