Loading...

How to apply mirroring to any SwiftUI view?

question swiftui swift
Ram Patra Published on September 7, 2024

You can apply mirroring to a SwiftUI view by using the scaleEffect(x:y:anchor:) modifier to flip the view horizontally or vertically. Specifically, you can set the x or y scale to -1.0 to mirror the view along that axis.

Example of Horizontal Mirroring:

To mirror a view horizontally, you can set the x scale to -1.0.

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Original View")
                .font(.title)
                .padding()
            
            Image(systemName: "arrow.right")
                .resizable()
                .frame(width: 100, height: 100)
                .padding()

            Text("Mirrored View")
                .font(.title)
                .padding()

            Image(systemName: "arrow.right")
                .resizable()
                .frame(width: 100, height: 100)
                .padding()
                .scaleEffect(x: -1, y: 1) // Horizontally mirrored
        }
    }
}

@main
struct MirroredApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

Example of Vertical Mirroring:

Similarly, if you want to mirror the view vertically, you can set the y scale to -1.0.

.scaleEffect(x: 1, y: -1) // Vertically mirrored

Example of both Vertical and Horizontal Mirroring:

If you want to apply both horizontal and vertical mirroring (flip both axes), you can set both x and y scales to -1.0.

.scaleEffect(x: -1, y: -1) // Both horizontally and vertically mirrored

Summary:

  • Horizontal Mirroring: Use .scaleEffect(x: -1, y: 1)
  • Vertical Mirroring: Use .scaleEffect(x: 1, y: -1)
  • Both Axes Mirroring: Use .scaleEffect(x: -1, y: -1)
  • No Mirroring: Use .scaleEffect(x: 1, y: 1)

You can apply these transformations to any view, such as text, images, buttons, or even custom shapes.

Take your presentation to the next level.

Put your face and name on your screen.

Your to-dos on your menu bar.

Fill forms using your right-click menu.

Ram Patra Published on September 7, 2024
Image placeholder

Keep reading

If this article was helpful, others might be too

question swiftui swift February 19, 2025 How to change the window level to floating, popUpMenu, etc. in SwiftUI?

When developing macOS applications with SwiftUI, you might need to create floating windows that stay on top of other windows. While modern macOS versions (15+) make this straightforward with the .windowLevel(.floating) modifier, supporting older versions requires a different approach. In this post, I’ll show you how to create floating windows that work across different macOS versions.

question swiftui March 6, 2023 How to render the icon on a menu bar as a template in SwiftUI?

Setting your app’s icon on the menu bar as a template makes it to adapt to light and dark modes automatically without you doing anything. To do this, you have to use this constructor of MenuBarExtra class.

question swiftui swift September 8, 2024 How to loop through an enum in SwiftUI?

In SwiftUI, looping through an enum is not directly possible without some extra work because enums in Swift don’t inherently support iteration. However, you can achieve this by making the enum CaseIterable, which automatically provides a collection of all cases in the enum.

Like my work?

Please, feel free to reach out. I would be more than happy to chat.