SwiftUI: TabView with NavigationView

To have a TabView with a Navigation View, you have to wrap the pages in a TabView with their own NavigationView.

First, Start off with a tab view with three pages:

iPhone – TabView

Next, wrap each of the TabView’s Items in their own NavigationView, and make sure to move the tab item to be an object of the NavigationView, otherwise the buttons will be invisible (but still work). Also, add a title on the NavigationViews, setting the navBarTitle as a property of the view that the NavigationView contains. And there it is, an app with a TabView and a NavigationView.

iPhone – TabView + NavigationView

Remember to add the line of code as a property of the TabView,

.edgesIgnoringSafeArea(.top)
, as this will allow the status bar to share the translucency of the nav bar.

Leave a Reply

Your email address will not be published. Required fields are marked *