Passing data to destination in iOS Swift - Mini App: Build & Ship

Build: User Detail Screen

This app has a list of users. When you tap a user, it opens a detail screen showing the user's name passed from the list screen.

Target UI

User List Screen
----------------
| Alice       > |
| Bob         > |
| Charlie     > |
----------------

User Detail Screen
--------------------
| User Name: Alice  |
|                   |
| [Back]            |
--------------------

Create a User List screen with a list of user names.

When a user taps a name, navigate to User Detail screen.

Pass the selected user name to the User Detail screen.

Display the passed user name on the User Detail screen.

Add a back button to return to the User List screen.

Starter Code

iOS Swift

import SwiftUI

struct UserListView: View {
    let users = ["Alice", "Bob", "Charlie"]

    var body: some View {
        NavigationView {
            List(users, id: \.self) { user in
                // TODO: Add NavigationLink to UserDetailView passing user
                Text(user)
            }
            .navigationTitle("User List")
        }
    }
}

struct UserDetailView: View {
    let userName: String

    var body: some View {
        VStack {
            // TODO: Display userName here
            Spacer()
        }
        .navigationTitle("User Detail")
        .navigationBarTitleDisplayMode(.inline)
    }
}

struct ContentView: View {
    var body: some View {
        UserListView()
    }
}

@main
struct PassingDataApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

Task 1

Task 2

Solution

iOS Swift

import SwiftUI

struct UserListView: View {
    let users = ["Alice", "Bob", "Charlie"]

    var body: some View {
        NavigationView {
            List(users, id: \.self) { user in
                NavigationLink(destination: UserDetailView(userName: user)) {
                    Text(user)
                }
            }
            .navigationTitle("User List")
        }
    }
}

struct UserDetailView: View {
    let userName: String

    var body: some View {
        VStack {
            Text("User Name: \(userName)")
                .font(.title)
                .padding()
            Spacer()
        }
        .navigationTitle("User Detail")
        .navigationBarTitleDisplayMode(.inline)
    }
}

struct ContentView: View {
    var body: some View {
        UserListView()
    }
}

@main
struct PassingDataApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

We use NavigationLink in the list to navigate to UserDetailView. We pass the selected user name as a parameter to UserDetailView. Inside UserDetailView, we display the passed user name in a Text view. The navigation view automatically provides a back button to return to the list.

This is a simple way to pass data between screens in SwiftUI using navigation.

Final Result

Completed Screen

User List Screen
----------------
| Alice       > |
| Bob         > |
| Charlie     > |
----------------

User Detail Screen (after tapping Alice)
--------------------
| User Name: Alice  |
|                   |
| [Back]            |
--------------------

Tap a user name in the list to open the detail screen showing that user's name.

Tap the back button to return to the user list.

Stretch Goal

Add a button on User Detail screen to share the user name using the iOS share sheet.

💡 Hint

Use SwiftUI's .sheet modifier with UIActivityViewController wrapped in UIViewControllerRepresentable.