NavigationLink in iOS Swift - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What happens when this NavigationLink is tapped?

Consider this SwiftUI code snippet. What will the user see after tapping the NavigationLink?

iOS Swift

NavigationLink(destination: Text("Detail View")) {
  Text("Go to Detail")
}

A Nothing happens because the NavigationLink is missing a NavigationView.

B The app navigates to a new screen showing the text "Detail View".

C The app crashes due to missing navigation context.

D The text "Go to Detail" changes color but no navigation occurs.

💡 Hint

NavigationLink requires a NavigationView ancestor to navigate properly.

Without a NavigationView, NavigationLink renders the label (styled as a link) but does not navigate when tapped.

📝 Syntax

intermediate

Which option correctly creates a NavigationLink with a label and destination?

Choose the correct SwiftUI code that compiles and shows "Next Screen" when tapped.

A NavigationLink(Text("Tap Here"), destination: Text("Next Screen"))

B

NavigationLink(destination: Text("Next Screen")) {
  Text("Tap Here")
}

C NavigationLink(destination: Text("Next Screen"), label: { Text("Tap Here") })

D

NavigationLink(Text("Next Screen")) {
  Text("Tap Here")
}

💡 Hint

The destination parameter comes first, then the label closure.

Option B uses the correct initializer with destination first and a trailing closure for the label. Others have wrong parameter order or syntax errors.

❓ lifecycle

advanced

What is the effect of using NavigationLink with isActive binding?

Given this code snippet, what happens when isActive becomes true?

iOS Swift

struct ContentView: View {
  @State private var isActive = false
  var body: some View {
    NavigationView {
      VStack {
        NavigationLink(destination: Text("Active View"), isActive: $isActive) {
          EmptyView()
        }
        Button("Activate") {
          isActive = true
        }
      }
    }
  }
}

A Tapping the button programmatically navigates to the "Active View" screen.

B Nothing happens because the NavigationLink label is EmptyView.

C The button toggles the visibility of the NavigationLink label.

D The app crashes due to binding misuse.

💡 Hint

The isActive binding controls navigation state programmatically.

When isActive changes to true, the NavigationLink activates and navigates to the destination even without user tapping the label.

🔧 Debug

advanced

Why does this NavigationLink not navigate when tapped?

Identify the reason this NavigationLink does not navigate to the destination view.

iOS Swift

struct ContentView: View {
  var body: some View {
    VStack {
      Text("Hello")
      NavigationLink(destination: Text("Next")) {
        Text("Go")
      }
    }
  }
}

A The destination view is missing a NavigationLink label.

B The NavigationLink label is not tappable because it's a Text view.

C Because NavigationLink is not inside a NavigationView, navigation won't work.

D The code is missing a @State variable to control navigation.

💡 Hint

NavigationLink requires a NavigationView to manage navigation stack.

Without a NavigationView, NavigationLink cannot push new views onto a navigation stack, so tapping does nothing.

🧠 Conceptual

expert

How does NavigationLink manage navigation stack in SwiftUI?

Which statement best describes how NavigationLink works internally in SwiftUI navigation?

A NavigationLink swaps the current view with the destination view without animation.

B NavigationLink replaces the root view with the destination view immediately on tap.

C NavigationLink creates a modal sheet presenting the destination view over the current view.

D NavigationLink pushes the destination view onto the navigation stack managed by NavigationView when activated.

💡 Hint

Think about how navigation stacks work in iOS apps.

NavigationLink works with NavigationView to push new views onto a stack, allowing back navigation and animation.

Practice

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

easy

A. To display images in a grid layout

B. To create a tappable item that opens a new screen

C. To fetch data from the internet

D. To style text with colors and fonts

Solution

1. Step 1: Understand NavigationLink role

   NavigationLink is used to create tappable items that navigate to another view.

2. Step 2: Compare other options

   Options A, B, and C describe unrelated tasks like styling, fetching data, or layout.

3. Final Answer:

   To create a tappable item that opens a new screen -> Option B

4. Quick Check:

   NavigationLink = tappable navigation [OK]

Hint: NavigationLink always creates tappable navigation items [OK]

Common Mistakes:

• Confusing NavigationLink with styling or data fetching
• Thinking NavigationLink displays images only
• Assuming NavigationLink is for layout purposes

2. Which of the following is the correct syntax to create a NavigationLink with a text label "Next" that opens DetailView()?

easy

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

B. NavigationLink(destination: Text("Next"), DetailView())

C. NavigationLink { DetailView() } label: { Text("Next") }

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

