iosswiftkotlinkotlin-multiplatformcompose-multiplatform

How to implement edge-to-edge display on iOS in Kotlin Multiplatform (KMP) Compose project?


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


Solution

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