Why tabView jumps one view back on orientation change?

Question

Created Nov ’20

Replies 6

Boosts 0

Views 3.7k

Participants 11

I have a simple tabView, and when I change the orientation of my iPhone (from portrait to landscape) tab jumps one tab back. For example, if you are on page 2 and rotate your device, it goes to 1, but it should stay on page 2. Why this unwanted jump happens? Am I missing something?

(The weird thing about this issue is when you turn the device back to portrait (from landscape), it doesn't jump.)

Code Block struct ContentView: View {
    @State var currentPage: Int = 1
    var body: some View {
            ZStack {
                TabView(selection: $currentPage) {
                    Text("1").tag(0)
                    Text("2").tag(1)
                    Text("3").tag(2)
                }
.indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .never))
.tabViewStyle(PageTabViewStyle())
        }
    }
}

I'm running the latest iOS and Xcode version.

Boost

Answer 1

adesugbaa OP

Jan ’21

I have the same issue. Did you find a solution?

2

Answer 2

skuenstler OP

Mar ’21

Same here - in my case it is even more than one Tab jump that the rotation to landscape or back to portrait causes.

Coud it be because the TabView-frame is much wider than tall ? But shouldn't the TabView rotation take care of this.

My rotation is made as follows:

Code Block Swiftstruct DeviceRotationViewModifier: ViewModifier {
   
  let action: (UIDeviceOrientation) -> Void
  func body(content: Content) -> some View {
    content
      .onAppear()
      .onReceive(NotificationCenter.default.publisher(for: UIDevice.orientationDidChangeNotification)) { _ in
        action(UIDevice.current.orientation)
      }
  }
}

Code Block Swiftextension View {
   
  func onRotate(perform action: @escaping (UIDeviceOrientation) -> Void) -> some View {
    self.modifier(DeviceRotationViewModifier(action: action))
  }
}

And finally, where I rotate my TabView:

Code Block SwiftTabView(selection: self.$selectedTab) {
   ...
}
    .tabViewStyle(PageTabViewStyle())
    .onRotate { _ in
      print(selectedTab)
    }

Any solution to this problem is highly appreciated, thank you.

2

Answer 3

Skyler_S OP

Oct ’21

Apple Feedback filed

0

Answer 4

saphillips9 OP

Mar ’22

If you set the frame width on the tabview, the page will not change on rotation. I use the maximum of the screen width and height as the tabview frame width, and that seems to work well.

struct ContentView: View {

    @State var currentPage: Int = 1

    var body: some View {

            ZStack {

                TabView(selection: $currentPage) {

                    Text("1").tag(0)

                    Text("2").tag(1)

                    Text("3").tag(2)

                }
.frame(width: max(UIScreen.main.bounds.width, UIScreen.main.bounds.height))      .indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .never))
.tabViewStyle(PageTabViewStyle())

        }

    }

}

3

Answer 5

secondstagerob OP

Jul ’22

The above frame(width:) work-around did not work for me (iOS 16 beta 3). I was getting jerky animations and sometimes incorrect sizes. What did work was to set the selectedTab back to the proper tab, as follows:

.onReceive(NotificationCenter.default.publisher(for: UIDevice.orientationDidChangeNotification)) { info in
    let currentTab = selectedTab
    DispatchQueue.main.async {
       if currentTab != selectedTab {
          selectedTab = currentTab
       }
     }
 }

In the code above, selectedTab is my @State variable that is bound to the TabView's selection.

The value of selectedTab when the onReceive is executed is the current value -- the value before this bug changes the selection. Dispatching and setting selectedTab back corrects the change from the bug.

This seems to work well for me.

Filed as FB10871235.

0

Answer 6

AchrafTrabelsii OP

May ’24

Any solution for this please ?

0