Search code examples
listswiftuiscrollviewpagetabviewstyle

SwiftUI: PageTabViewStyle() newly broken when inside ScrollView or List?


So this bug appeared out of nowhere. I have a TabView with PageTabViewStyle() for displaing images inside a ScrollView. Below the images is other content (header, text etc, not relevant for this example).

Everything used to work fine, but after the recent updates, the PageTabView does not appear correctly when inside a ScrollView or List! I tested replacing the ScrollView with VStack and it appears as it should - but I am losing the functionality I want, i.e. scrollview with images and text.

How it should look (and looked until recently): https://i.sstatic.net/FIqkG.jpg

How it looks now: https://i.sstatic.net/UeOX8.jpg

Any solutions would be much appreciated!

// images is an array of identifiable strings, corresponding to images in assets

ScrollView {

  TabView {
    ForEach(images) { image in
      Image(image)
        .resizable()
        .scaledToFill()
        .frame(width: UIScreen.main.bounds.width - 32, height: UIScreen.main.bounds.height / 3.5)
        .clipShape(RoundedRectangle(cornerRadius: 20))
    } //: ForEach
  } //: TabView
  .tabViewStyle(PageTabViewStyle())

  // other content (header, text etc)...

}

Solution

  • If you're embedding PageTabView inside ScrollView then explicitly assign height of your TabView:

    ScrollView(.vertical, showsIndicators: false){
        TabView{
            Image("imageName")
                .resizable()
                .scaledToFill()
        }
        .tabViewStyle(PageTabViewStyle())
        .frame(height: 300)
    }
    

    You can customise it according to your need.