react-native-divkit 1.6.5 → 1.8.0

package/dist/hooks/useChangeBoundsTransition.js

@@ -0,0 +1,151 @@
+import { useCallback, useMemo, useRef } from 'react';
+import { Animated, Easing } from 'react-native';
+import { flattenChangeTransition } from '../utils/flattenTransition';
+function interpolationToEasing(interpolator) {
+    switch (interpolator) {
+        case 'linear': return Easing.linear;
+        case 'ease': return Easing.ease;
+        case 'ease_in': return Easing.in(Easing.ease);
+        case 'ease_out': return Easing.out(Easing.ease);
+        case 'ease_in_out': return Easing.inOut(Easing.ease);
+        case 'spring': return Easing.elastic(1);
+        default: return Easing.inOut(Easing.ease);
+    }
+}
+function normalize(transition) {
+    if (!transition)
+        return null;
+    const items = flattenChangeTransition(transition);
+    let longest = null;
+    let longestTotal = 0;
+    for (const it of items) {
+        const dur = Math.max(0, it.duration ?? 300);
+        const delay = Math.max(0, it.start_delay ?? 0);
+        if (dur + delay > longestTotal) {
+            longestTotal = dur + delay;
+            longest = it;
+        }
+    }
+    if (!longest || longestTotal === 0)
+        return null;
+    return {
+        duration: Math.max(0, longest.duration ?? 300),
+        delay: Math.max(0, longest.start_delay ?? 0),
+        easing: interpolationToEasing(longest.interpolator)
+    };
+}
+/**
+ * FLIP (First-Last-Invert-Play) hook for transition_change with custom cubic easing.
+ *
+ * On each layout change:
+ *  1. Capture previous (First) and new (Last) bounds via onLayout.
+ *  2. Set transform to translate(-dx, -dy) * scale(prevW/newW, prevH/newH) so the element
+ *     visually stays at its old position/size (Invert).
+ *  3. Animate transform to identity over the spec duration (Play).
+ *
+ * Limitations:
+ *  - onLayout reports coords relative to the parent. If the parent itself moves, we will
+ *    see a position change but interpret it as our own movement — usually fine for items
+ *    inside a stable container.
+ *  - useNativeDriver is enabled (transform-only props), so the animation runs on the UI thread.
+ *  - First layout is treated as the baseline and is not animated.
+ */
+export function useChangeBoundsTransition(opts) {
+    const { transitionChange, suspended } = opts;
+    const spec = useMemo(() => normalize(transitionChange), [transitionChange]);
+    const translateX = useRef(new Animated.Value(0)).current;
+    const translateY = useRef(new Animated.Value(0)).current;
+    const scaleX = useRef(new Animated.Value(1)).current;
+    const scaleY = useRef(new Animated.Value(1)).current;
+    const prevLayoutRef = useRef(null);
+    const sizeRef = useRef(undefined);
+    const inFlightRef = useRef(null);
+    const onLayout = useCallback((e) => {
+        const { x, y, width, height } = e.nativeEvent.layout;
+        const prev = prevLayoutRef.current;
+        prevLayoutRef.current = { x, y, width, height };
+        sizeRef.current = { width, height };
+        if (!spec || suspended)
+            return;
+        if (!prev)
+            return; // baseline — nothing to invert from
+        if (prev.x === x && prev.y === y && prev.width === width && prev.height === height) {
+            return; // identical layout
+        }
+        if (width === 0 || height === 0)
+            return;
+        const sx = width > 0 ? prev.width / width : 1;
+        const sy = height > 0 ? prev.height / height : 1;
+        const prevCenterX = prev.x + prev.width / 2;
+        const prevCenterY = prev.y + prev.height / 2;
+        const nextCenterX = x + width / 2;
+        const nextCenterY = y + height / 2;
+        const dx = prevCenterX - nextCenterX;
+        const dy = prevCenterY - nextCenterY;
+        // Skip imperceptible movements
+        const SIGNIFICANT = 0.5;
+        const SCALE_EPS = 0.01;
+        if (Math.abs(dx) < SIGNIFICANT &&
+            Math.abs(dy) < SIGNIFICANT &&
+            Math.abs(sx - 1) < SCALE_EPS &&
+            Math.abs(sy - 1) < SCALE_EPS) {
+            return;
+        }
+        if (inFlightRef.current) {
+            inFlightRef.current.stop();
+            inFlightRef.current = null;
+        }
+        // Invert: snap to old position/size in transform space
+        translateX.setValue(dx);
+        translateY.setValue(dy);
+        scaleX.setValue(sx);
+        scaleY.setValue(sy);
+        // Play to identity
+        const comp = Animated.parallel([
+            Animated.timing(translateX, {
+                toValue: 0, duration: spec.duration, delay: spec.delay,
+                easing: spec.easing, useNativeDriver: true
+            }),
+            Animated.timing(translateY, {
+                toValue: 0, duration: spec.duration, delay: spec.delay,
+                easing: spec.easing, useNativeDriver: true
+            }),
+            Animated.timing(scaleX, {
+                toValue: 1, duration: spec.duration, delay: spec.delay,
+                easing: spec.easing, useNativeDriver: true
+            }),
+            Animated.timing(scaleY, {
+                toValue: 1, duration: spec.duration, delay: spec.delay,
+                easing: spec.easing, useNativeDriver: true
+            })
+        ]);
+        inFlightRef.current = comp;
+        comp.start(({ finished }) => {
+            if (inFlightRef.current === comp)
+                inFlightRef.current = null;
+            if (finished) {
+                translateX.setValue(0);
+                translateY.setValue(0);
+                scaleX.setValue(1);
+                scaleY.setValue(1);
+            }
+        });
+    }, [spec, suspended, translateX, translateY, scaleX, scaleY]);
+    const transform = useMemo(() => {
+        if (!spec)
+            return [];
+        return [
+            { translateX },
+            { translateY },
+            { scaleX },
+            { scaleY }
+        ];
+    }, [spec, translateX, translateY, scaleX, scaleY]);
+    return {
+        onLayout,
+        transform,
+        layoutWidth: sizeRef.current?.width,
+        layoutHeight: sizeRef.current?.height
+    };
+}
+//# sourceMappingURL=useChangeBoundsTransition.js.map

package/dist/hooks/useChangeBoundsTransition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChangeBoundsTransition.js","sourceRoot":"","sources":["../../src/hooks/useChangeBoundsTransition.ts"],"names":[],"mappings":"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"}

package/dist/utils/configureChangeBoundsLayout.d.ts

@@ -0,0 +1,11 @@
+import type { MaybeMissing } from '../expressions/json';
+import type { TransitionChange } from '../types/base';
+/**
+ * Triggers a smooth layout transition for the next render, based on a DivKit transition_change spec.
+ * Uses React Native's LayoutAnimation API (which respects duration and a coarse easing type,
+ * but not arbitrary cubic-bezier curves).
+ *
+ * Returns true if a transition was queued, false if there is no spec or duration is zero.
+ */
+export declare function configureChangeBoundsLayout(transition: MaybeMissing<TransitionChange> | undefined): boolean;
+//# sourceMappingURL=configureChangeBoundsLayout.d.ts.map

package/dist/utils/configureChangeBoundsLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"configureChangeBoundsLayout.d.ts","sourceRoot":"","sources":["../../src/utils/configureChangeBoundsLayout.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AA6BtD;;;;;;GAMG;AACH,wBAAgB,2BAA2B,CACvC,UAAU,EAAE,YAAY,CAAC,gBAAgB,CAAC,GAAG,SAAS,GACvD,OAAO,CAiCT"}

package/dist/utils/configureChangeBoundsLayout.js

