TabView for tab navigation in iOS Swift - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a TabView with two tabs.

iOS Swift

import SwiftUI

struct ContentView: View {
  var body: some View {
    TabView {
      Text("Home Screen")
        .tabItem {
          Image(systemName: "house")
          Text("[1]")
        }
      Text("Settings Screen")
        .tabItem {
          Image(systemName: "gear")
          Text("Settings")
        }
    }
  }
}

Drag options to blanks, or click blank then click option'

ADashboard

BMain

CProfile

DHome

Attempts:

3 left

💡 Hint

Common Mistakes

Using a label that doesn't match the icon, like 'Dashboard' or 'Profile'.

Leaving the label blank or misspelled.

The first tab's label should be "Home" to match the icon and common naming for the main screen.

2fill in blank

medium

Complete the code to set the default selected tab to the second tab.

iOS Swift

import SwiftUI

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

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

Drag options to blanks, or click blank then click option'

A"Settings"

B1

C0

D2

Attempts:

3 left

💡 Hint

Common Mistakes

Setting selection to 0 which selects the first tab.

Using a string instead of an integer for the tag.

The selection state should be set to 1 to select the tab with tag 1 (the second tab) by default.

3fill in blank

hard

Fix the error in the TabView code by completing the missing modifier.

iOS Swift

TabView {
  Text("Profile")
    .tabItem {
      Image(systemName: "person.circle")
      Text("Profile")
    }
    [1](2)
  Text("Messages")
    .tabItem {
      Image(systemName: "message")
      Text("Messages")
    }
    .tag(3)
}

Drag options to blanks, or click blank then click option'

A.tag

B.tabIndex

C.tabSelection

D.selection

Attempts:

3 left

💡 Hint

Common Mistakes

Using .tabIndex or .selection which are not valid modifiers for tabs.

Forgetting to add a tag causes selection issues.

The correct modifier to assign a tag to a tab is .tag().

4fill in blank

hard

Fill both blanks to create a TabView with three tabs and set the selection binding.

iOS Swift

struct ContentView: View {
  @State private var selectedTab = [1]

  var body: some View {
    TabView(selection: $selectedTab) {
      Text("Feed")
        .tabItem {
          Image(systemName: "list.bullet")
          Text("Feed")
        }
        .tag([2])
      Text("Search")
        .tabItem {
          Image(systemName: "magnifyingglass")
          Text("Search")
        }
        .tag(1)
      Text("Profile")
        .tabItem {
          Image(systemName: "person")
          Text("Profile")
        }
        .tag(2)
    }
  }
}

Drag options to blanks, or click blank then click option'

A0

B1

C2

D3

Attempts:

3 left

💡 Hint

Common Mistakes

Mismatching the selection initial value and the first tab's tag.

Using tags that don't start at 0.

The selection state should start at 0 and the first tab's tag should be 0 to match.

5fill in blank

hard

Fill all three blanks to create a TabView with dynamic tab labels and icons.

iOS Swift

struct ContentView: View {
  @State private var selected = [1]
  let tabs = [(label: "Home", icon: "house"), (label: "Search", icon: "magnifyingglass"), (label: "Profile", icon: "person")]

  var body: some View {
    TabView(selection: $selected) {
      ForEach(0..<tabs.count, id: \.self) { index in
        Text(tabs[index].label + " Screen")
          .tabItem {
            Image(systemName: tabs[index].[2])
            Text(tabs[index].[3])
          }
          .tag(index)
      }
    }
  }
}

Drag options to blanks, or click blank then click option'

A0

Bicon

Clabel

Dname

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong keys like 'name' instead of 'label' or 'icon'.

Starting selection at a wrong index.

The selection starts at 0, and the tabItem uses 'icon' for the image and 'label' for the text from the tuple.