How to disable the overlay color for images inside Button and NavigationLink
Updated for Xcode 13.0
Updated in iOS 15
On iOS, an image drawn inside a NavigationLink or a Button will almost certainly not behave as you expect: the whole image will be be covered with an opaque blue color, or whatever accent color you have in your view.
There are two ways you can fix this; which you choose depends on the behavior you want.
First, you can use the renderingMode() mode modifier to achieve a slightly different result:
NavigationView {
NavigationLink(destination: Text("Detail view here")) {
Image("logo")
.renderingMode(.original)
}
}
Download this as an Xcode project
As an alternative, you can use the buttonStyle() modifier with .plain, like this:
NavigationView {
NavigationLink(destination: Text("Detail view here")) {
Image("logo")
}
.buttonStyle(.plain)
} Download this as an Xcode project
Or like this for plain buttons:
Button {
// your action here
} label: {
Image("logo")
}
.buttonStyle(.plain) Download this as an Xcode project
Important: If you’re using Xcode 12 you need to use PlainButtonStyle() rather than .plain.
The difference is subtle, but important: if you use a Button inside a List, using buttonStyle(.plain) will mean that only the space directly around the button’s content can be tapped, whereas if you use .renderingMode(.original) then the whole cell remains tappable.
SPONSORED Join a FREE crash course for iOS devs who want to become complete senior developers — from October 18th to 24th. Learn how to apply iOS app architecture patterns through a series of lectures and practical coding sessions.
Sponsor Hacking with Swift and reach the world's largest Swift community!
Similar solutions…
