App Clips overview in iOS Swift - Mini App: Build & Ship

Build: App Clip Welcome Screen

This screen welcomes users to the App Clip and shows a brief message with a button to open the full app.

Target UI

-------------------------
|      App Clip         |
|-----------------------|
| Welcome to our App!   |
|                       |
| [Open Full App]       |
-------------------------

Show a title 'App Clip' at the top center

Display a welcome message below the title

Add a button labeled 'Open Full App' centered below the message

When the button is tapped, print 'Open full app tapped' to the console

Starter Code

iOS Swift

import SwiftUI

struct AppClipWelcomeView: View {
    var body: some View {
        VStack {
            // TODO: Add title text here
            // TODO: Add welcome message here
            // TODO: Add button here
        }
        .padding()
    }
}

struct AppClipWelcomeView_Previews: PreviewProvider {
    static var previews: some View {
        AppClipWelcomeView()
    }
}

Task 1

Task 2

Task 3

Task 4

Solution

iOS Swift

import SwiftUI

struct AppClipWelcomeView: View {
    var body: some View {
        VStack(spacing: 20) {
            Text("App Clip")
                .font(.largeTitle)
                .fontWeight(.bold)
                .multilineTextAlignment(.center)
            Text("Welcome to our App!")
                .font(.title3)
                .multilineTextAlignment(.center)
            Button(action: {
                print("Open full app tapped")
            }) {
                Text("Open Full App")
                    .font(.headline)
                    .padding()
                    .frame(maxWidth: .infinity)
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(10)
            }
            .accessibilityLabel("Open Full App Button")
        }
        .padding()
    }
}

struct AppClipWelcomeView_Previews: PreviewProvider {
    static var previews: some View {
        AppClipWelcomeView()
    }
}

This SwiftUI view uses a vertical stack (VStack) to arrange the title, message, and button vertically with spacing.

The title uses a large bold font and is centered. The welcome message uses a smaller title font and is also centered.

The button has a blue background with white text and rounded corners to look tappable. When tapped, it prints a message to the console.

Accessibility label is added to the button for screen readers.

Padding is added around the content for spacing from screen edges.

Final Result

Completed Screen

-------------------------
|      App Clip         |
|-----------------------|
| Welcome to our App!   |
|                       |
| [Open Full App]       |
-------------------------

Tapping 'Open Full App' prints 'Open full app tapped' in the Xcode console

Stretch Goal

Add a link that opens the full app using a URL scheme when the button is tapped

💡 Hint

Use UIApplication.shared.open(URL) inside the button action with a valid URL scheme for your full app