Challenge - 5 Problems
NavigationStack Master
Get all challenges correct to earn this badge!
Test your skills under time pressure!
intermediate
2:00remaining
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")) } } } }
Attempts:
2 left
💡 Hint
Think about how NavigationStack and NavigationLink work together to navigate between views.
✗ Incorrect
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
intermediate2:00remaining
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") } } } } }
Attempts:
2 left
💡 Hint
Think about how NavigationStack manages the path array and what an empty path means.
✗ Incorrect
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
advanced2:00remaining
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)") } } } }
Attempts:
2 left
💡 Hint
Consider when SwiftUI needs to show a new screen based on the navigation path.
✗ Incorrect
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
advanced2:00remaining
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.
Attempts:
2 left
💡 Hint
Remember that NavigationStack's path parameter requires a binding and navigationDestination must be inside the NavigationStack closure.
✗ Incorrect
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
expert3:00remaining
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") } } } }
Attempts:
2 left
💡 Hint
Check how NavigationStack tracks the navigation path and how the path state is connected.
✗ Incorrect
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.