NavigationStack in iOS Swift - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ navigation

intermediate

What is the output when navigating with NavigationStack?

Consider this SwiftUI code snippet using NavigationStack. What will the user see after tapping the button labeled "Next"?

iOS Swift

import SwiftUI

struct ContentView: View {
  var body: some View {
    NavigationStack {
      VStack {
        Text("Home Screen")
        NavigationLink("Next", destination: Text("Detail Screen"))
      }
    }
  }
}

A The app shows "Home Screen" but tapping "Next" does nothing.

B The app crashes because NavigationStack requires a NavigationView wrapper.

C The app shows only "Detail Screen" immediately without any navigation.

D The app shows "Home Screen" and a button labeled "Next". Tapping "Next" navigates to a screen showing "Detail Screen".

💡 Hint

Think about how NavigationStack and NavigationLink work together to navigate between views.

NavigationStack is the modern container for navigation in SwiftUI. NavigationLink inside it creates a tappable link that pushes the destination view onto the navigation stack. So tapping "Next" moves from "Home Screen" to "Detail Screen".

❓ ui_behavior

intermediate

What happens if you pop the last view in NavigationStack?

In a NavigationStack with two views pushed, what happens when you pop the last pushed view?

iOS Swift

import SwiftUI

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

  var body: some View {
    NavigationStack(path: $path) {
      VStack {
        Button("Go to Detail") {
          path.append("Detail")
        }
      }
      .navigationDestination(for: String.self) { value in
        if value == "Detail" {
          Text("Detail Screen")
        }
      }
    }
  }
}

A Popping the last view returns the user to the root view showing the button "Go to Detail".

B Popping the last view closes the app automatically.

C Popping the last view causes a runtime error because the path becomes empty.

D Popping the last view does nothing; the user stays on the same screen.

💡 Hint

Think about how NavigationStack manages the path array and what an empty path means.

NavigationStack uses the path array to track pushed views. Removing the last element pops the top view and returns to the root view. An empty path means the root view is shown.

❓ lifecycle

advanced

When is the navigationDestination modifier called in NavigationStack?

In SwiftUI's NavigationStack, when does the closure inside navigationDestination(for:) get executed?

iOS Swift

import SwiftUI

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

  var body: some View {
    NavigationStack(path: $path) {
      Button("Go to Number 5") {
        path.append(5)
      }
      .navigationDestination(for: Int.self) { number in
        Text("Number: \(number)")
      }
    }
  }
}

A The closure runs only once when the app launches and never again.

B The closure runs immediately when the view appears, regardless of navigation.

C The closure runs only when the path contains a new Int value and the view needs to display the destination for that value.

D The closure runs every time the user taps anywhere on the screen.

💡 Hint

Consider when SwiftUI needs to show a new screen based on the navigation path.

The navigationDestination closure is called when the NavigationStack needs to show a destination view for a specific data type in the path. It runs when a new value is appended to the path and the destination must be shown.

📝 Syntax

advanced

Which code snippet correctly uses NavigationStack with a path binding?

Choose the correct SwiftUI code that uses NavigationStack with a @State path binding and navigationDestination modifier.

A

struct ContentView: View {
  @State private var path = [String]()
  var body: some View {
    NavigationStack(path: $path) {
      Button("Go") { path.append("Next") }
    }
    .navigationDestination(for: String.self) { Text($0) }
  }
}

B

struct ContentView: View {
  @State private var path = [String]()
  var body: some View {
    NavigationStack(path: $path) {
      Button("Go") { path.append("Next") }
      .navigationDestination(for: String.self) { Text($0) }
    }
  }
}

C

struct ContentView: View {
  @State var path = [String]()
  var body: some View {
    NavigationStack(path: path) {
      Button("Go") { path.append("Next") }
      .navigationDestination(for: String.self) { Text($0) }
    }
  }
}

D

struct ContentView: View {
  @State private var path = [String]()
  var body: some View {
    NavigationStack {
      Button("Go") { path.append("Next") }
      .navigationDestination(for: String.self) { Text($0) }
    }
  }
}

💡 Hint

Remember that NavigationStack's path parameter requires a binding and navigationDestination must be inside the NavigationStack closure.

Option B correctly uses @State private var path with a binding $path passed to NavigationStack. The navigationDestination modifier is inside the NavigationStack closure. Other options either miss the binding, place navigationDestination outside, or omit path binding.

🔧 Debug

expert

Why does this NavigationStack code not navigate on button tap?

This SwiftUI code does not navigate to the detail view when the button is tapped. What is the cause?

iOS Swift

import SwiftUI

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

  var body: some View {
    NavigationStack {
      Button("Go to Detail") {
        path.append("Detail")
      }
      .navigationDestination(for: String.self) { value in
        Text("Detail Screen")
      }
    }
  }
}

A The NavigationStack is missing the path binding; it should be NavigationStack(path: $path) to track navigation state.

B The navigationDestination modifier is incorrectly placed outside the NavigationStack closure.

C The path array must be declared as @Binding, not @State.

D The Button label must be a NavigationLink for navigation to work.

💡 Hint

Check how NavigationStack tracks the navigation path and how the path state is connected.

Without passing the binding $path to NavigationStack, it does not track changes to the path array. So appending to path does not trigger navigation. The navigationDestination modifier is correctly placed inside. @State is correct for local state. Button can trigger navigation if path is tracked.

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