SwiftUI Image View: RenderingMode

.renderingMode modifier expects templateRenderingMode value and renders image according to the defined renderingMode.

Let’s say we have a PNG image with transparent background, we can render that PNG image inside Image view in original mode(with the colors the image has been imported with) or we can render that image as template(meaning we can define tint color for the image and change image tint to better match our app’s theme).

Let’s take a look at an example. I have following PNG image

If you download this image, you will find that its background is transparent. We will import this into Assets catalog along with another DevTechie image and add them into the view as shown below:

struct ImageExample: View {
    
    var body: some View {
        VStack {
            Image("DevTechieBackground")
                .resizable()
                .scaledToFit()
            
            Spacer()
            
            ZStack {
                Text("Learn By Doing")
                    .font(.system(size: 50))
                
                Image("splash")
                    .renderingMode(.original)
                    .foregroundColor(.red)
            }
        }.edgesIgnoringSafeArea(.all)
    }
}

Notice renderingMode in this case is set to original so Image view will show blue image. Also note that foregroundColor has no effect on the image as its being rendered as original image.

Let’s change that renderingMode to be template:

struct ImageExample: View {
    
    var body: some View {
        VStack {
            Image("DevTechieBackground")
                .resizable()
                .scaledToFit()
            
            Spacer()
            
            ZStack {
                Text("Learn By Doing")
                    .font(.system(size: 50))
                
                Image("splash")
                    .renderingMode(.template)
                    .foregroundColor(.red)
            }
        }.edgesIgnoringSafeArea(.all)
    }
}

As soon as we change renderingMode to template, our image is taking foregroundColor into consideration.

We can even animate foregroundColor with the help of Animation and TimelineView

struct ImageExample: View {
    
    var body: some View {
        VStack {
            Image("DevTechieBackground")
                .resizable()
                .scaledToFit()
            
            Spacer()
            
            ZStack {
                Text("Learn By Doing")
                    .font(.system(size: 50))
                
                TimelineView(.periodic(from: Date(), by: 2)) { _ in
                    let color = Color(red: Double.random(in: 0...1), green: Double.random(in: 0...1), blue: Double.random(in: 0...1), opacity: Double.random(in: 0.5...1))
                    
                    Image("splash")
                        .renderingMode(.template)
                        .foregroundColor(color)
                        .animation(.easeInOut, value: color)
                }
            }
        }.edgesIgnoringSafeArea(.all)
    }
}