iosswiftuiswiftui-tabviewpagetabviewstyle

How can I get rid of index dots on TabView with PageTabViewStyle in SwiftUI?


I have the following code but can't seem to remove the dots at the bottom of the TabView.

struct ContentView: View {
    @Environment(\.managedObjectContext) private var viewContext
    
    @State var users = ["Janice", "Emily", "Candice", "London", "Julia"]

    var body: some View {
        TabView {
            ForEach(users, id: \.self) { user  in
                UserCard(user: user)
            }
        }
        .tabViewStyle(PageTabViewStyle())
        .indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .never))
        .background(Color(.systemGroupedBackground))
    }
}

struct UserCard: View {
    
    let user: String
    
    var body: some View {
        Color.white
            .padding(30)
    }
}

I would have thought the PageIndexViewStyle(backgroundDisplayMode: .never) would remove the index dots but that is not working. Is there any other way to get rid of them?


Solution

  • try this:

    struct ContentView: View {
        @Environment(\.managedObjectContext) private var viewContext
        @State var users = ["Janice", "Emily", "Candice", "London", "Julia"]
    
        var body: some View {
            TabView {
                ForEach(users, id: \.self) { user  in
                    UserCard(user: user)
                }
            }
            .tabViewStyle(.page(indexDisplayMode: .never))  // <--- here
            .background(Color(.systemGroupedBackground))
        }
    }
    
    struct UserCard: View {
        let user: String
        var body: some View {
            Text(user)
        }
    }