# Magnification Gesture in SwiftUI

In SwiftUI, you can use the `MagnificationGesture` to add pinch-to-zoom functionality to your views. The `MagnificationGesture` is a gesture recognizer that recognizes pinch gestures made by the user, and allows you to respond to these gestures in your app. In this blog post, we'll explore how to use the `MagnificationGesture` in SwiftUI to create pinch-to-zoom views in your app.

The code of this post is available [here](https://github.com/xavier7t/iOSDevX/tree/main/iOSDevX/202304-Apr%202023/Magnification%20Gesture).

Let's start by creating a simple view that zooms in and out in response to a pinch gesture. Here's an example:

```swift
struct ZoomingView: View {
    @State private var scale: CGFloat = 1.0
    
    var body: some View {
        Text("Pinch to Zoom")
            .foregroundColor(.white)
            .font(.largeTitle)
            .padding()
            .background(Color.blue.cornerRadius(10))
            .scaleEffect(scale)
            .gesture(MagnificationGesture()
                        .onChanged { scale in
                            self.scale = scale.magnitude
                        }
            )
    }
}
```

In this example, we create a view called `ZoomingView` that displays a text element with the text "Pinch to Zoom". We then add some padding to the text element, and apply a scale effect to the view using the `scaleEffect` modifier.

To enable pinch-to-zoom functionality, we add a `MagnificationGesture` to the view using the `gesture` modifier. We also add an `onChanged` closure to the `MagnificationGesture` that updates the view's `scale` state property in response to a pinch gesture.

When you run this code, you should see a text element that zooms in and out as you pinch the screen. **Tip: to zoom in the Xcode Simulator or Preview canvas, press option (⌥) and move your cursor over the area to zoom, and then drag the cursor.**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1680665401122/973ba6d3-75cf-41a1-9f56-dd424b5c2704.png align="center")

## **Limiting the Zoom Scale**

By default, the `MagnificationGesture` allows the user to zoom the view indefinitely. However, you may want to limit the zoom scale to a specific range.

To limit the zoom scale, you can use the `min` and `max` parameters of the `scaleEffect` modifier. Here's an example:

```swift
struct LimitedZoomingView: View {
    @State private var scale: CGFloat = 1.0
    
    var body: some View {
        Text("Pinch to Zoom")
            .foregroundColor(.white)
            .font(.largeTitle)
            .padding()
            .background(Color.blue.cornerRadius(10))
            .scaleEffect(scale, anchor: .center)
            .gesture(MagnificationGesture()
                        .onChanged { scale in
                            self.scale = min(max(scale.magnitude, 0.5), 2.0)
                        }
            )
    }
}
```

In this example, we create a view called `LimitedZoomingView` that is similar to the previous example, but limits the zoom scale to between 0.5 and 2.0 using the `min` and `max` parameters of the `scaleEffect` modifier.

And if you run the code now, you’ll find that the max size of the zoomed view will still be inside the screen area.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1680665408925/79c8a4a2-b045-49f5-9326-0cedf2b476cc.png align="center")

## **Conclusion**

In this blog post, we've explored how to use the `MagnificationGesture` in SwiftUI to create pinch-to-zoom views in your app. We've also shown how to limit the zoom scale to a specific range. By using the `MagnificationGesture` and other gesture recognizers provided by SwiftUI, you can create interactive and engaging user interfaces in your app.

That’s all of today’s post. I hope it helps and let me know if it is by leaving a comment. Don’t forget to subscribe to my newsletter if you’d like to receive posts like this via email.

I’ll see you in the next post!