UPGRADE YOUR SKILLS: Learn advanced Swift and SwiftUI on Hacking with Swift+! >>

PageTabViewStyle does not play nicely on orientation

Forums > SwiftUI

I have this simple TabView:


TabView(selection: $name) {

 // name is unique
 ForEach(array, id: \.name) { image in

     ZStack {

       Image("\(image.name)")
         .resizable()
         // other modifiers ie drag etc

     }.tag(image.name)

 }

}.tabViewStyle((PageTabViewStyle(indexDisplayMode: .always)))

This works great in portrait mode; I can swipe to next image and back. Should I go back to the first image then turn phone landscape (left), I get the nicely transistion to landscape. Turn phone back to portrait, swipe to second image then put in landscape, I can see a small percentage of the first image. Tap the second image, the image recenters. This is the same of all other images except the first image.

Been digging around and everyone still has this issue. Is there a workaround? I must have ZStack as I have text at the top and bottom of each image.

I'm using both Xcode 13.1 and 13.2 (beta)

3      

Perhaps due to respecting the SafeAreaInsets, you could try .ignoresSafeArea for the TabView, and that should take up the whole screen. Might have to try on children, can't recall which works.

3      

Hola. That seems not to work, sadly 😢 I'm noticing on rotation (landscape) the content, in center, goes to the far right until I tap the screen then it goes to the center.

3      

I've filed a bug report to apple that this simple code does not work when switching from portrait to landscape and vice-versa:


@State private var num: Int = 0

VStack {
    TabView(selection: $num) {

        VStack {
            Text("0")
        }
        .tag(0)
        .frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height)
        .background(Color.red)

        VStack {
            Text("1")
        }
        .tag(1)
        .frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height)
        .background(Color.blue)

        VStack {
            Text("2")
        }
        .tag(2)
        .frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height)
        .background(Color.green)

        VStack {
            Text("3")
        }
        .tag(3)
        .frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height)
        .background(Color.purple)

    }.tabViewStyle(.page)
}

4      

Did you get any update on this @SylarRuby? I'm currently facing the exact same issue. In my case there are only two views inside of TabView, so I decided to reset it to the frst one when the device orientation chagnes.

2      

Hacking with Swift is sponsored by RevenueCat

SPONSORED Take the pain out of configuring and testing your paywalls. RevenueCat's Paywalls allow you to remotely configure your entire paywall view without any code changes or app updates.

Learn more here

Sponsor Hacking with Swift and reach the world's largest Swift community!

Archived topic

This topic has been closed due to inactivity, so you can't reply. Please create a new topic if you need to.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.