Question: TabView inside the ScrollViewWithStickyHeader

[gabrielribeiro]

Congrats on the work! Such a stunning library! It definitely improved my app UI!

Just a question: is it possible to have a TabView (page control) inside the ScrollViewWithStickyHeader header and have all the gestures working?

I want to develop something like that:

[danielsaidi]

Hey @gabrielribeiro

Thank you, happy to hear that it helped!

Sure, it should work right away. I basically just replaced the preview header in the SpotifyPreviewScreen with this:

func scrollViewHeader() -> some View {
    TabView {
        Color.red
        Color.green
        Color.blue
    }
    .tabViewStyle(.page)
}

and the result becomes:

So it seems to work pretty well :) But you need to adjust the docked state so that it's based on the currently active page, otherwise you'll get this when scrolling while the second (green) page is active:

[gabrielribeiro]

Wow that's awesome! Thank you so much for the help!

[danielsaidi]

Also, if you don't need the pinned behavior, you can just use the ScrollViewHeader inside a regular ScrollView :)

ScrollView {
    VStack {
        ScrollViewHeader {
            TabView {
                Color.red
                Color.green
                Color.blue
            }
            .tabViewStyle(.page)
        }
         .frame(height: 250)

        LazyVStack {
            ForEach(0...100, id: \.self) {
                Text("\($0)")
            }
        }
    }
}

The result becomes: