Customization

The extension element is a data block that is used to change the behavior and display of elements. You can add an extension to any element.

Additional logic is described in the extension handler DivExtensionHandler.

Available extensions

ID

Description

Source code

pinch-to-zoom

Increases the element.

Android
iOS

lottie

Connects Lottie animations to gif-image.

Android
iOS
Web

input_autocorrection

Controls text autocorrection in input elements (iOS only).

iOS

Connection

Note

This section uses the Lottie extension as an example.

build.gradle

dependencies {
    implementation "com.yandex.div:div-pinch-to-zoom:${versions.divkit}"
    implementation "com.airbnb.android:lottie:${versions.lottie}"
    implementation "com.yandex.div:div-lottie:${versions.lottie}"
}

In the code:

val pinchToZoomConfiguration = DivPinchToZoomConfiguration.Builder(this)
    .host(window)
    .dimColor(0xFF808080.toInt())
    .build()
val rawResProvider = object : DivLottieRawResProvider {
    override fun provideRes(url: String): Int? {
        if (url == "res://love") return R.raw.love_anim
        return null
    }
    override fun provideAssetFile(url: String): String? {
        if (url == "asset://banana") return "lottie/lottie_1.json"
        return null
    }
}
val divConfiguration = DivConfiguration.Builder(DefaultDivImageLoader(Container.imageManager))
    .experimentConfig(experimentConfig)
    .actionHandler(actionHandler)
    .divLogger(logger)
    .extension(DivPinchToZoomExtensionHandler(pinchToZoomConfiguration))
    .extension(DivLottieExtensionHandler(rawResProvider))
    .build()
val divContext = DivContext(baseContext = this, configuration = divConfiguration)
divView = DivView(divContext)

Extension handlers must comply with the DivExtensionHandler protocol.

To connect the handler, pass it to DivBlockModelingContext:

DivBlockModelingContext(
  ...
  extensionHandlers: [
    PinchToZoomExtensionHandler(overlayView: rootView),
    SomeExtensionHandler()
  ]
)

import { lottieExtensionBuilder } from '@divkitframework/divkit/client';
import Lottie from 'lottie-web/build/player/lottie';

const map = new Map();

map.set('lottie', lottieExtensionBuilder(Lottie.loadAnimation));

render({
    id: 'test',
    target: element,
    json: {},
    extensions: map
});

An example of a connected extension is available in the repository.

Lottie in an animated gif image

To connect the animation to a gif image, fill in the extensions array:

{
  "extensions": [
    {
      "id": "lottie",
      "params": {
        "lottie_url": "https://assets9.lottiefiles.com/packages/lf20_edpg3c3s.json",
        "repeat_count": 3,
        "repeat_mode": "restart"
      }
    }
  ]
}

Parameters

Description

id

Extension ID.

lottie_url

Required URL to Lottie JSON if the lottie_json parameter isn't specified. It can work according to the asset:*{address} or res:*{address} schemes for embedded resources. Resource binding in these schemes occurs via the DivLottieRawResProvider dependency that is passed to DivLottieExtensionHandler.

lottie_json

Required parameter if lottie_url isn't specified. Contains Lottie JSON.

repeat_count

The number of animation repetitions. Use the -1 value for an infinite number of repetitions.

repeat_mode

The action after the animation ends. It can have the values:

  • restart: Animation restarts.
  • reverse: Animation is displayed frame-by-frame in reverse order.

Input autocorrection control

To control text autocorrection in input elements on iOS, use the input_autocorrection extension:

{
  "extensions": [
    {
      "id": "input_autocorrection",
      "params": {
        "enabled": false
      }
    }
  ]
}

Parameters

Description

id

Extension ID.

enabled

Controls whether autocorrection is enabled for the input field. Set to false to disable autocorrection.

Learn more

Follow DivKit news in the Telegram channel: http://t.me/divkit_news

You can also discuss topics of interest in the DivKit user community in Telegram: https://t.me/divkit_community_ru

DivKit Repository

Previous
visibility-action
Next
FAQ