Navigation View Style in SwiftUI
A quick way to override the default navigation style.
The navigation view has been one of the most essential visual elements in iOS programming, as it provides a default built-in mechanism to move back and forth between different views. In SwiftUI, it comes to get the place of the navigation controller that we’ve known from UIKit; navigation there takes place between different view controllers, not views. Users are familiar with it, and a big number of apps integrate it in order to allow users go from one place to another easily.
Navigation view can be customized if necessary, so it fits the custom look and feel of an app. In fact, there are various parts of it that we can change; back button, general appearance, title fonts and colors, and more. Among all, there’s one particular that we can override as well, but it quite often remains unnoticed. That is the navigation style.
What the navigation style is
Navigation view creates a stack of views; new ones are being inserted to the top of it when moving forward, and they are being removed when going backwards. When navigating in iPhone, just a single view is visible at any given moment. Each new view that is added to the stack will be overlapping visually the previous one.
However, this is not the default behavior when we are working in large-sized screens, such as in iPad devices and some iPhone devices in landscape mode. The root view, which we can show or hide, is displayed as a standalone column in two possible ways; either side by side to the next view in the stack, or by overlapping it partially. See the following image for example:
In cases where the default behavior is not suitable, then we can simply change it by overriding the navigation style.
Setting the navigation style
Suppose that we have the following pretty simple implementation that lists three different types of devices: