TabView for tab navigation in iOS Swift - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

TabView selection behavior

What will be the visible tab label when the user taps the second tab in this SwiftUI TabView?

iOS Swift

import SwiftUI

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

  var body: some View {
    TabView(selection: $selection) {
      Text("Home Screen")
        .tabItem {
          Label("Home", systemImage: "house")
        }
        .tag(1)

      Text("Settings Screen")
        .tabItem {
          Label("Settings", systemImage: "gear")
        }
        .tag(2)
    }
  }
}

A The tab label "Home" remains visible.

B Both tab labels "Home" and "Settings" are visible simultaneously.

C The tab label "Settings" becomes visible.

D No tab label is visible after tapping.

💡 Hint

The selection state controls which tab is active and visible.

The TabView uses the selection binding to track the active tab. When the user taps the second tab, the selection changes to 2, so the "Settings" tab label and content become visible.

📝 Syntax

intermediate

Correct syntax for TabView with three tabs

Which option shows the correct SwiftUI code to create a TabView with three tabs labeled "First", "Second", and "Third"?

A

TabView {
  Text("First Tab").tabItem { Label("First", systemImage: "1.circle") }
  Text("Second Tab").tabItem { Label("Second", systemImage: "2.circle") }
  Text("Third Tab").tabItem { Label("Third", systemImage: "3.circle") }
}

B

TabView {
  Text("First Tab").tabItem { Label("First") }
  Text("Second Tab").tabItem { Label("Second") }
  Text("Third Tab").tabItem { Label("Third") }
}

C

TabView {
  Text("First Tab").tabItem { "First" }
  Text("Second Tab").tabItem { "Second" }
  Text("Third Tab").tabItem { "Third" }
}

D

TabView {
  Text("First Tab").tabItem(Label("First", systemImage: "1.circle"))
  Text("Second Tab").tabItem(Label("Second", systemImage: "2.circle"))
  Text("Third Tab").tabItem(Label("Third", systemImage: "3.circle"))
}

💡 Hint

tabItem expects a view builder with a Label for accessibility and icon.

Option A correctly uses the tabItem modifier with a Label view including text and systemImage. Other options have syntax errors or missing required parameters.

❓ lifecycle

advanced

State preservation in TabView

In a SwiftUI TabView with multiple tabs, what happens to the state of a tab's view when the user switches to another tab?

A The state is preserved as long as the TabView remains in memory.

B The state is reset to initial values every time the tab is selected.

C The state is saved to disk and restored when the tab is selected again.

D The state is lost immediately when switching tabs.

💡 Hint

Think about how SwiftUI keeps views alive inside TabView.

SwiftUI keeps the views of all tabs alive in memory while the TabView exists, so their state is preserved when switching tabs.

❓ navigation

advanced

Programmatic tab selection

How can you programmatically switch to the third tab in a SwiftUI TabView?

iOS Swift

import SwiftUI

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

  var body: some View {
    VStack {
      TabView(selection: $selection) {
        Text("First Tab").tabItem { Label("First", systemImage: "1.circle") }.tag(1)
        Text("Second Tab").tabItem { Label("Second", systemImage: "2.circle") }.tag(2)
        Text("Third Tab").tabItem { Label("Third", systemImage: "3.circle") }.tag(3)
      }
      Button("Go to Third Tab") {
        // What code goes here?
      }
    }
  }
}

A selection = 3

B self.selection = 3

C selection.set(3)

D TabView.selection = 3

💡 Hint

Use the @State variable to update the selected tab.

Inside the View struct, you must use self.selection = 3 to update the @State variable and switch tabs programmatically.

🔧 Debug

expert

Why does the TabView not switch tabs?

Given this SwiftUI code, why does tapping the tab items not change the visible tab?

iOS Swift

import SwiftUI

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

  var body: some View {
    TabView(selection: .constant(selection)) {
      Text("First Tab").tabItem { Label("First", systemImage: "1.circle") }.tag(1)
      Text("Second Tab").tabItem { Label("Second", systemImage: "2.circle") }.tag(2)
    }
  }
}

A The @State variable selection is not initialized.

B The tags are not unique integers.

C The tabItem labels are missing accessibility identifiers.

D The selection binding uses .constant, so it is read-only and does not update.

💡 Hint

Check how the selection binding is passed to TabView.

Using .constant(selection) creates a read-only binding, so TabView cannot update the selection state when tabs are tapped, preventing tab switching.