SwiftUI tvOS: NavigationLink with button style custom disables auto scroll in List view

447 Views Asked by At

I want to achieve a .buttonStyle(.card) scrolling behaviour in custom button style in NavigationLink.

NavigationLink {
    Color.blue
} label: {
    listItem(model: model)
}
.buttonStyle( 
   HomeCardStyle(onFocusChange: { isFocused in 
      if isFocused { 
         // My Custom Code 
      } 
   }) 
)

Button Style Code:

struct HomeCardStyle: ButtonStyle {
    let onFocusChange: (Bool) -> Void
    @Environment(\.isFocused) private var focused: Bool

    func makeBody(configuration: Self.Configuration) -> some View {
        configuration.label
            .overlay(
                Rectangle()
                    .stroke(
                        Color.yellow,
                        lineWidth: focused ? Constants.UI.Padding.xxSmall : Constants.UI.Padding.zero
                    )
                    .shadow(
                        color: focused ? .yellow : .clear,
                        radius: Constants.UI.Padding.xxxxxSmall,
                        x: Constants.UI.Padding.zero,
                        y: Constants.UI.Padding.one
                    )
            )
            .contentShape(Rectangle())
            .padding(.horizontal, focused ? Constants.UI.Padding.default : Constants.UI.Padding.zero)
            .scaleEffect(focused ? Constants.UI.Frame.homeFeaturedItemScaleMedium : Constants.UI.Frame.homeFeaturedItemScaleRegular)
            .animation(.linear(duration: Constants.UI.AnimationDuration.indicator), value: focused)
            .onChange(of: focused) { newValue in
                onFocusChange(newValue)
            }
    }
}

I have a requirement to show a custom indicator that's why using a custom button style. So I have a horizontal list of the above as shown in the image below:

Now the problem is in the case of .buttonStyle(.card), the list automatically scrolls to the top when the focus comes to the NavigationLinks. But that is not working if I'm using a custom button style.

How I can achieve same behaviour?

0

There are 0 best solutions below