Chapter 9: Onboarding App

What you’ll learn in this chapter:

  • How to create an onboarding experience for a SwiftUI app
  • How to utilise a TabView to let the user swipe through multiple subviews
  • How to work with dark- and light mode in the Preview simulator

What we’ll create in this chapter 🚀

In this chapter, we will build an onboarding screen using SwiftUI. Usually, such onboarding screens are presented the first time an installed app is launched and provide the user with an introduction to the functionalities of the specific app.

We will create an onboarding experience for a hypothetical mediation app called “Calmify”. The onboarding screen will consist of three subviews. The user will be able to navigate through them by either swiping left or right or by tapping on a “Next” button.

Before we start, make sure you create a new Xcode project named “Onboarding” and copy the necessary images to your Assets folder.

Our app’s architecture 🏛

Before we get started, let’s briefly talk about how we are going to build up our app hierarchically. 

At the top of the view hierarchy, there should be a NavigationView. This NavigationView should contain a custom “NavigatorView” (the area where the user can manually navigate back and forth by tapping on the corresponding Button). On the other hand, our NavigationView should contain a so-called TabView. 

The TabView will contain our three subviews, each with one Image and two Text views. The TabView functionality will allow the user to navigate through these subviews by swiping left or right. 

Leave a Reply

Your email address will not be published. Required fields are marked *