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
- 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.
