Onboarding Screen
On your first app launch, it is wise to perform a little onboarding for your users. This way you can introduce them to your app, show them the main features, and get them excited to use it.
Because every app is unique, and we certrainly wouldn't know how to create an onboarding experience that would fit every app, we provide a simple, customizable onboarding screen that they can use as a starting point.
Out of the box, we use hero views, but you can replace them with your custom views. Then, you'll have a simple carousel with a button to move to the next page and to close the onboarding on the last page.
To change the appeared views without much modification, add your views to the onboardingPages array in the OnboardingView.swift file,
and adapt the page count in the ForEach loop.
private let onboardingPages: [AnyView] = [
AnyView(
HeroView(
sfSymbolName: "scribble.variable",
title: "Onboarding Page 1",
subtitle: "Lorem ipsum dolor sit amet,\nconsectetur adipiscing elit, sed do.",
bounceOnAppear: true
)
),
AnyView(
/* Hero View 2 */
),
AnyView(
/* Hero View 3 */
),
]struct OnboardingView: View {
@State var pageIndex: Int = 0
// ...
var body: some View {
VStack {
TabView(selection: $pageIndex) {
ForEach(0..<3) { index in // <- Add the count here when adding or removing views in onboardingPages above
onboardingPages[index]
.tag(index)
}
}
.tabViewStyle(.page(indexDisplayMode: .never)) // don't show the page dots
// ... button to continue
}
// ...
}
}Appearance Logic
To check if the new onboarding screen should be shown, we check the last opened app version in UserDefaults.
By default (on first app launch), the value is "NONE", which means that we should show the onboarding screen.
The key to the app version UserDefaults and other UserDefaults is defined in the Constants struct.
struct ShowOnboardingViewOnFirstLaunchEverModifier: ViewModifier {
@AppStorage(Constants.UserDefaults.General.lastAppVersionAppWasOpenedAt)
private var lastAppVersionAppWasOpenedAt: String = "NONE"
@State private var showOnboarding: Bool = false
func body(content: Content) -> some View {
Group {
if showOnboarding {
OnboardingView {
withAnimation(.bouncy) {
showOnboarding = false
}
}
.transition(.opacity)
} else {
content
.transition(.opacity)
}
}
.onAppear {
// ...
self.showOnboarding = lastAppVersionAppWasOpenedAt == "NONE"
// ...
}
}
}