Search code examples
iosuinavigationcontrollerstoryboarduinavigationbar

iOS 17 - Navigation Bar is not immediately visible when adding Navigation Controller in Xcode 15

I am trying to add navigation to my iOS app. I am simulating an iPhone 15 with iOS 17 on Xcode 15 and Swift 5.8.

I have seen in several tutorials that when Navigation Controller is added to storyboard via Editor -> Embed in -> Navigation Controller a Navigation Bar should be immediately visible on the preview, like this: iPhone preview with Navigation Bar

But instead I cannot see anything: iPhone preview without Navigation Bar

I did not change any property of the Navigation Bar (that actually appeared on the view hierarchy by the way). What did I do wrong?

Solution

  • The default appearance of navigation bars is changed in iOS 15. From TN3106:

    UINavigationBar in iOS 15 introduces changes to its appearance settings. It extends the usage of its scrollEdgeAppearance, which by default produces a transparent background, to all navigation bar styles.

    Now navigation bars have a transparent background by default, which is why you can't see it.

    You should use the UINavigationBarAppearance API to configure navigation bars. To get a translucent background like before, you should assign a UINavigationBarAppearance, configured with "default background" to navigationBar.scrollEdgeAppearance.

    let appearance = UINavigationBarAppearance()
appearance.configureWithDefaultBackground()
navigationController?.navigationBar.scrollEdgeAppearance = appearance

    If this is nil (the default), a transparent version of the standardAppearance will be used.

    To do this in the storyboard, you can select the navigation bar in the hierarchy, and check the "scroll edge" checkbox:

    enter image description here

    Note that the navigation bar for the view controllers connected to the UINavigationController would still incorrectly show a transparent navigation bar (not sure if this is intentional). It does exhibit the expected behaviour when you build and run the app.

    See TN3106 for more ways you can customise the navigation bar.