SwiftUI TabView with tabViewStyle page runs in iOS simulator but crashes on device

Question

I'm trying to create a SwiftUI iOS app with a NavigationLink at the top level, and a TabView detail view, that uses .page, so I can swipe between tabs. And yes, I know the TabView is typically at the top level, with NavigationLink detal.

The app runs in the iOS simulator, but hangs/crashes on my iPhone.

Here is the code I want to work:

ContentView.swift

struct ContentView: View {

@State private var selection: String? = nil

var body: some View {
    NavigationView {
        VStack {
            NavigationLink(
                destination: DetailView(),
                tag: "tag1",
                selection: $selection) {
                    Text("Show Detail View")
                        .font(.largeTitle .bold())
                }
        }
    }
}

}

DetailView.swift

struct DetailView: View {

@State private var selectedTab = "one"

var body: some View {
    ZStack {
        // 3 main tabs
        TabView(selection: $selectedTab) {
            Text("Tab 1 View")
                .font(.largeTitle .bold())
                .tag("one")

            Text("Tab 2 View")
                .font(.largeTitle .bold())
                .tag("two")

            Text("Tab 3 View")
                .font(.largeTitle .bold())
                .tag("three")
        }
        // no dots
        .tabViewStyle(.page)
        // .tabViewStyle(PageTabViewStyle())
        // .id(UUID())

        VStack {
            Text("\(selectedTab)")
            Spacer()
        }
    }
}

}

A simplified DetailView also crahses in the same way:

Simplified detailView.swift

struct DetailView: View {
var body: some View {
    TabView {
        Text("Tab One")
            .font(.largeTitle .bold())
            .tag("one")

        Text("Tab Two")
            .font(.largeTitle .bold())
            .tag("two")
    }
    // no dots
    .tabViewStyle(.page)
}

}

When I run this on my iPhone, I can select the NavigationLink. it dims then hangs without rendering the detailView(). Much later, I get an error dialog, indicating the app was terminated due to a memory issue.

App runs on device if I remove the tabViewStyle modifier. Of course, it defaults to a traditional tab view with controls on the bottom of the device.

I am running Xcode 13.2.1 (13C100) on an M1 mac mini running macOS Monterey 12.2.1 (21D62). I am running on an iPhone 8 Plus running iOS 15.3.1. Xcode, by default, has an iOS Deployment Target of iOS 15.2.

Any suggestions?

Answer 1

Example using a Picker :

struct DetailView: View {
    @State private var selection: Tab = .tabOne
    enum Tab {
        case tabOne
        case tabTwo
    }

    var body: some View {
        TabView(selection: $selection) {
            Text("Tab One")
                .font(.largeTitle .bold())
                .tag(Tab.tabOne)
            
            Text("Tab Two")
                .font(.largeTitle .bold())
                .tag(Tab.tabTwo)
        }
        // no dots
        .tabViewStyle(.page)
        Picker("Details", selection: $selection) {
            Image(systemName: "1.circle").tag(Tab.tabOne)
            Image(systemName: "2.circle").tag(Tab.tabTwo)
        }
        .pickerStyle(.segmented)
    }
}