Solution

1. Step 1: Recall NavigationLink syntax

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

2. Step 2: Check each option

   NavigationLink(destination: DetailView()) { Text("Next") } matches the correct syntax. NavigationLink(destination: Text("Next"), DetailView()) swaps parameters incorrectly. NavigationLink { DetailView() } label: { Text("Next") } uses a newer syntax and is valid in SwiftUI 3+, so it is also correct. NavigationLink(destination: Text("Next")) { DetailView() } swaps destination and label views wrongly.

3. Final Answer:

   NavigationLink(destination: DetailView()) { Text("Next") } -> Option D

4. Quick Check:

   Correct parameter order = NavigationLink(destination: DetailView()) { Text("Next") } [OK]

Hint: Destination first, label inside closure for NavigationLink [OK]

Common Mistakes:

• Swapping destination and label parameters
• Using incorrect closure syntax
• Passing views in wrong order

3. What will happen when the user taps the text "Go to Profile" in this SwiftUI code?

NavigationView {
  NavigationLink(destination: ProfileView()) {
    Text("Go to Profile")
  }
}

medium

A. The app navigates to ProfileView screen

B. Nothing happens because NavigationView is missing

C. The text changes color but no navigation occurs

D. The app crashes due to missing NavigationLink label

Solution

1. Step 1: Identify NavigationView and NavigationLink usage

   The code wraps NavigationLink inside NavigationView, enabling navigation.

2. Step 2: Understand tap behavior

   Tapping the text triggers navigation to ProfileView as destination is set.

3. Final Answer:

   The app navigates to ProfileView screen -> Option A

4. Quick Check:

   NavigationView + NavigationLink = navigation works [OK]

Hint: NavigationLink inside NavigationView enables screen navigation [OK]

Common Mistakes:

• Forgetting NavigationView disables navigation
• Thinking tap only changes text color
• Assuming app crashes without label

4. Identify the error in this SwiftUI code snippet:

NavigationLink(destination: Text("Details"))
Text("Tap here")

medium

A. Missing braces {} around the label view

B. Destination cannot be a Text view

C. NavigationLink must be inside a NavigationView

D. Text("Tap here") should be inside destination

Solution

1. Step 1: Check NavigationLink syntax

   NavigationLink requires a closure with braces {} for the label view.

2. Step 2: Analyze given code

   The label Text("Tap here") is outside NavigationLink without braces, causing syntax error.

3. Final Answer:

   Missing braces {} around the label view -> Option A

4. Quick Check:

   Label must be inside braces {} [OK]

Hint: Label view must be inside braces {} after NavigationLink [OK]

Common Mistakes:

• Omitting braces for label view
• Thinking destination can't be Text
• Assuming NavigationView is mandatory for syntax

5. You want to create a list of items where each item navigates to a detail screen showing that item's name. Which code correctly uses NavigationLink inside a List to achieve this?

hard

A. ForEach(items) { NavigationLink(destination: DetailView(name: $0)) { Text($0) } }

B. List { NavigationLink(Text(item), destination: DetailView(name: item)) }

C. List(items, id: \.self) { item in NavigationLink(destination: DetailView(name: item)) { Text(item) } }

D. List(items) { item in NavigationLink { Text(item) } destination: { DetailView(name: item) } }

Solution

1. Step 1: Understand List with NavigationLink

   Use List with identifiable items and NavigationLink inside closure for each item.

2. Step 2: Check each option's correctness

   List(items, id: \.self) { item in NavigationLink(destination: DetailView(name: item)) { Text(item) } } correctly uses List with id and NavigationLink with destination and label. List { NavigationLink(Text(item), destination: DetailView(name: item)) } has wrong parameter order. ForEach(items) { NavigationLink(destination: DetailView(name: $0)) { Text($0) } } uses ForEach but misses id and may cause errors. List(items) { item in NavigationLink { Text(item) } destination: { DetailView(name: item) } } uses invalid syntax for NavigationLink.

3. Final Answer:

   List(items, id: \.self) { item in NavigationLink(destination: DetailView(name: item)) { Text(item) } } -> Option C

4. Quick Check:

   List + NavigationLink with destination and label = List(items, id: \.self) { item in NavigationLink(destination: DetailView(name: item)) { Text(item) } } [OK]

Hint: Use List with id and NavigationLink inside closure [OK]

Common Mistakes:

• Wrong parameter order in NavigationLink
• Missing id in List or ForEach
• Using invalid NavigationLink syntax