TabView - SwiftUI Blog

One of the changes I like in SwiftUI, released with Xcode 16, is the new way to write a TabView.

Now we can write:

struct ContentView: View {
    
    var body: some View {
        TabView {
            Tab("Contacts", systemImage: "rectangle.stack.person.crop.fill") {
                // Your View 1
                }
            }
            Tab("Chat", systemImage: "message.fill") {
                // Your View 2
            }
            Tab("Settings", systemImage: "gear") {
               // Your View 3
            }
        }
    }
}

To have:

We can define a View to use in the first tab, for example. Feel free to customize the others as you like.

struct FirstView: View {
    var body: some View {
        HStack {
            Image(systemName: "car")
                .resizable()
                .frame(width: 60, height: 60)
            Text("Car")
        }
    }
}

Now in the Tab:

TabView {
        Tab("Contacts", systemImage: "rectangle.stack.person.crop.fill") {
                FirstView()
        }
        Tab("Chat", systemImage: "message.fill") {
                // Your View 2
        }
        Tab("Settings", systemImage: "gear") {
                // Your View 3
        }
}

We can also add a badge to a tab like this:

TabView {
      Tab("Contacts", systemImage: "rectangle.stack.person.crop.fill") {
            FirstView()
      }
      Tab("Chat", systemImage: "message.fill") {
            // Your View 2
      }.badge(3)
      Tab("Settings", systemImage: "gear") {
        // Your View 3
      }
}

To have:

In the next post, we’ll see how to use the TabView with a NavigationStack.