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.

Solution updated for iOS 14. SwiftUi behaviour has changed a bit since the first releases. Thanks to Matthias for pointing it out.

edgesIgnoringSafeArea is a modifier that lets a view ignore the safe areas. We can use this to tell the background of our footer to extend to the edge of the screen.

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

    VStack {
        // Your footer content or CTA
    }
    .padding()
    .frame(maxWidth: .infinity)
  	// The background we want to extend
    .background(Color.green.edgesIgnoringSafeArea(.bottom)) 
}

By using the modifier only on the background with still make the rest of the content respect the safe areas which is very important.

simulator_example

If you liked this article please consider supporting me