Wesley de Groot's Blog
Simplifying App Onboarding with OnboardingKit

Back

Creating a smooth and engaging onboarding experience is crucial for any app.
OnboardingKit, a SwiftUI package available on GitHub, provides a comprehensive solution to help developers create these experiences effortlessly.
In this article, we'll explore the features of OnboardingKit and how you can use it to enhance your app's onboarding process.

What is OnboardingKit?

OnboardingKit is a SwiftUI package designed to simplify the creation of onboarding experiences for iOS and macOS apps.
It offers a set of customizable views that you can use to create welcome screens, "what's new" screens, and other onboarding screens.
This package is particularly useful for developers looking to provide a seamless introduction to their app's features and updates.

Key Features

  1. Welcome Screen: OnboardingKit allows you to create a welcome screen that can be displayed when the app is launched for the first time. This screen can include a series of slides, each highlighting different features of your app.

  2. What's New Screen: You can use OnboardingKit to inform users about new features or updates in your app. This screen can be shown after an app update to keep users informed about the latest changes.

  3. Customizable Views: The views provided by OnboardingKit are highly customizable. You can easily change the content, colors, and layout to match your app's design.

  4. Helper Class: OnboardingKit includes a helper class that provides information about your app, such as the app name, version number, and build number. This can be useful for displaying dynamic content in your onboarding screens.

Installation

To install OnboardingKit, you can use Swift Package Manager. Add the following dependency to your Package.swift file:

dependencies: [
    .package(url: "https://github.com/0xWDG/OnboardingKit.git", .branch("main"))
]

Then, import OnboardingKit in your Swift files:

import OnboardingKit

Welcome Screem

Here's a basic example of how to use OnboardingKit to create a welcome screen:

import SwiftUI
import OnboardingKit

struct ContentView: View {
    @State private var showWelcomeScreen = {
        if UserDefaults.standard.bool(forKey: "hasSeenIntroduction") {
            return false
        }
        return true
    }()

    private var features: [WelcomeCell] = [
        WelcomeCell(image: "star", title: "Welcome", subtitle: "To %APP_NAME%")
    ]

    var body: some View {
        TabView {
            // Your tab view code
        }
        .sheet(isPresented: $showWelcomeScreen) {
            WelcomeScreen(show: $showWelcomeScreen, items: features) {
                UserDefaults.standard.setValue(true, forKey: "hasSeenIntroduction")
            }
        }
    }
}

In this example, the WelcomeScreen view is displayed as a sheet when the app is launched for the first time.
The WelcomeCell struct is used to define the content of each slide in the welcome screen.

What's new screen

OnboardingKit also supports also a "what's new" screen only, which you can pop up only when the app version changes:

import SwiftUI
import OnboardingKit

struct ContentView: View {
    @State private var showWhatsNew = {
        if let dictionary = Bundle.main.infoDictionary,
           let dVersion = dictionary["CFBundleShortVersionString"] as? String,
           let whatsNew = UserDefaults.standard.value(forKey: "whatsNew") as? String,
           whatsNew == dVersion {
            return false
        }
        return true
    }()

    var body: some View {
        TabView {
            // Your tab view code
        }
        .sheet(isPresented: $showWhatsNew) {
            WhatsNew(show: $showWhatsNew, text: "This is new!")
        }
    }
}

In this example, the WhatsNew view is displayed only if the app version has changed since the last launch.

Conclusion

OnboardingKit is a powerful tool for creating engaging and informative onboarding experiences in your SwiftUI apps.
By leveraging its customizable views and helper classes, you can ensure that your users have a smooth introduction to your app's features and updates.
Whether you're building a welcome screen or a "what's new" screen, OnboardingKit makes the process straightforward and efficient.

For more information and to get started with OnboardingKit, visit the OnboardingKit GitHub repository.

Read more

Share


Share Mastodon Twitter LinkedIn Facebook
x-twitter mastodon github linkedin discord threads instagram whatsapp bluesky square-rss sitemap