@@ -0,0 +1,65 @@
+import { LayoutAnimation, Platform, UIManager } from 'react-native';
+import { flattenChangeTransition } from './flattenTransition';
+let layoutAnimationEnabled = false;
+function enableLayoutAnimationIfNeeded() {
+    if (layoutAnimationEnabled)
+        return;
+    layoutAnimationEnabled = true;
+    if (Platform?.OS === 'android') {
+        UIManager.setLayoutAnimationEnabledExperimental?.(true);
+    }
+}
+function interpolatorToLAType(interp) {
+    switch (interp) {
+        case 'linear': return 'linear';
+        case 'ease': return 'easeInEaseOut';
+        case 'ease_in': return 'easeIn';
+        case 'ease_out': return 'easeOut';
+        case 'ease_in_out': return 'easeInEaseOut';
+        case 'spring': return 'spring';
+        default: return 'easeInEaseOut';
+    }
+}
+/**
+ * Triggers a smooth layout transition for the next render, based on a DivKit transition_change spec.
+ * Uses React Native's LayoutAnimation API (which respects duration and a coarse easing type,
+ * but not arbitrary cubic-bezier curves).
+ *
+ * Returns true if a transition was queued, false if there is no spec or duration is zero.
+ */
+export function configureChangeBoundsLayout(transition) {
+    if (!transition)
+        return false;
+    const items = flattenChangeTransition(transition);
+    if (items.length === 0)
+        return false;
+    // Pick the longest duration (parallel composition); use the interpolator of that one.
+    let duration = 0;
+    let delayMax = 0;
+    let chosenInterp;
+    for (const it of items) {
+        const d = Math.max(0, it.duration ?? 300);
+        const delay = Math.max(0, it.start_delay ?? 0);
+        if (d > duration) {
+            duration = d;
+            chosenInterp = it.interpolator;
+        }
+        if (delay > delayMax)
+            delayMax = delay;
+    }
+    if (duration === 0)
+        return false;
+    const typeKey = interpolatorToLAType(chosenInterp);
+    const type = LayoutAnimation.Types[typeKey];
+    const property = LayoutAnimation.Properties.opacity;
+    const config = {
+        duration: duration + delayMax,
+        create: { type, property },
+        update: { type },
+        delete: { type, property }
+    };
+    enableLayoutAnimationIfNeeded();
+    LayoutAnimation.configureNext(config);
+    return true;
+}
+//# sourceMappingURL=configureChangeBoundsLayout.js.map

