---
metadata:
  - name: generator
    content: Diplodoc Platform v5.70.0
alternate:
  - https://divkit.tech/docs/en/concepts/extensions/pinch-to-zoom.md
  - https://divkit.tech/docs/ru/concepts/extensions/pinch-to-zoom.md
  - href: https://divkit.tech/docs/en/concepts/extensions/pinch-to-zoom.md
    type: text/markdown
    title: Markdown version
  - href: https://divkit.tech/docs/en/llms.txt?revision=r22102947
    rel: describedby
---
> **Documentation Index:** Fetch the complete configuration index at https://divkit.tech/docs/en/llms.txt?revision=r22102947

# Pinch-to-zoom

The `pinch-to-zoom` extension zooms the element when the user spreads two fingers. The zoomed element is displayed on top of the rest of the content and follows the fingers; when the gesture ends, it smoothly returns to its place. The extension is supported on Android and iOS.

```json translate=no
{
  "type": "image",
  "image_url": "https://example.com/image.png",
  "extensions": [
    {
      "id": "pinch-to-zoom"
    }
  ]
}
```

The extension has no parameters.

## How it works {#behavior}

- On Android, the extension works only with the [div-image](https://divkit.tech/docs/en/concepts/divs/2/div-image.md) element. It isn't applied to other elements, and DivKit reports an error.
- On iOS, the extension can be added to any element.

## Connection {#connect}

{% list tabs %}

- Android

  build.gradle

  ```groovy translate=no
  dependencies {
      implementation "com.yandex.div:div-pinch-to-zoom:${versions.divkit}"
  }
  ```

  In the code:

  ```kotlin translate=no
  val pinchToZoomConfiguration = DivPinchToZoomConfiguration.Builder(activity)
      .host(window)
      .dimColor(0xFF808080.toInt())
      .build()
  val divConfiguration = DivConfiguration.Builder(imageLoader)
      .extension(DivPinchToZoomExtensionHandler(pinchToZoomConfiguration))
      .build()
  ```

  `DivPinchToZoomConfiguration.Builder` methods:

  - `host`: Window that displays the zoomed image. Default: the `Activity` window.
  - `dimColor`: Color that dims the content under the zoomed image. By default, the content isn't dimmed.
  - `animationInterpolator`: Interpolator of the animation that returns the image to its place.

- iOS

  ```swift translate=no
  DivKitComponents(
    ...
    extensionHandlers: [
      PinchToZoomExtensionHandler(overlayView: rootView)
    ]
  )
  ```

  `overlayView` is the view on top of which the zoomed element is displayed. To receive the events of the gesture start, scale change, and gesture end, pass the `zoomObserver` parameter with a `PinchToZoomObserver` object to the handler.

{% endlist %}

<!-- source: en/_includes/index/troubleshooting.md -->
## Learn more {#troubleshooting}

You can discuss topics of interest in the DivKit user community in Telegram: [https://t.me/divkit_community_en](https://t.me/divkit_community_en).



[DivKit Repository](https://github.com/divkit/divkit)
<!-- endsource: en/_includes/index/troubleshooting.md -->