How to build a zoomable image in SwiftUI

Full implementation

The complete view below combines MagnificationGesture with a DragGesture using simultaneousGesture so the user can pan after pinching in. A double-tap resets both scale and offset with a spring animation. All gestures are composed with simultaneousGesture rather than chained, which prevents SwiftUI's gesture recognizer from suppressing sibling recognizers. The image is clipped inside a GeometryReader-backed container so zoomed content doesn't bleed out of bounds.

import SwiftUI

struct ZoomableImageView: View {
    let imageName: String

    @State private var scale: CGFloat = 1.0
    @State private var lastScale: CGFloat = 1.0
    @State private var offset: CGSize = .zero
    @State private var lastOffset: CGSize = .zero

    private let minScale: CGFloat = 1.0
    private let maxScale: CGFloat = 5.0

    var body: some View {
        GeometryReader { geometry in
            Image(imageName)
                .resizable()
                .scaledToFit()
                .scaleEffect(scale)
                .offset(offset)
                .frame(
                    width: geometry.size.width,
                    height: geometry.size.height
                )
                // Pinch-to-zoom
                .gesture(
                    MagnificationGesture()
                        .onChanged { value in
                            scale = clampedScale(lastScale * value)
                        }
                        .onEnded { _ in
                            lastScale = scale
                            snapBackIfNeeded()
                        }
                )
                // Pan while zoomed
                .simultaneousGesture(
                    DragGesture()
                        .onChanged { value in
                            guard scale > 1.0 else { return }
                            offset = CGSize(
                                width: lastOffset.width + value.translation.width,
                                height: lastOffset.height + value.translation.height
                            )
                        }
                        .onEnded { _ in
                            lastOffset = offset
                        }
                )
                // Double-tap to reset
                .simultaneousGesture(
                    TapGesture(count: 2)
                        .onEnded {
                            withAnimation(.spring(duration: 0.3)) {
                                scale = 1.0
                                lastScale = 1.0
                                offset = .zero
                                lastOffset = .zero
                            }
                        }
                )
                .clipped()
                .accessibilityLabel("Zoomable image: \(imageName)")
                .accessibilityHint("Pinch to zoom, drag to pan, double-tap to reset")
        }
    }

    private func clampedScale(_ value: CGFloat) -> CGFloat {
        min(maxScale, max(minScale, value))
    }

    private func snapBackIfNeeded() {
        if scale < minScale {
            withAnimation(.spring(duration: 0.25)) {
                scale = minScale
                lastScale = minScale
                offset = .zero
                lastOffset = .zero
            }
        }
    }
}

#Preview {
    ZoomableImageView(imageName: "examplePhoto")
        .frame(height: 400)
        .padding()
}

How it works

1. Dual scale state (scale + lastScale) MagnificationGesture reports a relative multiplier each frame, not an absolute scale. By storing lastScale on onEnded, multiplying it by the live value in onChanged gives a stable, cumulative zoom level across multiple pinches.
2. Clamping via clampedScale(_:) The helper enforces minScale = 1.0 and maxScale = 5.0, preventing the image from shrinking below its natural size or zooming in so far that it becomes unusable. snapBackIfNeeded() runs after the gesture ends to spring-reset if somehow the user lands below 1×.
3. Pan with simultaneousGesture Using .simultaneousGesture instead of .gesture lets the drag and magnification recognizers cooperate rather than compete. The drag handler guards on scale > 1.0 so the image stays locked in place when not zoomed.
4. Double-tap reset A second simultaneousGesture(TapGesture(count: 2)) simultaneously listens for two-finger taps. On trigger it animates scale, lastScale, offset, and lastOffset all back to their default values in a single withAnimation block.
5. Accessibility labels .accessibilityLabel and .accessibilityHint describe the image and the gestures for VoiceOver users, meeting WCAG 2.5.3 and Apple's HIG guidance for interactive media.

Variants

AsyncImage (remote URL) with zoom

Drop-in replacement that fetches from a URL and shows a progress spinner while loading before enabling the zoom gesture.

struct ZoomableAsyncImage: View {
    let url: URL
    @State private var scale: CGFloat = 1.0
    @State private var lastScale: CGFloat = 1.0

    var body: some View {
        AsyncImage(url: url) { phase in
            switch phase {
            case .success(let image):
                image
                    .resizable()
                    .scaledToFit()
                    .scaleEffect(scale)
                    .gesture(
                        MagnificationGesture()
                            .onChanged { scale = min(5, max(1, lastScale * $0)) }
                            .onEnded { _ in lastScale = scale }
                    )
            case .failure:
                Image(systemName: "photo.badge.exclamationmark")
                    .font(.largeTitle)
                    .foregroundStyle(.secondary)
            default:
                ProgressView()
            }
        }
        .accessibilityLabel("Remote zoomable image")
    }
}

Zoom to double-tap location (optical zoom feel)

For a more native Photos-app feel, capture the tap location from DragGesture(minimumDistance: 0) before the double-tap fires, then compute an offset that centers the tapped point on screen. Store the tap location with a @State var tapLocation: CGPoint = .zero and update it in a simultaneousGesture(DragGesture(minimumDistance: 0).onEnded { tapLocation = $0.location }). On double-tap, animate to scale 2.5 and set offset to (containerCenter - tapLocation) * (targetScale - 1). This gives the zoomed-to-point illusion without UIKit's UIScrollView.

Prompt this with Claude Code

When using Soarias or Claude Code directly to implement this:

Implement a zoomable image viewer in SwiftUI for iOS 17+.
Use MagnificationGesture for pinch-to-zoom, DragGesture for
pan-while-zoomed, and a double-tap TapGesture to reset.
Clamp scale between 1.0 and 5.0 with spring animations.
Make it accessible (VoiceOver labels and hints).
Add a #Preview with realistic sample data.

This prompt fits neatly into the Build phase of the Soarias workflow — paste it directly into a Soarias session after generating your screen mockup to get production-ready zoom gesture code scaffolded in seconds.

Related

• → Build image caching
• → Implement AsyncImage
• → Build an image gallery
• → Implement a photo grid
• → Build a REST API client
• → Build a WebSocket client

FAQ