Alexito's World

A world of coding 💻, by Alejandro Martinez

Extend a footer outside the Safe Area with SwiftUI

Subscribe to my channel to be notified when new videos about SwiftUI are released.

The safe area is one of the most relevant changes in the UI paradigm of iOS in the recent years. It unified a bunch of layout ideas into a single API and allowed us to make our UIs adapt to new phones with weird shapes.

One of the most common design patterns that has to deal with the bottom safe area is having a call to action inside a footer on your screen. The difficulty with this design is that you want your content to respect the safe area, but also you want a background that extends to the edge of the screen. You can see it in action in any UITabBar:

IMG_928A81A13D6E-1

Implementing this is not as straightforward as it may seem. If you expand your container to the edge, your content will be behind the home indicator. If you fully respect the safe area you will see a different colored background behind the home indicator.

What you need is a combination of both things.

IMG_2729BA01DB1B-1

Luckily SwiftUi gives us the tools we need to accomplish this.

GeometryReader { proxy in
    VStack(spacing: 0) {
        // Your screen content...

        VStack {
            // Your footer content or CTA
        }
        .padding()
        .padding(.bottom, proxy.safeAreaInsets.bottom) // <-- keep your footer content inside the safe area
        .frame(maxWidth: .infinity)
        .background(Color.green) // <-- the background we want to extend
    }
}
.edgesIgnoringSafeArea(.bottom) // <-- extend to the edge of the screen

First you need to use edgesIgnoringSafeArea(.bottom) to extend the content to the edge of the screen. That will let any background be visible behind the home indicator.

Then you need to push up the footer content itself, and for that you need to use a GeometryReader and padding.