package/dist/utils/configureChangeBoundsLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"configureChangeBoundsLayout.js","sourceRoot":"","sources":["../../src/utils/configureChangeBoundsLayout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAyB,QAAQ,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAI3F,OAAO,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAI9D,IAAI,sBAAsB,GAAG,KAAK,CAAC;AAEnC,SAAS,6BAA6B;IAClC,IAAI,sBAAsB;QAAE,OAAO;IACnC,sBAAsB,GAAG,IAAI,CAAC;IAE9B,IAAI,QAAQ,EAAE,EAAE,KAAK,SAAS,EAAE,CAAC;QAC7B,SAAS,CAAC,qCAAqC,EAAE,CAAC,IAAI,CAAC,CAAC;IAC5D,CAAC;AACL,CAAC;AAED,SAAS,oBAAoB,CAAC,MAAiC;IAC3D,QAAQ,MAAM,EAAE,CAAC;QACb,KAAK,QAAQ,CAAC,CAAO,OAAO,QAAQ,CAAC;QACrC,KAAK,MAAM,CAAC,CAAS,OAAO,eAAe,CAAC;QAC5C,KAAK,SAAS,CAAC,CAAM,OAAO,QAAQ,CAAC;QACrC,KAAK,UAAU,CAAC,CAAK,OAAO,SAAS,CAAC;QACtC,KAAK,aAAa,CAAC,CAAE,OAAO,eAAe,CAAC;QAC5C,KAAK,QAAQ,CAAC,CAAO,OAAO,QAAQ,CAAC;QACrC,OAAO,CAAC,CAAa,OAAO,eAAe,CAAC;IAChD,CAAC;AACL,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,2BAA2B,CACvC,UAAsD;IAEtD,IAAI,CAAC,UAAU;QAAE,OAAO,KAAK,CAAC;IAC9B,MAAM,KAAK,GAAG,uBAAuB,CAAC,UAAU,CAAC,CAAC;IAClD,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,KAAK,CAAC;IAErC,sFAAsF;IACtF,IAAI,QAAQ,GAAG,CAAC,CAAC;IACjB,IAAI,QAAQ,GAAG,CAAC,CAAC;IACjB,IAAI,YAAuC,CAAC;IAC5C,KAAK,MAAM,EAAE,IAAI,KAAK,EAAE,CAAC;QACrB,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAG,EAAU,CAAC,QAAQ,IAAI,GAAG,CAAC,CAAC;QACnD,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAG,EAAU,CAAC,WAAW,IAAI,CAAC,CAAC,CAAC;QACxD,IAAI,CAAC,GAAG,QAAQ,EAAE,CAAC;YACf,QAAQ,GAAG,CAAC,CAAC;YACb,YAAY,GAAI,EAAU,CAAC,YAAyC,CAAC;QACzE,CAAC;QACD,IAAI,KAAK,GAAG,QAAQ;YAAE,QAAQ,GAAG,KAAK,CAAC;IAC3C,CAAC;IACD,IAAI,QAAQ,KAAK,CAAC;QAAE,OAAO,KAAK,CAAC;IAEjC,MAAM,OAAO,GAAG,oBAAoB,CAAC,YAAY,CAAC,CAAC;IACnD,MAAM,IAAI,GAAG,eAAe,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAC5C,MAAM,QAAQ,GAAG,eAAe,CAAC,UAAU,CAAC,OAAO,CAAC;IAEpD,MAAM,MAAM,GAA0B;QAClC,QAAQ,EAAE,QAAQ,GAAG,QAAQ;QAC7B,MAAM,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;QAC1B,MAAM,EAAE,EAAE,IAAI,EAAE;QAChB,MAAM,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC7B,CAAC;IACF,6BAA6B,EAAE,CAAC;IAChC,eAAe,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IACtC,OAAO,IAAI,CAAC;AAChB,CAAC"}

package/dist/utils/flattenTransition.d.ts

@@ -0,0 +1,5 @@
+import type { MaybeMissing } from '../expressions/json';
+import type { AnyTransition, AppearanceTransition, ChangeBoundsTransition, TransitionChange } from '../types/base';
+export declare function flattenAppearanceTransition(transition: MaybeMissing<AppearanceTransition>): MaybeMissing<AnyTransition>[];
+export declare function flattenChangeTransition(transition: MaybeMissing<TransitionChange>): MaybeMissing<ChangeBoundsTransition>[];
+//# sourceMappingURL=flattenTransition.d.ts.map

package/dist/utils/flattenTransition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flattenTransition.d.ts","sourceRoot":"","sources":["../../src/utils/flattenTransition.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,KAAK,EAAE,aAAa,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEnH,wBAAgB,2BAA2B,CACvC,UAAU,EAAE,YAAY,CAAC,oBAAoB,CAAC,GAC/C,YAAY,CAAC,aAAa,CAAC,EAAE,CAa/B;AAED,wBAAgB,uBAAuB,CACnC,UAAU,EAAE,YAAY,CAAC,gBAAgB,CAAC,GAC3C,YAAY,CAAC,sBAAsB,CAAC,EAAE,CAaxC"}

package/dist/utils/flattenTransition.js

