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.

Practice

1. What is the main purpose of NavigationStack in SwiftUI?

easy

A. To organize screens in a stack for easy navigation

B. To create animations for buttons

C. To manage data storage locally

D. To handle network requests

Solution

1. Step 1: Understand NavigationStack role

   NavigationStack is designed to manage a stack of views for navigation.

2. Step 2: Compare with other options

   Options A, B, and C relate to networking, animations, and data storage, which are unrelated to navigation stacks.

3. Final Answer:

   To organize screens in a stack for easy navigation -> Option A

4. Quick Check:

   NavigationStack = Screen stack for navigation [OK]

Hint: NavigationStack stacks screens for navigation [OK]

Common Mistakes:

• Confusing NavigationStack with animation or data management
• Thinking NavigationStack handles network calls
• Assuming NavigationStack is for UI styling only

2. Which of the following is the correct syntax to create a navigation link inside a NavigationStack in SwiftUI?

easy

A. NavigationLink(destination: DetailView()) { Text("Go") }

B. NavigationLink { Text("Go") } destination: DetailView()

C. NavigationLink(Text("Go"), DetailView())

D. NavigationLink(destination: "DetailView") { Text("Go") }

Solution

1. Step 1: Recall NavigationLink syntax

   The correct syntax uses NavigationLink(destination: View) { Label }.

2. Step 2: Check each option

   NavigationLink(destination: DetailView()) { Text("Go") } matches the correct syntax. NavigationLink { Text("Go") } destination: DetailView() reverses parameters incorrectly. NavigationLink(Text("Go"), DetailView()) uses wrong parameter order. NavigationLink(destination: "DetailView") { Text("Go") } passes destination as a string, which is invalid.

3. Final Answer:

   NavigationLink(destination: DetailView()) { Text("Go") } -> Option A

4. Quick Check:

   NavigationLink syntax = destination first, label second [OK]

Hint: Destination view goes first, label closure second [OK]

Common Mistakes:

• Swapping destination and label parameters
• Passing destination as a string instead of a view
• Using incorrect parentheses or braces

3. Given this SwiftUI code inside a NavigationStack:

NavigationLink(destination: Text("Detail Screen")) {
  Text("Tap me")
}

What happens when the user taps "Tap me"?

medium

A. Nothing happens because NavigationLink is missing a tag

B. The app navigates to a screen showing "Detail Screen" text

C. The app crashes due to missing navigation title

D. The button changes color but does not navigate

Solution

1. Step 1: Understand NavigationLink behavior

   Tapping the link navigates to the destination view, here a Text view with "Detail Screen".

2. Step 2: Verify other options

   Nothing happens because NavigationLink is missing a tag is incorrect; tags are optional. The app crashes due to missing navigation title is wrong; navigation title is not required to navigate. The button changes color but does not navigate describes visual feedback only, not navigation.

3. Final Answer:

   The app navigates to a screen showing "Detail Screen" text -> Option B

4. Quick Check:

   NavigationLink tap = navigate to destination [OK]

Hint: Tap NavigationLink to go to its destination view [OK]

Common Mistakes:

• Thinking NavigationLink needs a tag to work
• Assuming navigation title is mandatory for navigation
• Confusing visual feedback with navigation action

4. What is wrong with this SwiftUI code snippet inside a NavigationStack?

NavigationLink(destination: DetailView) {
  Text("Next")
}

medium

A. NavigationLink cannot be used inside NavigationStack

B. Text("Next") should be outside the NavigationLink

C. DetailView is missing parentheses to create an instance

D. The destination must be a string, not a view

Solution

1. Step 1: Check destination parameter

   Destination expects a view instance, so DetailView() is required, not just DetailView.

2. Step 2: Validate other options

   Text("Next") should be outside the NavigationLink is wrong; Text is correctly inside NavigationLink. NavigationLink cannot be used inside NavigationStack is false; NavigationLink is designed for NavigationStack. The destination must be a string, not a view is incorrect; destination must be a view, not a string.

3. Final Answer:

   DetailView is missing parentheses to create an instance -> Option C

4. Quick Check:

   Destination needs view instance with () [OK]

Hint: Destination must be a view instance with parentheses [OK]

Common Mistakes:

• Passing view type instead of instance as destination
• Placing label outside NavigationLink
• Confusing destination type with string

5. You want to create a NavigationStack with a list of items. Tapping an item should navigate to a detail view showing the item's name. Which code snippet correctly implements this behavior?

hard

A. NavigationStack {
List(items, id: \.self) { item in
NavigationLink(destination: item) {
Text(item)
}
}
}

B. NavigationStack {
ForEach(items) { item in
NavigationLink(Text(item), destination: Text(item))
}
}

C. NavigationStack {
List(items) { item in
Button(action: { navigateTo(Text(item)) }) {
Text(item)
}
}
}

D. NavigationStack {
List(items, id: \.self) { item in
NavigationLink(destination: Text(item)) {
Text(item)
}
}
}

Solution

1. Step 1: Check List and NavigationLink usage

   NavigationStack { List(items, id: \.self) { item in NavigationLink(destination: Text(item)) { Text(item) } } } correctly uses List with id, and NavigationLink with destination as a Text view showing the item.

2. Step 2: Analyze other options

   NavigationStack { ForEach(items) { item in NavigationLink(Text(item), destination: Text(item)) } } uses incorrect NavigationLink syntax. NavigationStack { List(items) { item in Button(action: { navigateTo(Text(item)) }) { Text(item) } } } uses Button with undefined navigateTo function, which is invalid. NavigationStack { List(items, id: \.self) { item in NavigationLink(destination: item) { Text(item) } } } passes item (a String) directly as destination, which is invalid; destination must be a view.

3. Final Answer:

   NavigationStack with List and NavigationLink using destination: Text(item) -> Option D

4. Quick Check:

   List + NavigationLink with view destination = correct [OK]

Hint: Use NavigationLink with destination view inside List [OK]

Common Mistakes:

• Passing data instead of view as destination
• Using Button instead of NavigationLink for navigation
• Incorrect NavigationLink parameter order