How to show a SwiftUI onboarding screen only when to app launches for the first time

A lot of people recently asked us how to tell SwiftUI that a certain screen, for instance an onboarding view, should only be shown when the app launches the first time. To implement this functionality, follow the steps below👇

Step 1: Make sure you already set up your onboarding view that should be shown when the app launches for the first time. We made a whole tutorial about creating a multi-paged one.

struct OnboardingView: View {
    
    //Compose your Onboarding view, tutorial can be found here:
    //https://blckbirds.com/post/how-to-create-a-onboarding-screen-in-swiftui-1/
    
}

Step 2: Next, make sure you created your home view that should be shown when the app has already launched before.⠀

struct HomeView: View {
    //Compose your home view
}

Step 3: Next, we need to take control of when to show which view. For this purpose, we create an ObservableObject which serves as the “router” for our SwiftUI app’s views. This is basically the same technique we use for navigating independently between several views in SwiftUI.

class ViewRouter: ObservableObject {
    
    @Published var currentPage: String
    
}

Step 4: Next, we create the MotherView which holds both, our onboarding view and our default home view. Based on our ViewRouter’s currentPage property, we either load the onboarding or the home view.

struct MotherView : View {
    
    @EnvironmentObject var viewRouter: ViewRouter
    
    var body: some View {
        VStack {
            if viewRouter.currentPage == "onboardingView" {
                OnboardingView()
            } else if viewRouter.currentPage == "homeView" {
                HomeView()
            }
        }
    }
}
struct MotherView_Previews: PreviewProvider {
    static var previews: some View {
        MotherView().environmentObject(ViewRouter())
    }
}

Step 5: In our SceneDelegate.swift file’s scene function, we set our MotherView as the root view when the app launches.⠀

func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        if let windowScene = scene as? UIWindowScene {
            let window = UIWindow(windowScene: windowScene)
            
            window.rootViewController = UIHostingController(rootView: MotherView().environmentObject(ViewRouter()))
            self.window = window
            window.makeKeyAndVisible()
        }
    }

Step 6: The trick now is to decide which view should be shown when the ViewRouter gets initialised (which is at the app’s launch!). For this purpose, we use UserDefaults. If there is already a key called “didLaunchBefore” stored, we tell our ViewRouter to show the home view at the app’s launch. When no key can be found, we know that it’s the first time the app launches and we tell our ViewRouter to display the onboarding view. Then, we create such a key so that when launching the app the next time, the home view gets chosen instead.⠀

class ViewRouter: ObservableObject {
    init() {
        if !UserDefaults.standard.bool(forKey: "didLaunchBefore") {
            UserDefaults.standard.set(true, forKey: "didLaunchBefore")
            currentPage = "onboardingView"
        } else {
            currentPage = "homeView"
        }
    }
    
    @Published var currentPage: String
    
}

And that’s it! With this technique, you can tell your SwiftUI app to show the onboarding screen only when the app launches for the first time 💡

We’ve uploaded the whole source code of this app to GitHub.

I hope you enjoyed this tutorial! If you want to learn more about SwiftUI, check out our other tutorials! Also make sure you follow us on Instagram and subscribe to our newsletter to not miss any updates, tutorials and tips about SwiftUI and more!