@@ -0,0 +1,27 @@
+export function flattenAppearanceTransition(transition) {
+    const res = [];
+    if (transition.type === 'set') {
+        const items = transition.items;
+        (items || []).forEach(item => {
+            res.push(...flattenAppearanceTransition(item));
+        });
+    }
+    else {
+        res.push(transition);
+    }
+    return res;
+}
+export function flattenChangeTransition(transition) {
+    const res = [];
+    if (transition.type === 'set') {
+        const items = transition.items;
+        (items || []).forEach(item => {
+            res.push(...flattenChangeTransition(item));
+        });
+    }
+    else {
+        res.push(transition);
+    }
+    return res;
+}
+//# sourceMappingURL=flattenTransition.js.map

package/dist/utils/flattenTransition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flattenTransition.js","sourceRoot":"","sources":["../../src/utils/flattenTransition.ts"],"names":[],"mappings":"AAGA,MAAM,UAAU,2BAA2B,CACvC,UAA8C;IAE9C,MAAM,GAAG,GAAkC,EAAE,CAAC;IAE9C,IAAK,UAAkB,CAAC,IAAI,KAAK,KAAK,EAAE,CAAC;QACrC,MAAM,KAAK,GAAI,UAAkB,CAAC,KAAyD,CAAC;QAC5F,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YACzB,GAAG,CAAC,IAAI,CAAC,GAAG,2BAA2B,CAAC,IAAI,CAAC,CAAC,CAAC;QACnD,CAAC,CAAC,CAAC;IACP,CAAC;SAAM,CAAC;QACJ,GAAG,CAAC,IAAI,CAAC,UAAyC,CAAC,CAAC;IACxD,CAAC;IAED,OAAO,GAAG,CAAC;AACf,CAAC;AAED,MAAM,UAAU,uBAAuB,CACnC,UAA0C;IAE1C,MAAM,GAAG,GAA2C,EAAE,CAAC;IAEvD,IAAK,UAAkB,CAAC,IAAI,KAAK,KAAK,EAAE,CAAC;QACrC,MAAM,KAAK,GAAI,UAAkB,CAAC,KAAqD,CAAC;QACxF,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YACzB,GAAG,CAAC,IAAI,CAAC,GAAG,uBAAuB,CAAC,IAAI,CAAC,CAAC,CAAC;QAC/C,CAAC,CAAC,CAAC;IACP,CAAC;SAAM,CAAC;QACJ,GAAG,CAAC,IAAI,CAAC,UAAkD,CAAC,CAAC;IACjE,CAAC;IAED,OAAO,GAAG,CAAC;AACf,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-divkit",
-  "version": "1.6.5",
+  "version": "1.8.0",
   "description": "DivKit renderer for React Native - Server-driven UI framework",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -16,6 +16,7 @@
     "test": "jest",
     "test:snapshot": "jest --config jest.snapshot.config.js",
     "test:snapshot:update": "jest --config jest.snapshot.config.js -u",
+    "test:integration": "jest --config jest.integration.config.js",
     "lint": "eslint src --ext .ts,.tsx",
     "typecheck": "tsc --noEmit"
   },
@@ -50,6 +51,7 @@
     "@typescript-eslint/eslint-plugin": "^5.59.0",
     "@typescript-eslint/parser": "^5.59.0",
     "eslint": "^8.47.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
     "jest": "^29.0.0",
     "react": "19.2.4",
     "react-native": "0.83.1",

package/src/DivKit.tsx

@@ -20,13 +20,14 @@
 
 import React, { useMemo, useCallback, useRef, useEffect } from 'react';
 import { View, type ViewStyle } from 'react-native';
-import type { Action, DivJson, DivVariable, Direction } from '../typings/common';
+import type { Action, DivJson, DivVariable, Direction, VariableTrigger } from '../typings/common';
 import type { DivBaseData } from './types/base';
 import type { ComponentContext } from './types/componentContext';
 import type { MaybeMissing } from './expressions/json';
 import { DivKitContext, type DivKitContextValue, type TypefaceProvider } from './context/DivKitContext';
 import { ActionContext, type ActionContextValue } from './context/ActionContext';
 import { StateContext, type StateContextValue, type StateSetter } from './context/StateContext';
