DEV Community

Cover image for Onboarding Flow in iOS 18 - #30DaysOfSwift
Vaibhav Dwivedi
Vaibhav Dwivedi

Posted on • Edited on

1

Onboarding Flow in iOS 18 - #30DaysOfSwift

Day 4: Welcome them in style! 🎉

In the Fifth post of #30DaysOfSwift series, let's learn how to add an onboarding screen to your SwiftUI (or UIKit) based iOS App.

Onboarding is essential to guide new users through the features of your app.

Image description

Here's code for you to copy from:

struct ContentView: View {
    @State private var showOnboarding = false

    var body: some View {
        VStack {
            if showOnboarding {
                OnboardingView()
            } else {
                MainView() // Your main app content
            }
        }
        .onAppear {
            checkUser() // Check onboarding status
        }
    }

    func checkUser() {
        // Logic to check if user is onboarded
        let userOnboarded = UserDefaults.standard.bool(forKey: "userOnboarded")
        showOnboarding = !userOnboarded
    }
}

struct OnboardingView: View {
    var body: some View {
        VStack {
            TabView {
                VStack {
                    Image(systemName: "star.fill")
                        .resizable()
                        .frame(width: 100, height: 100)
                    Text("Welcome to the App")
                        .font(.largeTitle)
                        .bold()
                        .padding()
                    Text("Discover amazing features")
                        .font(.subheadline)
                        .padding()
                }

                VStack {
                    Image(systemName: "heart.fill")
                        .resizable()
                        .frame(width: 100, height: 100)
                    Text("Stay Connected")
                        .font(.largeTitle)
                        .bold()
                        .padding()
                    Text("Connect with friends and family")
                        .font(.subheadline)
                        .padding()
                }
            }
            .tabViewStyle(PageTabViewStyle())
            .indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))

            Button("Get Started") {
                // Mark user as onboarded
                UserDefaults.standard.set(true, forKey: "userOnboarded")
                // Navigate to the main content
            }
            .padding()
            .background(Color.blue)
            .foregroundColor(.white)
            .cornerRadius(10)
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

How it works:

  1. The ContentView checks if the user has been onboarded via UserDefaults. If not, the onboarding screen is shown.
  2. Once the user taps "Get Started," we set a flag in UserDefaults to ensure the onboarding screen doesn’t show up again.

Happy Coding!

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more