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.

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

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.

morristech / multiplatform-compose Goto Github PK