how to insert a custom image as a navigationBarItem in swiftui - swiftui

Question

I'm trying to use an image in my Assets to be a navigation bar Item like this:
navigationBarItems(leading: Button(action:{
self.presentMap = true
}) {
Image("map_pin")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 34, height: 34)
}
I works unfortunately the image is masked by a solid color so I only see the shape.
Is there a simple way to just display the image as is?

Answer 1

You need to add the modifier renderingMode(.original) This stops the overlay of the solid color blue.
Image("map_pin")
.renderingMode(.original)
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 34, height: 34)
Or you can add the following modifier to your button .buttonStyle(PlainButtonStyle())
Button(action:{
self.presentMap = true
}) {
Image("map_pin")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 34, height: 34)
}.buttonStyle(PlainButtonStyle())
Check out this article by Paul Hudson https://www.hackingwithswift.com/quick-start/swiftui/how-to-disable-the-overlay-color-for-images-inside-button-and-navigationlink
The difference is subtle, but important: if you are using a Button
inside a List, using .buttonStyle(PlainButtonStyle()) 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