How to customize the background of NavigationStack in SwiftUI in 2024?
What you will learn:
- How the NavigationStack changed
- How background colors affect the NavigationStack
- How to set a custom background color, material, and gradient for the NavigationStack
How the NavigationStack changed
Starting in iOS 15, the background materials for bars (navigation bar, tab bar, etc.) were removed “giving more visual clarity to your content” as stated in this WWDC 2021 video titled “What’s new in UIKit”.
How background colors affect the NavigationStack
When you set a background color, you will notice it will go behind the NavigationStack for large and inline nav bars.
How to set a custom background for the NavigationStack
In SwiftUI, the rule I have observed since iOS 15 is:
If a shape style (such as a color or material) touches a safe area edge, then that style will bleed into the safe area.
I believe this has to do with changes in iOS 15 for UIKit that were announced during WWDC 21.
Solid Colors
- That Rectangle with the background HAS to touch the safe area edge.
- The shape style (Color) is in a background modifier because the background accepts a “ShapeStyle” type.
- The background touching the safe area edge should be the full width of the NavigationStack. The Rectangle shape expands horizontally to match the width of the device/NavigationStack.
Materials
You can use a Divider instead of a Rectangle. Let’s combine it with a material this time:
This makes it look more like how nav bars used to look.
Gradients
Gradients are also a ShapeStyle type.
A vertical gradient doesn’t work too well using this method because only the top color will bleed into the safe area.
Instead, use a linear gradient with some angle besides a vertical one.
Notice:
- The Rectangle has a height and so it will add some padding to the bottom of the NavigationStack.
- Because the Rectangle has height, I filled it with a clear color so you can see its background gradient.
More Background Options
If you’re interested in more background options for the NavigationStack, you can see my original post here on my website.
You’ll also learn:
- How scrolling a List affects the NavigationStack
- How to customize the NavigationStack when scrolling
- How to set a custom font for the NavigationStack
- Completely replace the NavigationStack with a custom view using safeAreaInset
Originally published at https://www.bigmountainstudio.com.