Search code examples
swiftswiftuitvosswiftui-tabview

How can I fix - Swiftui tabview focus error on tvOS 15.2


In tvOS 15.2, when using tabView in scroll, it comes back when going from left to right. While tvOS 14 and 16 don't have this issue, I'm facing this issue in 15.2.

You can see the gif : https://gifyu.com/image/SmE5Q

My code

import SwiftUI

struct ContentView: View {
    @State var index: Int = 0
    var body: some View {
    
    
    ScrollView(showsIndicators: true) {
        VStack {
            TabView(selection: $index) {
                ForEach(0..<5, id: \.self) { item in
                    //PageContent(model: data[item])
                    Button {
                        
                    } label: {
                        Text("METIN ATALAY \(item)")
                    }
                }
            }
            .background(Color.yellow)
            .tabViewStyle(PageTabViewStyle(indexDisplayMode: .always))
            .padding(.bottom, 0)
            .frame(width: UI.screenSize.width, height: UI.screenSize.height * 0.64)
            
            Button {
                
            } label: {
                Text("\(UUID().uuidString)")
            }
            


               Button {
                    
                } label: {
                    Text("\(UUID().uuidString)")
                }
                
            }
            
        }
    }
}

struct UI {
    static let screenBounds: CGRect = UIScreen.main.bounds
    static let screenSize: CGSize = CGSize(width: screenBounds.width, height: screenBounds.height)
}

Solution

  • Instead of using TabView the below solution fixed my issue

    VStack {
            ScrollView(.horizontal) {
                ScrollViewReader { proxy in
                    HStack(spacing: 0) {
                        ForEach(0..<data.count, id: \.self) { index in
                            PageContent(model: data[index])
                                .id(index)
                        }
                    }
                    .onChange(of: pageIndex) { newValue in
                        withAnimation {
                            proxy.scrollTo(newValue, anchor: .leading)
                        }
                    }
                }
            }.padding(.bottom)
                .frame(width: deviceSize.width, height: layout.getBannerHeight(by: deviceSize))
        }