How to embed views in a tab bar using TabView

SwiftUI’s TabView provides an equivalent to UITabBarController, allowing us to let the user switch between several active views using a bar at the bottom of the screen.

In its basic form, you should provide each item with an image and title, along with a tag so that SwiftUI knows which view is which. For example, this creates two views with different images, titles, and tags:

struct ContentView: View {    
    var body: some View {
        TabView {
            Text("First View")
                .tabItem {
                    VStack {
                        Image(systemName: "1.circle")
                        Text("First")
                    }
                }.tag(0)
            Text("Second View")
                .tabItem {
                    VStack {
                        Image(systemName: "2.circle")
                        Text("Second")
                    }
                }.tag(1)
        }
    }
} 

Even though we’ve used a VStack for the image and title, SwiftUI is smart enough to render them horizontally as appropriate – on iPhone in landscape, for example.

If you need it, those tags can be used to programmatically control the active tab. First, add some state that can track the active tab:

@State var selectedView = 1

Now pass that in to the TabView, like this:

TabView(selection: $selectedView) {