NavigationStack in iOS Swift - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a NavigationStack in SwiftUI.

iOS Swift

var body: some View {
  [1] {
    Text("Home Screen")
  }
}

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

AVStack

BNavigationStack

CNavigationView

DZStack

Attempts:

3 left

💡 Hint

Common Mistakes

Using NavigationView instead of NavigationStack.

Using layout stacks like VStack or ZStack instead.

The NavigationStack is the modern container for navigation in SwiftUI, replacing NavigationView.

2fill in blank

medium

Complete the code to push a new view when a button is tapped inside a NavigationStack.

iOS Swift

NavigationStack {
  NavigationLink(destination: [1]) {
    Text("Go to Detail")
  }
}

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

ANavigationStack()

BText("Detail")

CButton()

DDetailView()

Attempts:

3 left

💡 Hint

Common Mistakes

Passing a Button instead of a view as destination.

Passing NavigationStack inside destination.

The destination parameter of NavigationLink expects a view instance, like DetailView().

3fill in blank

hard

Fix the error in the code to correctly bind the navigation path state.

iOS Swift

struct ContentView: View {
  @State private var path = [String]()

  var body: some View {
    NavigationStack(path: [1]) {
      List {
        Button("Add Item") {
          path.append("Item 1")
        }
      }
      .navigationDestination(for: String.self) { item in
        Text(item)
      }
    }
  }
}

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

A$path

Bpath

C&path

Dself.path

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the state variable without $.

Using &path which is not valid in SwiftUI.

The NavigationStack expects a binding to the path state, so use $path.

4fill in blank

hard

Fill both blanks to create a navigationDestination modifier for Int type and show the number.

iOS Swift

NavigationStack {
  List(1...3, id: \.self) { number in
    NavigationLink(value: number) {
      Text("Number \(number)")
    }
  }
  .navigationDestination(for: [1]) { value in
    Text("Selected: \(value)")
  }
}

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

ABool

BString

CInt

DDouble

Attempts:

3 left

💡 Hint

Common Mistakes

Using String or other types that don't match the value type.

Forgetting to match the generic type in navigationDestination.

The navigationDestination modifier must match the type used in NavigationLink's value, here Int.

5fill in blank

hard

Fill all three blanks to declare a NavigationStack with a path state, push a view, and bind the path.

iOS Swift

struct ContentView: View {
  @State private var [1] = [String]()

  var body: some View {
    [2](path: [3]) {
      Button("Go") {
        [1].append("Next")
      }
      .navigationDestination(for: String.self) { value in
        Text(value)
      }
    }
  }
}

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

Apath

BNavigationStack

C$path

DNavigationView

Attempts:

3 left

💡 Hint

Common Mistakes

Using NavigationView instead of NavigationStack.

Not binding the path with $.

Using a different variable name than declared.

Declare a state variable path, use NavigationStack with binding $path to manage navigation.