How to remove border outline when clicking on styled link label? - swift

Question

I have the following code for a styled link label:
extension Text {
func styledLinkLabel<V: View & ShapeStyle>(with gradient: V) -> some View {
self.fontWeight(.bold)
.font(.title)
.padding()
.frame(minWidth: 0, maxWidth: 250, alignment: .center)
.background(gradient)
.foregroundColor(.white)
.padding(2)
.overlay(
RoundedRectangle(cornerRadius:20)
.stroke(gradient, lineWidth:15)
)
.overlay(
Image(systemName: "person.crop.circle.badge.plus")
.font(.largeTitle)
.padding(.leading)
.foregroundColor(.white)
, alignment: .leading)
.padding(5)
}
}
This is used in the code as follows:
NavigationLink(destination: RentView(viewModel: RentViewModel(Amounts(), housemates: 1)))
{
Text("1")
.styledLinkLabel(with: gradient)
}
NavigationLink(destination: RentView(viewModel: RentViewModel(Amounts(), housemates: 2)))
{
Text("2")
.styledLinkLabel(with: gradient)
}
However when I click on this in the app (screenshot below of a click in progress), the outline underneath shows. Is there any way to get rid of this?

Answer 1

You need to use compositingGroup:
extension Text {
func styledLinkLabel<V: View & ShapeStyle>(with gradient: V) -> some View {
self.fontWeight(.bold)
.font(.title)
.padding()
.frame(minWidth: 0, maxWidth: 250, alignment: .center)
.background(gradient)
.foregroundColor(.white)
.padding(2)
.overlay(
RoundedRectangle(cornerRadius: 20)
.stroke(gradient, lineWidth: 15)
)
.overlay(
Image(systemName: "person.crop.circle.badge.plus")
.font(.largeTitle)
.padding(.leading)
.foregroundColor(.white),
alignment: .leading
)
.compositingGroup() // <- add here
.padding(5)
}
}
Alternatively, if you don't want to modify styledLinkLabel, you can use a custom ButtonStyle:
struct CustomButtonStyle: ButtonStyle {
func makeBody(configuration: Configuration) -> some View {
configuration.label
.compositingGroup()
.opacity(configuration.isPressed ? 0.5 : 1)
}
}
NavigationLink(destination: Text("Destination")) {
Text("Text")
.styledLinkLabel(with: gradient)
}
.buttonStyle(CustomButtonStyle())