I'm working on a Kotlin Multiplatform project using Compose Multiplatform for iOS. My current implementation leaves the status bar area empty/blank, and I want to achieve true edge-to-edge display where content extends under the status bar and system UI areas. Current Implementation
fun MainViewController() = ComposeUIViewController(
configure = { initKoin() }
) {
MainApp()
}
What I've Tried I've attempted to use window insets in my Compose code:
@Composable
fun MainApp() {
MaterialTheme {
Box(
modifier = Modifier
.fillMaxSize()
) {
// Content here
}
}
}
ContentView.Swift
import UIKit
import SwiftUI
import ComposeApp
struct ComposeView: UIViewControllerRepresentable {
func makeUIViewController(context: Context) -> UIViewController {
MainViewControllerKt.MainViewController()
}
func updateUIViewController(_ uiViewController: UIViewController, context: Context) {}
}
struct ContentView: View {
var body: some View {
ComposeView()
.ignoresSafeArea(.keyboard) // Compose has own keyboard handler
}
}
iOSApp.swift
import SwiftUI
import GoogleMaps
import ComposeApp
@main
struct iOSApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
Questions
How do I configure the ComposeUIViewController to enable edge-to-edge display? Are there any iOS-specific configurations needed in the native iOS side? What's the proper way to handle window insets in Compose Multiplatform for iOS? Do I need to modify anything in Info.plist or the iOS project configuration?
Expected Behavior I want my app content to extend under the status bar (similar to Android's edge-to-edge implementation) while still maintaining proper content padding so text/UI elements don't get obscured by system UI.
Any guidance on implementing a proper edge-to-edge display for iOS in KMP would be greatly appreciated
In your ContentView.swift
, you can change it to this:
struct ContentView: View {
var body: some View {
ComposeView()
.ignoresSafeArea(.all) // Ignores safe area should be set for all edges
}
}
Assuming your next question is "what's .ignoresSafeArea(edges: .all)
?"
.all
covers top (status bar), bottom (home indicator), left/right (in case of side-notch in iPad). And of course on Android, you'll just enable edge to edge.
So with these set, when writing your compose app, you can use Modifier.systemBarsPadding()
or any other `WindowInsets` if you still want to adjust the system paddings on your compose screens.
No edits to Info.plist or other project files are required just to do edge-to-edge in iOS. That API is simply from SwiftUI and Compose’s ComposeView is inside it.