Quick Preview Compose Multiplatform in Our Existing Project
Article Summary
Sinj Menarucho from KBTG took Compose Multiplatform for iOS (still in Alpha) for a test drive with an existing native project. His verdict? Promising, but not production-ready yet.
This hands-on POC explores integrating Compose Multiplatform into an existing native iOS/Android project to share UI code across platforms. The author migrated actual Jetpack Compose screens from their production Android app to test real-world viability on iOS, documenting every integration challenge along the way.
Key Takeaways
- Successfully shared Compose UI between iOS and Android using identical Kotlin code
- Integration requires custom run scripts and framework linking, more complex than Flutter
- Resource handling (fonts, images) needs workarounds via moko-resources plugin
- White screen flashes during transitions and missing iOS-native animations hurt UX
- Small community means troubleshooting is difficult when problems arise
Compose Multiplatform can technically share UI between iOS and Android today, but Alpha-stage limitations, integration complexity, and UX issues make it better suited for future projects than current production apps.
About This Article
Sinj Menarucho's team ran into a wall when trying to access resource files like fonts and images in their Compose Multiplatform project. The standard Android syntax R.font.XXXX and R.drawable.XXXX didn't work, which prevented them from integrating UI components from their existing native codebase.
They switched to the moko-resources plugin through MOKO's template fork. This gave them pre-configured resource handling and let them reference assets using MR.fonts and MR.images syntax instead of the standard Android R class.
The resource workaround made it possible to build and run the app on both iOS and Android simulators. The same Kotlin Compose code rendered the CardMain screen identically across both platforms without needing platform-specific changes.