How to Flip Images in iOS SwiftUI

In this blog post, we dive into a fascinating aspect of manipulating visual content in SwiftUI—flipping images. Often, we need to adjust images based on our application design needs, and flipping them horizontally or vertically is one such requirement. Let’s explore how we can implement this intriguing feature in SwiftUI.

Basics: Flipping an Image

SwiftUI doesn’t provide a direct modifier to flip an image, but we can utilize the .scaleEffect() modifier to achieve the desired effect. Here’s how you can flip an image horizontally:

Image("yourImage")
    .resizable()
    .scaleEffect(x: -1, y: 1)

In this snippet, "yourImage" is the name of your image asset. The .scaleEffect(x: -1, y: 1) modifier flips the image along the X-axis, creating a mirror image.

Vertical Flip

Flipping an image vertically is as straightforward as flipping it horizontally. We can do it by changing the scale effect on the Y-axis:

Image("yourImage")
    .resizable()
    .scaleEffect(x: 1, y: -1)

In this case, the image is flipped along the Y-axis, turning it upside down.

Applying Rotation Effects

Apart from flipping, you may want to rotate your images. SwiftUI offers the .rotationEffect() modifier for this:

Image("yourImage")
    .resizable()
    .rotationEffect(.degrees(180))

The .rotationEffect(.degrees(180)) modifier rotates the image 180 degrees, effectively flipping the image vertically.

SwiftUI provides a range of powerful modifiers that can help you manipulate and transform images to meet your app’s design requirements. While there’s no direct flip modifier, using the .scaleEffect() and .rotationEffect() modifiers allows you to flip and rotate images easily.