Button is not selectable on tvOS using own ButtonStyle in SwiftUI

user_10826194 0
Viewed 2233

After replacing a standard button style with a custom one, the button isn't selectable anymore on tvOS (it works as expected on iOS). Is there a special modifier in PlainButtonStyle() that I'm missing? Or is it a bug in SwiftUI?

Here's the snipped that works:

Button(
    action: { },
    label: { Text("Start") }
).buttonStyle(PlainButtonStyle())

and here's the one that doesn't:

Button(
    action: { },
    label: { Text("Start") }
).buttonStyle(RoundedButtonStyle())

where RoundedButtonStyle() is defined as:

struct RoundedButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .padding(6)
            .foregroundColor(Color.white)
            .background(Color.blue)
            .cornerRadius(100)
    }
}
tvos swiftui
2 Answers

If you create your own style you have to handle focus manual. Of course there are different ways how you could do this.

struct RoundedButtonStyle: ButtonStyle {

    let focused: Bool
    func makeBody(configuration: Configuration) -> some View {
        configuration
            .label
            .padding(6)
            .foregroundColor(Color.white)
            .background(Color.blue)
            .cornerRadius(100)
            .shadow(color: .black, radius: self.focused ? 20 : 0, x: 0, y: 0) //  0

    }
}

struct ContentView: View {

    @State private var buttonFocus: Bool = false
    var body: some View {
        VStack {
            Text("Hello World")

            Button(
                action: { },
                label: { Text("Start") }
            ).buttonStyle(RoundedButtonStyle(focused: buttonFocus))
                .focusable(true) { (value) in
                    self.buttonFocus = value
            }
        }
    }
}
user_48695230

I have done it in this way and it's working fine, what you need to do is just handling the focused state.

struct AppButtonStyle: ButtonStyle {
  
  let color: Color = .clear

  func makeBody(configuration: Configuration) -> some View {
    return AppButton(configuration: configuration, color: color)
  }
  
  
  struct AppButton: View {
    @State var focused: Bool = false

    let configuration: ButtonStyle.Configuration
    let color: Color
    
    var body: some View {
      configuration.label
        .foregroundColor(.white)
        .background(RoundedRectangle(cornerRadius: 20).fill(color))
        .compositingGroup()
        .shadow(color: .black, radius: 5)
        .scaleEffect(focused ? 1.1 : 1.0)
        .padding()
        .focusable(true) { focused in
          withAnimation {
            self.focused = focused
          }
        }
    }
  }
}

When the button is getting focused I'm just scaling it and you can do something else as you wish with the same idea, so let's say you wan't to change the background color:

.background(RoundedRectangle(cornerRadius: 20).fill(focused ? .red : .white))

To use:

struct SomeView: View {
  var body: some View {
    NavigationView {
      NavigationLink(
        destination: Text("Destination")) {
        Text("Hi")
      }
      .buttonStyle(AppButtonStyle())
      .padding()
    }
  }
}
user_48319230
Related