How to stop the page from being able to be scrolled up and down while using a paged tab view in swiftUI

Question

I am trying to build an app that shows different days of the week in a paged tab view, but when I scroll sideways to a day (e.g. Tuesday), I can scroll it up and down as if it was a scroll view. I don't have a scroll view in my content view.

My code is something like this:

struct ContentView: View {
    var body: some View {
        TabView {
            Text("Saturday")
            Text("Sunday")
            Text("Monday")
            Text("Tuesday")
            Text("Wednesday")
            Text("Thursday")
            Text("Friday")
        }
        .tabViewStyle(PageTabViewStyle())
    }
}

This is a known issue. See here https://stackoverflow.com/a/66817866/8197946 — rbaldwin, Jul 03 '21 at 18:24

score 3 · Accepted Answer · answered Jul 03 '21 at 18:20

You can do that like this

Put TabView inside the ScrollView with .onAppear()

.onAppear(perform: {
            UIScrollView.appearance().alwaysBounceVertical = false
})

struct ContentView: View {
    var body: some View {
        ScrollView(.vertical, showsIndicators: false) {
            TabView {
                Text("Saturday")
                Text("Sunday")
                Text("Monday")
                Text("Tuesday")
                Text("Wednesday")
                Text("Thursday")
                Text("Friday")
            }
            .tabViewStyle(PageTabViewStyle())
            .frame(width: 300, height: 600, alignment: .center)
        }
        .frame(width: 300, height: 600, alignment: .center)
        .background(Color.blue)
        .onAppear(perform: {
            UIScrollView.appearance().alwaysBounceVertical = false
        })
    }
}

How to stop the page from being able to be scrolled up and down while using a paged tab view in swiftUI

1 Answers1