Kotlin Multiplatform: 7 Patterns for Truly Shared UIs

// shared/commonMain/kotlin/ui/SearchScreenModel.kt

data class UiState(
    val query: String = "",
    val results: List<Item> = emptyList(),
    val isLoading: Boolean = false,
    val error: String? = null
)

sealed interface Event {
    data class QueryChanged(val value: String) : Event
    data object Search : Event
}

class SearchViewModel(
    private val repo: Repository
) : ViewModel() {

    private val _state = MutableStateFlow(UiState())
    val state = _state.asStateFlow()

    fun on(event: Event) {
        when (event) {
            is Event.QueryChanged -> _state.update { it.copy(query = event.value) }
            Event.Search -> performSearch()
        }
    }

    private fun performSearch() = viewModelScope.launch {
        _state.update { it.copy(isLoading = true, error = null) }
        try {
            val results = repo.search(_state.value.query)
            _state.update { it.copy(results = results, isLoading = false) }
        } catch (e: Exception) {
            _state.update { it.copy(error = e.message, isLoading = false) }
        }
    }
}

// commonMain
@Composable
expect fun NativeWebView(
    url: String,
    modifier: Modifier = Modifier
)

// androidMain
@Composable
actual fun NativeWebView(url: String, modifier: Modifier) {
    AndroidView(
        modifier = modifier,
        factory = { context ->
            WebView(context).apply { settings.javaScriptEnabled = true }
        },
        update = { it.loadUrl(url) }
    )
}

// iosMain
@Composable
actual fun NativeWebView(url: String, modifier: Modifier) {
    val request = remember(url) { NSURLRequest(NSURL(string = url)) }

    UIKitView(
        modifier = modifier,
        factory = {
            WKWebView(frame = .zero).apply { loadRequest(request) }
        }
    )
}

@Composable
fun AdaptiveFeed(
    posts: List<Post>,
    windowSizeClass: WindowSizeClass
) {
    if (windowSizeClass.widthSizeClass == WindowWidthSizeClass.Expanded) {
        Row(Modifier.fillMaxSize()) {
            Sidebar(Modifier.weight(1f))
            PostGrid(posts, Modifier.weight(3f))
        }
    } else {
        PostList(posts, Modifier.fillMaxSize())
    }
}

@Serializable object Home
@Serializable data class Details(val id: String)

@Composable
fun AppNavigation() {
    val navController = rememberNavController()

    NavHost(navController, startDestination = Home) {
        composable<Home> {
            HomeScreen(onProductClick = { id -> navController.navigate(Details(id)) })
        }

        composable<Details> { backStackEntry ->
            val args = backStackEntry.toRoute<Details>()
            DetailsScreen(id = args.id)
        }
    }
}

object AppTheme {
    val colors = lightColorScheme(...)
    val typography: Typography
        @Composable get() = getPlatformTypography()
}

@Composable
expect fun getPlatformTypography(): Typography

// androidMain
@Composable
actual fun getPlatformTypography(): Typography {
    val roboto = GoogleFont("Roboto")
    return Typography(/* Android families using roboto */)
}

// iosMain
@Composable
actual fun getPlatformTypography(): Typography {
    val sfPro = FontFamily.Default
    return Typography(/* Uses San Francisco under the hood */)
}

import your_app.generated.resources.Res
import your_app.generated.resources.ic_cart
import your_app.generated.resources.welcome_message

@Composable
fun WelcomeHeader() {
    Column {
        Image(
            painter = painterResource(Res.drawable.ic_cart),
            contentDescription = null
        )
        Text(stringResource(Res.string.welcome_message))
    }
}