+import { PagerProvider } from './context/PagerContext';
 import { DivComponent } from './components/DivComponent';
 import { createVariable, Variable, type VariableType } from './expressions/variable';
 import { GlobalVariablesController } from './expressions/globalVariablesController';
@@ -39,6 +40,7 @@ import { updateStructure } from './actions/updateStructure';
 import { applySetStateAction, type ActionSetStateCompat } from './actions/setState';
 import { evalExpression } from './expressions/eval';
 import { parse } from './expressions/expressions';
+import { prepareVars } from './expressions/json';
 import { getUrlSchema } from './utils/url';
 
 /**
@@ -248,6 +250,14 @@ export function DivKit({
         return `${key}_${componentIdCounter.current++}`;
     }, []);
 
+    // Card-level variable_triggers (data.card.variable_triggers).
+    // We can't subscribe here yet — execAnyActions is defined below; the actual subscription
+    // happens in a useEffect after execAnyActions is in scope.
+    const variableTriggers = useMemo<VariableTrigger[] | undefined>(() => {
+        const raw = data.card?.variable_triggers;
+        return Array.isArray(raw) ? (raw as VariableTrigger[]) : undefined;
+    }, [data]);
+
     // Variable management
     const getVariable = useCallback(
         (name: string): Variable | undefined => {
@@ -431,7 +441,24 @@ export function DivKit({
                                         const name = params.get('name');
                                         const value = params.get('value');
                                         if (name && value !== null) {
-                                            setVariable(name, value);
+                                            const variableInstance = variables.get(name);
+                                            if (variableInstance) {
+                                                try {
+                                                    variableInstance.set(value);
+                                                } catch (err) {
+                                                    logError(
+                                                        wrapError(err as Error, {
+                                                            additional: { variable: name, value }
+                                                        })
+                                                    );
+                                                }
+                                            } else {
+                                                logError(
+                                                    wrapError(new Error('Cannot find variable'), {
+                                                        additional: { name }
+                                                    })
+                                                );
+                                            }
                                         } else {
                                             logError(
                                                 wrapError(new Error('Incorrect set_variable_action'), {
@@ -463,6 +490,103 @@ export function DivKit({
         [variables, logError, onStat, onCustomAction, setVariable]
     );
 
+    // Subscribe card-level variable_triggers (по образцу Web Root.svelte processVariableTriggers).
+    // on_condition — actions fire only on false→true transition.
+    // on_variable  — actions fire every time used variables change while condition is true.
+    useEffect(() => {
+        if (!variableTriggers || variableTriggers.length === 0) {
+            return;
+        }
+
+        const cleanups: Array<() => void> = [];
+
+        for (const trigger of variableTriggers) {
+            if (typeof trigger.condition !== 'string') {
+                logError(wrapError(new Error('variable_trigger has a condition that is not a string'), {
+                    additional: { condition: trigger.condition as unknown as string }
+                }));
+                continue;
+            }
+            if (!Array.isArray(trigger.actions)) {
+                logError(wrapError(new Error('variable_trigger has no actions'), {
+                    additional: { condition: trigger.condition }
+                }));
+                continue;
+            }
+            const mode = trigger.mode || 'on_condition';
+            if (mode !== 'on_variable' && mode !== 'on_condition') {
+                logError(wrapError(new Error('variable_trigger has an unsupported mode'), {
+                    additional: { mode }
+                }));
+                continue;
+            }
+
+            const prepared = prepareVars(
+                { condition: trigger.condition },
+                logError,
+                undefined,
+                0
+            );
+
+            if (prepared.vars.length === 0) {
+                logError(wrapError(new Error('variable_trigger must have variables in the condition'), {
+                    additional: { condition: trigger.condition }
+                }));
+                continue;
+            }
+
+            const evaluate = (): boolean => {
+                const { result } = prepared.applyVars(variables, undefined, false);
+                const value = (result as { condition?: unknown } | undefined)?.condition;
+                if (value === undefined) {
+                    return false;
+                }
+                // Boolean expressions stringify to '0'/'1' via prepareVars.
+                if (value === '1' || value === 1 || value === true) return true;
+                if (value === '0' || value === 0 || value === false) return false;
+                return Boolean(value);
+            };
+
+            let prevConditionResult = false;
+            let initialized = false;
+
+            const onChange = () => {
+                if (!initialized) return;
+                const cond = evaluate();
+                if (cond && (mode === 'on_variable' || prevConditionResult === false)) {
+                    prevConditionResult = cond;
+                    execAnyActions(trigger.actions, { processUrls: true });
+                } else {
+                    prevConditionResult = cond;
+                }
+            };
+
+            const unsubs: Array<() => void> = [];
+            for (const varName of prepared.vars) {
+                const variable = variables.get(varName);
+                if (!variable) continue;
+                unsubs.push(variable.subscribe(onChange));
+            }
+
+            // After all immediate subscribe-callbacks have fired (and been ignored),
+            // run initial evaluation explicitly — matches Web first-emit behavior.
+            initialized = true;
+            const initialCond = evaluate();
+            if (initialCond) {
+                prevConditionResult = initialCond;
+                execAnyActions(trigger.actions, { processUrls: true });
+            }
+
+            cleanups.push(() => {
+                unsubs.forEach(u => u());
+            });
+        }
+
+        return () => {
+            cleanups.forEach(c => c());
+        };
+    }, [variableTriggers, variables, execAnyActions, logError]);
+
     // Component registration
     const registerComponent = useCallback((_componentId: string, context: ComponentContext): void => {
         componentsMap.current.set(context.id, context);
@@ -684,9 +808,11 @@ export function DivKit({
         <DivKitContext.Provider value={divKitContextValue}>
             <ActionContext.Provider value={actionContextValue}>
                 <StateContext.Provider value={stateContextValue}>
-                    <View style={style}>
-                        <DivComponent componentContext={rootComponentContext} />
-                    </View>
+                    <PagerProvider>
+                        <View style={style}>
+                            <DivComponent componentContext={rootComponentContext} />
+                        </View>
+                    </PagerProvider>
                 </StateContext.Provider>
             </ActionContext.Provider>
         </DivKitContext.Provider>

package/src/components/DivComponent.tsx

@@ -5,6 +5,8 @@ import { DivText } from './text';
 import { DivContainer } from './container';
 import { DivImage } from './image';
 import { DivState } from './state';
+import { DivPager } from './pager';
+import { DivIndicator } from './indicator';
 import { Unknown } from './utilities/Unknown';
 
 export interface DivComponentProps {
@@ -54,12 +56,16 @@ export function DivComponent({ componentContext }: DivComponentProps) {
         case 'state':
             return <DivState componentContext={componentContext as any} />;
 
+        case 'pager':
+            return <DivPager componentContext={componentContext as any} />;
+
+        case 'indicator':
+            return <DivIndicator componentContext={componentContext as any} />;
+
         // Future components (post-MVP)
         case 'gallery':
-        case 'pager':
         case 'tabs':
         case 'slider':
-        case 'indicator':
         case 'input':
         case 'select':
         case 'switch':

package/src/components/README.md

@@ -90,7 +90,44 @@ State management component for switching between different UI states.
 - Advanced state management
 - Multiple concurrent state transitions
 
-### 5. DivComponent (`DivComponent.tsx`)
+### 5. DivPager (`pager/DivPager.tsx`)
+
+Horizontal/vertical pager with snap-to-page scrolling, ported from
+`Pager.svelte`.
+
+**Features:**
+
+- ✅ `ScrollView` + `snapToInterval` snap-to-page behaviour
+- ✅ `layout_mode`: `percentage`, `neighbour_page_width` (fixed), `wrap_content`
+- ✅ `orientation`: horizontal / vertical
+- ✅ `infinite_scroll` (duplicate-edge trick with silent re-snap)
+- ✅ `default_item`, `restrict_parent_scroll`
+- ✅ `item_spacing`, `item_builder`
+- ✅ Exposes pager state to `DivIndicator` via `PagerContext`
+  (`registerPager` / `listenPager` / `scrollToItem`)
+
+**Deferred:**
+
+- `page_transformation` (parallax / depth)
+
+### 6. DivIndicator (`indicator/DivIndicator.tsx`)
+
+Page-position dots for a `DivPager`, ported from `Indicator.svelte`.
+
+**Features:**
+
+- ✅ Subscription to a pager via `PagerContext` (`pager_id`)
+- ✅ Active/inactive dot styles from `active_shape` / `inactive_shape`
+- ✅ Legacy `shape` + `active_item_size` + colors fallback
+- ✅ Tap-to-scroll: `Pressable` → `pagerCtx.scrollToItem(index)`
+- ✅ `items_placement`: `default` (space_between_centers) and `stretch`
+- ✅ Internal `ScrollView` for overflow (many pages)
+
+**Deferred:**
+
+- Animated transitions between dot states (positions snap; no interpolation)
+
+### 7. DivComponent (`DivComponent.tsx`)
 
 Universal component router that dispatches to appropriate component based on type.
 
@@ -100,11 +137,13 @@ Universal component router that dispatches to appropriate component based on typ
 - `container` → DivContainer
 - `image` / `gif` → DivImage
 - `state` → DivState
+- `pager` → DivPager
+- `indicator` → DivIndicator
 
 **Deferred Types:**
 
-- `gallery`, `pager`, `tabs`
-- `slider`, `indicator`
+- `gallery`, `tabs`
+- `slider`
 - `input`, `select`, `switch`
 - `video`, `custom`
 - `separator`, `grid`
@@ -141,9 +180,16 @@ DivComponent (router)
     │   └── DivComponent (recursive for children)
     ├── DivImage
     │   └── Outer
-    └── DivState
+    ├── DivState
+    │   ├── Outer
+    │   └── DivComponent (recursive for active state)
+    ├── DivPager
+    │   ├── Outer
+    │   ├── ScrollView (snap-to-page)
+    │   └── DivComponent (recursive for each page)
+    └── DivIndicator
         ├── Outer
-        └── DivComponent (recursive for active state)
+        └── PagerContext (subscription to bound pager)
 ```
 
 ## Integration with Context System
@@ -220,6 +266,14 @@ src/components/
 ├── state/
 │   ├── DivState.tsx         # State component
 │   └── index.ts
+├── pager/
+│   ├── DivPager.tsx         # Pager component
+│   ├── utils.ts             # layout_mode + infinite-scroll helpers
+│   └── index.ts
+├── indicator/
+│   ├── DivIndicator.tsx     # Indicator component
+│   ├── utils.ts             # dot styles / placement
+│   └── index.ts
 ├── utilities/
 │   ├── Outer.tsx            # Base wrapper
 │   ├── Unknown.tsx          # Fallback

package/src/components/index.ts

@@ -7,6 +7,8 @@ export { DivText } from './text';
 export { DivContainer } from './container';
 export { DivImage } from './image';
 export { DivState } from './state';
+export { DivPager } from './pager';
+export { DivIndicator } from './indicator';
 
 // Utilities
 export { Outer } from './utilities/Outer';
@@ -17,4 +19,6 @@ export type { DivTextProps } from './text';
 export type { DivContainerProps } from './container';
 export type { DivImageProps } from './image';
 export type { DivStateProps } from './state';
+export type { DivPagerProps } from './pager';
+export type { DivIndicatorProps } from './indicator';
 export type { OuterProps } from './utilities/Outer';