How to use PageTabViewStyle in SwiftUI

Change tabs in your app with style

Photo by Charles Deluvio on Unsplash.

At the recent WWDC 2020, Apple introduced an additional style for TabView called PageTabViewStyle. This is equivalent to Horizontal Paging Scroll, which is commonly used for the onboarding screen.

“A TabViewStyle that implements a paged scrolling TabView.” — Apple Documentation

Prerequisites

To follow along with this tutorial, you’ll need some basic knowledge in:

• Swift
• At least Xcode 12+

Note: This only supports iOS 14+.

Getting Started With PageTabViewStyle

Let’s quickly set up four tabs on the TabView with the capabilities of showing a filled image when selected and an unfilled image when unselected.

To have that, you will need to have a state to know what is being selected:

@State private var selected = 0

With this, the default selected tab is always 0 and you can change this to your preference: