UIHostingController + SafeArea

Published on 8 Oct 2023

Here’s how you can ignore the safeArea when using a UIHostingController.

SPONSOR

Collect user feedback from your iOS and macOS app. Prioritize what features to build next based on user interest and votes.

Try For Free

The Problem

You are ignoring the safeArea in your outermost view. But when you present it using UIHostingController — it doesn’t work and your view is not expanding beyond the safe area.

struct FeatureList: View {
    var body: some View {

        VStack {
            ...
        }
        .background(Color.red)
        .ignoresSafeArea(.all)
    }
}

The Solution

Add a .frame(maxWidth: .infinity) modifier to your view. Take that view and wrap it inside a ZStack and add the background and ignoreSafeArea modifier to the ZStack.

struct FeatureList: View {
    var body: some View {
        ZStack {
            VStack {
                ...
            }.frame(maxWidth: .infinity)
        }
        .background(Color.red)
        .ignoresSafeArea(.all)
    }
}

That's it! You've successfully expanded your view beyond the safe area!

I am happy you read my article and hope you found it useful! If you have any suggestions of any kind don't hesitate let me know. I’d love to hear from you!