How it works
TabViewStyle is the protocol that defines how a TabView presents and switches between its child views. A TabView on its own gives you a default platform appearance — a bottom tab bar on iOS — but when you want a different interaction model, such as swipeable, paged content, you conform to or select a TabViewStyle instead of rebuilding the navigation yourself. SwiftUI ships concrete styles you reach for through the tabViewStyle(_:) modifier, so adopting one is a single declarative line rather than custom gesture and layout code. Reach for it whenever the standard tab presentation doesn't fit, most commonly to turn a TabView into a horizontally paged carousel.
Apply a style with the tabViewStyle(_:) modifier
TabViewStyle is consumed through the tabViewStyle(_:) view modifier, which you attach to a TabView and pass a concrete style value. The modifier propagates the chosen style down to the TabView in its subtree, so it must sit on the TabView itself. In the example,
.tabViewStyle(.page)is chained directly onto theTabView { ... }to change its entire presentation.Select a built-in conformance like PageTabViewStyle
Rather than implementing the protocol yourself, you typically pass one of SwiftUI's provided conforming styles. The static accessor
.pageresolves to PageTabViewStyle, which lays the tabs out as full-width pages the user swipes between and adds a page-indicator control. Here.pagereplaces the default tab bar so the three colored pages become a swipeable carousel.Let each child of TabView become one page
The style governs how the direct children of the TabView are treated — under the page style each top-level view is one full page. The example's three views,
Color.blue.overlay(...),Color.green.overlay(...), andColor.orange.overlay(...), each become a separate swipeable page purely because of the style applied above them; no per-page configuration is required.Tune the style with its associated parameters
Some styles accept parameters that refine their behavior. PageTabViewStyle takes an index-display mode controlling when the page dots appear, written as
.page(indexDisplayMode:). Passing.pageuses the automatic mode, while.page(indexDisplayMode: .never)would hide the indicator entirely without otherwise changing the paging behavior.
.tabViewStyle(.page) to .tabViewStyle(.page(indexDisplayMode: .never)) to hide the page-dot indicator and confirm the swipe-to-page behavior still comes entirely from the style.Example & preview
Press Run live & edit to compile it in your browser — then edit the Swift on the left and the preview re-renders live.
struct TabViewStyleDemo: View {
var body: some View {
TabView {
Color.blue.overlay(Text("Page 1").foregroundStyle(.white))
Color.green.overlay(Text("Page 2").foregroundStyle(.white))
Color.orange.overlay(Text("Page 3").foregroundStyle(.white))
}
.tabViewStyle(.page)
.frame(height: 240)
.padding()
}
}