SwiftUI – How to set the title of a NavigationView to large title (or small)?

by

SwiftUI (iOS 14+)

NavigationView {
    TopLevelView {
        // […]
    }
    .navigationBarTitleDisplayMode(.inline) // ⬅️ Important part
}

SwiftUI (Xcode 11.3)

SwiftUI navigationBarTitle modifier has an optional displayMode property which you can set to .inline for small titles and .large for large titles. See documentation

NavigationView {
    TopLevelView {
        // […]
    }
    .navigationBarTitle("Test", displayMode: .inline) // ⬅️ Important part
}

How it’s done in UIKit

Since iOS 11, UINavigationBar can display its title in standard and large title mode.

On UIKit, if you want to choose between the two behaviors you have to set the largeTitleDisplayMode property of your ViewController’s navigationItem to decide if this particular view controller should display a large title or not.

Then, you need to check the prefersLargeTitle property of your Navigation Controller’s navigationBar. Setting it to true will allow the ViewControllers in its navigation stack to display large titles. Conversely, setting it to false will prevent it, overriding the preference of the individual NavigationItems present in the stack.

This will display a large title in UIKit

// Set this property to true to allow NavigationItems to display large titles
let navigationController = UINavigationController()
navigationController.navigationBar.prefersLargeTitles = true

/*
 Choose between `always`, `never` and `automatic` to decide
 if this particular view controller should display a large title.
 */
let viewController = UIViewController()
viewController.navigationItem.largeTitleDisplayMode = .always

Leave a Comment

tech