How to Use TabView in SwiftUI: Simple Guide with Examples

In SwiftUI, use TabView to create a tab-based interface by placing multiple views inside it, each tagged with a unique identifier. Use .tabItem modifier to set the tab's icon and label. This lets users switch between different screens easily.

Syntax

The TabView container holds multiple child views representing each tab. Each child view uses the .tabItem modifier to define the tab's icon and label. Use @State with a selection variable to track the active tab.

• TabView: The container for tabs.
• tabItem: Sets the tab's icon and text.
• selection: Optional binding to track selected tab.

swift

struct ContentView: View {
  @State private var selection = 0

  var body: some View {
    TabView(selection: $selection) {
      Text("Home View")
        .tabItem {
          Image(systemName: "house")
          Text("Home")
        }
        .tag(0)

      Text("Settings View")
        .tabItem {
          Image(systemName: "gear")
          Text("Settings")
        }
        .tag(1)
    }
  }
}

Output

A tab bar with two tabs labeled 'Home' and 'Settings', switching between two text views.

Example

This example shows a simple app with three tabs: Home, Favorites, and Profile. Each tab displays a different text view. The tab bar icons use SF Symbols.

swift

import SwiftUI

struct ContentView: View {
  @State private var selectedTab = 0

  var body: some View {
    TabView(selection: $selectedTab) {
      Text("Welcome to Home")
        .tabItem {
          Image(systemName: "house.fill")
          Text("Home")
        }
        .tag(0)

      Text("Your Favorites")
        .tabItem {
          Image(systemName: "star.fill")
          Text("Favorites")
        }
        .tag(1)

      Text("User Profile")
        .tabItem {
          Image(systemName: "person.fill")
          Text("Profile")
        }
        .tag(2)
    }
  }
}

@main
struct MyApp: App {
  var body: some Scene {
    WindowGroup {
      ContentView()
    }
  }
}

Output

A tab bar with three tabs: Home, Favorites, and Profile, each showing different text when selected.

Common Pitfalls

Common mistakes when using TabView include:

• Not assigning unique .tag() values to each tab, which breaks selection tracking.
• Forgetting to use .tabItem modifier, resulting in tabs without labels or icons.
• Using complex views inside tabs without proper layout, causing UI glitches.

swift

struct WrongTabView: View {
  var body: some View {
    TabView {
      Text("First Tab")
        // Missing .tabItem causes no icon or label

      Text("Second Tab")
        .tabItem {
          Image(systemName: "star")
          Text("Second")
        }
        // Missing .tag() means selection won't work properly
    }
  }
}

struct CorrectTabView: View {
  @State private var selection = 0

  var body: some View {
    TabView(selection: $selection) {
      Text("First Tab")
        .tabItem {
          Image(systemName: "house")
          Text("First")
        }
        .tag(0)

      Text("Second Tab")
        .tabItem {
          Image(systemName: "star")
          Text("Second")
        }
        .tag(1)
    }
  }
}

Quick Reference

• TabView: Container for tabs.
• tabItem: Sets icon and label for each tab.
• selection: Binds to track active tab.
• tag: Unique identifier for each tab.
• Image(systemName:): Use SF Symbols for icons.

Key Takeaways

Use TabView with .tabItem and unique .tag() for each tab to create tab navigation.

Bind a @State variable to TabView's selection to track or control the active tab.

Always provide icons and labels inside .tabItem for clear user navigation.

Avoid missing tags or tabItem modifiers to prevent UI and selection issues.

Use SF Symbols for consistent and easy-to-use tab icons.