Navigation path management in iOS Swift - Mini App: Build & Ship

Build: Simple Navigation Flow

This screen demonstrates managing navigation paths using a NavigationStack. The user can navigate forward to a detail screen and go back using the navigation bar.

Target UI

Main Screen
+---------------------+
| Simple Navigation    |
|                     |
| [Go to Detail]       |
+---------------------+

Detail Screen
+---------------------+
| Detail View         |
|                     |
| [Back] (nav bar)    |
+---------------------+

Use NavigationStack to manage navigation path

Main screen with a button labeled 'Go to Detail'

Tapping the button pushes a DetailView onto the stack

DetailView shows a text 'Detail View' and a back button in the navigation bar

Back button returns to the main screen

Starter Code

iOS Swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationStack {
            VStack {
                // TODO: Add navigation button here
            }
            .navigationTitle("Simple Navigation")
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Task 1

Task 2

Solution

iOS Swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationStack {
            VStack {
                NavigationLink("Go to Detail", destination: DetailView())
                    .padding()
            }
            .navigationTitle("Simple Navigation")
        }
    }
}

struct DetailView: View {
    var body: some View {
        Text("Detail View")
            .font(.title)
            .navigationTitle("Detail View")
            .navigationBarTitleDisplayMode(.inline)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

We use NavigationStack to manage the navigation path. The main screen has a NavigationLink labeled "Go to Detail" that pushes DetailView onto the stack when tapped. The DetailView shows a simple text and sets its own navigation title. The back button is automatically provided by NavigationStack in the navigation bar, allowing the user to return to the main screen.

Final Result

Completed Screen

Main Screen
+---------------------+
| Simple Navigation    |
|                     |
| [Go to Detail]       |
+---------------------+

Detail Screen
+---------------------+
| Detail View         |
|                     |
| (Back button in nav bar) |
+---------------------+

Tap 'Go to Detail' button navigates to DetailView screen

Back button in navigation bar returns to Main Screen

Stretch Goal

Add a third screen called 'More Details' that can be navigated to from DetailView with a button labeled 'More Info'.

💡 Hint

Add a NavigationLink inside DetailView that pushes a new MoreDetailsView. Make sure to set navigation titles for all screens.