0
0
iOS Swiftmobile~20 mins

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

Choose your learning style9 modes available
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.