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

Question

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)
}

score 0 · Accepted Answer · answered Jan 24 '23 at 18:35

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))
    }

score 0 · Answer 2 · answered Apr 05 '23 at 11:46

you can use the example code for tvOS < 16

  func tvOS_Body() -> some View {
       return Group {
            VStack {
                ScrollViewRTL(axis: .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 {
                                if LocalizationManager.language.forceLayoutRTL {
                                    bannerRTLIndex = (data.count - 1) - newValue
                                } else {
                                    bannerRTLIndex = newValue
                                }
                                
                                proxy.scrollTo(newValue, anchor: .leading)
                            }
                        }
                    }
                }.padding(.bottom)
                    .frame(width: deviceSize.width, height: layout.getBannerHeight(by: deviceSize))
            }
            
            PageControlView(numberOfPages: data.count,
                            currentIndex: $bannerRTLIndex,
                            isFocused: isFocused,
                            animation: .standard,
                            primaryColor: .AppColor.accent)
            .onLoad {
                if LocalizationManager.language.forceLayoutRTL {
                    bannerRTLIndex = data.count - 1
                }
                firstLoad = true
            }
        }
    }

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

2 Answers2