UIHostingController + SafeArea

Published on 8 Oct 2023

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

SPONSOR

Gather user feedback and manage feature requests directly within your app. Empower users to suggest features, vote on ideas, and collaborate, all while you prioritize based on popularity.

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 hope you found it useful! If you have any suggestions or feedback, let me know. I’d love to hear from you!