react-native-divkit 1.6.5 → 1.8.0

package/src/components/utilities/Outer.tsx

@@ -1,18 +1,22 @@
-import React, { ReactNode, useMemo, useRef, useCallback } from 'react';
-import { View, Pressable, Animated, ViewStyle, StyleSheet, Easing, EasingFunction } from 'react-native';
+import React, { ReactNode, useMemo, useRef, useCallback, useState } from 'react';
+import { View, Pressable, Animated, ViewStyle, StyleSheet, Easing, EasingFunction, LayoutChangeEvent } from 'react-native';
 import type { ComponentContext } from '../../types/componentContext';
 import type { DivBaseData } from '../../types/base';
-import type { Visibility } from '../../types/base';
+import type { Visibility, AppearanceTransition, TransitionChange } from '../../types/base';
 import type { FixedSize, MatchParentSize, WrapContentSize } from '../../types/sizes';
 import type { MaybeMissing } from '../../expressions/json';
 import type { Animation } from '../../types/animation';
 import type { Interpolation } from '../../../typings/common';
 import { useDerivedFromVarsSimple } from '../../hooks/useDerivedFromVars';
 import { useActionHandler, useHasActions } from '../../hooks/useAction';
+import { useAppearanceTransition } from '../../hooks/useAppearanceTransition';
+import { useChangeBoundsTransition } from '../../hooks/useChangeBoundsTransition';
 import { useDivKitContext } from '../../context/DivKitContext';
 import { useLayoutParams } from '../../context/LayoutParamsContext';
+import { useDivStateScopeOptional } from '../../context/DivStateScopeContext';
 import { Background } from './Background';
 import { flattenAnimation } from '../../utils/flattenAnimation';
+import { configureChangeBoundsLayout } from '../../utils/configureChangeBoundsLayout';
 
 function resolveAlignSelf(
     alignment: string | undefined,
@@ -122,6 +126,7 @@ export function Outer<T extends DivBaseData = DivBaseData>({
     const { direction } = useDivKitContext();
     const layoutParams = useLayoutParams();
     const { json, variables } = componentContext;
+    const testID = (json as any).id as string | undefined;
 
     // Only use reactive hooks for truly dynamic properties (visibility, alpha)
     const visibility = useDerivedFromVarsSimple<Visibility>(json.visibility || 'visible', variables || new Map());
@@ -194,20 +199,72 @@ export function Outer<T extends DivBaseData = DivBaseData>({
         Animated.parallel(anims).start();
     }, [parsedAnimations, animOpacity, animScale]);
 
-    // Early return for gone visibility
-    if (visibility === 'gone') {
-        return null;
-    }
+    // Appearance transitions (transition_in / transition_out) and change_bounds (transition_change)
+    const transitionIn = (json as any).transition_in as MaybeMissing<AppearanceTransition> | undefined;
+    const transitionOut = (json as any).transition_out as MaybeMissing<AppearanceTransition> | undefined;
+    const transitionChange = (json as any).transition_change as MaybeMissing<TransitionChange> | undefined;
+    const hasAppearanceTransitions = Boolean(transitionIn || transitionOut);
+    const stateScope = useDivStateScopeOptional();
+    const insideDivState = Boolean(stateScope);
+
+    // For neighbors: when WE appear/collapse, queue a coarse LayoutAnimation so they reflow smoothly.
+    const triggerChangeBoundsForNeighbors = useCallback(() => {
+        configureChangeBoundsLayout(transitionChange);
+    }, [transitionChange]);
+
+    // FLIP-based bounds animation for THIS element: tracks layout deltas and animates via
+    // transform (translate+scale) so the spec's interpolator/cubic-bezier actually applies.
+    const bounds = useChangeBoundsTransition({
+        transitionChange
+    });
+
+    // Measured size for off-center pivot scale (translate-scale-translate emulation).
+    // We reuse the same onLayout for both FLIP and pivot calculations.
+    const [layoutSize, setLayoutSize] = useState<{ width: number; height: number } | null>(null);
+    const onLayoutMeasure = useCallback((e: LayoutChangeEvent) => {
+        const { width, height } = e.nativeEvent.layout;
+        setLayoutSize(prev => {
+            if (prev && prev.width === width && prev.height === height) return prev;
+            return { width, height };
+        });
+        bounds.onLayout(e);
+    }, [bounds]);
+
+    // Whether this element lives inside a DivState. If so, on state-change DivState will call
+    // our playOut (via the scope context) and await it before swapping children. In that mode we
+    // disable the visibility-driven first-mount transition_in (DivState will trigger playIn on
+    // the new children automatically through their mount-effect with auto-in mode).
+    const appearance = useAppearanceTransition({
+        visibility: visibility as Visibility,
+        transitionIn,
+        transitionOut,
+        enabled: hasAppearanceTransitions,
+        mode: insideDivState ? 'auto-in' : 'visibility',
+        onBeforeCollapse: triggerChangeBoundsForNeighbors,
+        onBeforeExpand: triggerChangeBoundsForNeighbors,
+        layoutWidth: layoutSize?.width,
+        layoutHeight: layoutSize?.height,
+    });
+
+    // Register transition_out player with the enclosing DivState scope so it can play before unmount.
+    React.useEffect(() => {
+        if (!stateScope || !appearance.hasTransitionOut) return;
+        return stateScope.registerTransitionOutPlayer(appearance.playOut);
+    }, [stateScope, appearance.hasTransitionOut, appearance.playOut]);
 
     // Build styles
     const containerStyle = useMemo(() => {
         const styles: ViewStyle = {};
 
         // Visibility (invisible = opacity 0, but still takes space)
-        if (visibility === 'invisible') {
-            styles.opacity = 0;
-        } else if (typeof alpha === 'number' && alpha !== 1) {
-            styles.opacity = Math.max(0, Math.min(1, alpha));
+        // When appearance transitions are present, opacity is driven by Animated values below,
+        // not by static styles — otherwise the static value would override animation.
+        if (!hasAppearanceTransitions) {
+            if (visibility === 'invisible') {
+                styles.opacity = 0;
+            } else if (typeof alpha === 'number' && alpha !== 1) {
+                styles.opacity = Math.max(0, Math.min(1, alpha));
+            }
         }
 
         // Resolve effective alignment (explicit > parent fallback > 'start')
@@ -435,7 +492,7 @@ export function Outer<T extends DivBaseData = DivBaseData>({
         }
 
         return styles;
-    }, [visibility, alpha, width, height, paddings, margins, background, border, direction, layoutParams, alignmentHorizontal, alignmentVertical]);
+    }, [visibility, alpha, width, height, paddings, margins, background, border, direction, layoutParams, alignmentHorizontal, alignmentVertical, hasAppearanceTransitions]);
 
     const finalStyle = useMemo(() => {
         return StyleSheet.flatten([containerStyle, customStyle]);
@@ -452,83 +509,143 @@ export function Outer<T extends DivBaseData = DivBaseData>({
         return res;
     }, [finalStyle]);
 
-    // Render with actions and animation
-    if (hasActions) {
-        const hasAnimation = parsedAnimations.length > 0;
-
-        if (hasAnimation) {
-            // Split finalStyle into outer (layout) and inner (visual) styles
-            // Margins must be on Pressable to affect parent layout
-            const {
-                alignSelf, flexGrow, flexShrink, flexBasis,
-                width: w, height: h, minWidth, maxWidth, minHeight, maxHeight,
-                marginTop, marginBottom, marginLeft, marginRight,
-                ...innerStyle
-            } = (finalStyle || {}) as any;
-
-            const outerStyle: ViewStyle = {};
-            if (alignSelf !== undefined) outerStyle.alignSelf = alignSelf;
-            if (flexGrow !== undefined) outerStyle.flexGrow = flexGrow;
-            if (flexShrink !== undefined) outerStyle.flexShrink = flexShrink;
-            if (flexBasis !== undefined) outerStyle.flexBasis = flexBasis;
-            if (w !== undefined) outerStyle.width = w;
-            if (h !== undefined) outerStyle.height = h;
-            if (minWidth !== undefined) outerStyle.minWidth = minWidth;
-            if (maxWidth !== undefined) outerStyle.maxWidth = maxWidth;
-            if (minHeight !== undefined) outerStyle.minHeight = minHeight;
-            if (maxHeight !== undefined) outerStyle.maxHeight = maxHeight;
-            if (marginTop !== undefined) outerStyle.marginTop = marginTop;
-            if (marginBottom !== undefined) outerStyle.marginBottom = marginBottom;
-            if (marginLeft !== undefined) outerStyle.marginLeft = marginLeft;
-            if (marginRight !== undefined) outerStyle.marginRight = marginRight;
-
-            // Build animated style from inner (visual) properties
-            const shouldFillInner =
-                w !== undefined ||
-                h !== undefined ||
-                minWidth !== undefined ||
-                maxWidth !== undefined ||
-                minHeight !== undefined ||
-                maxHeight !== undefined ||
-                flexGrow !== undefined ||
-                flexShrink !== undefined ||
-                flexBasis !== undefined;
-
-            const animatedStyle: any = shouldFillInner
-                ? { ...innerStyle, flex: 1 }
-                : { ...innerStyle };
-
-            if (hasFadeAnimation) {
-                const staticOpacity = animatedStyle.opacity;
-                if (staticOpacity !== undefined && staticOpacity !== 1) {
-                    animatedStyle.opacity = Animated.multiply(animOpacity, staticOpacity);
-                } else {
-                    animatedStyle.opacity = animOpacity;
-                }
-            }
+    // Collapsed via appearance transitions (or static 'gone' without transitions) — render nothing
+    if (appearance.collapsed) {
+        return null;
+    }
+    if (!hasAppearanceTransitions && visibility === 'gone') {
+        return null;
+    }
+
+    const hasActionAnim = parsedAnimations.length > 0;
+    const hasTransitionChange = Boolean(transitionChange);
+    const needsAnimatedWrapper = hasActionAnim || hasAppearanceTransitions || hasTransitionChange;
+
+    if (needsAnimatedWrapper) {
+        // Split finalStyle into outer (layout) and inner (visual) styles.
+        // Margins/sizing/alignSelf live on the wrapper that participates in parent layout (Pressable or outer View),
+        // visual styles go inside Animated.View.
+        const {
+            alignSelf, flexGrow, flexShrink, flexBasis,
+            width: w, height: h, minWidth, maxWidth, minHeight, maxHeight,
+            marginTop, marginBottom, marginLeft, marginRight,
+            ...innerStyle
+        } = (finalStyle || {}) as any;
+
+        const outerStyle: ViewStyle = {};
+        if (alignSelf !== undefined) outerStyle.alignSelf = alignSelf;
+        if (flexGrow !== undefined) outerStyle.flexGrow = flexGrow;
+        if (flexShrink !== undefined) outerStyle.flexShrink = flexShrink;
+        if (flexBasis !== undefined) outerStyle.flexBasis = flexBasis;
+        if (w !== undefined) outerStyle.width = w;
+        if (h !== undefined) outerStyle.height = h;
+        if (minWidth !== undefined) outerStyle.minWidth = minWidth;
+        if (maxWidth !== undefined) outerStyle.maxWidth = maxWidth;
+        if (minHeight !== undefined) outerStyle.minHeight = minHeight;
+        if (maxHeight !== undefined) outerStyle.maxHeight = maxHeight;
+        if (marginTop !== undefined) outerStyle.marginTop = marginTop;
+        if (marginBottom !== undefined) outerStyle.marginBottom = marginBottom;
+        if (marginLeft !== undefined) outerStyle.marginLeft = marginLeft;
+        if (marginRight !== undefined) outerStyle.marginRight = marginRight;
+
+        const shouldFillInner =
+            w !== undefined ||
+            h !== undefined ||
+            minWidth !== undefined ||
+            maxWidth !== undefined ||
+            minHeight !== undefined ||
+            maxHeight !== undefined ||
+            flexGrow !== undefined ||
+            flexShrink !== undefined ||
+            flexBasis !== undefined;
+
+        const animatedStyle: any = shouldFillInner
+            ? { ...innerStyle, flex: 1 }
+            : { ...innerStyle };
+
+        // Compose opacity chain: static * action_animation * appearance_transition
+        let opacityChain: any = undefined;
+        const staticOpacity = animatedStyle.opacity;
+        if (staticOpacity !== undefined && staticOpacity !== 1) {
+            opacityChain = staticOpacity;
+        }
+        if (hasActionAnim && hasFadeAnimation) {
+            opacityChain = opacityChain !== undefined
+                ? Animated.multiply(animOpacity, opacityChain)
+                : animOpacity;
+        }
+        if (hasAppearanceTransitions) {
+            opacityChain = opacityChain !== undefined
+                ? Animated.multiply(appearance.opacity as Animated.Value, opacityChain)
+                : appearance.opacity;
+        }
+        if (opacityChain !== undefined) {
+            animatedStyle.opacity = opacityChain;
+        }
 
-            if (hasScaleAnimation) {
-                const existingTransform = animatedStyle.transform || [];
-                animatedStyle.transform = [...existingTransform, { scale: animScale }];
+        // Compose transform array. Order matters: in RN transforms apply right-to-left
+        // (the LAST element is applied first to the point, then earlier ones).
+        // We want FLIP (bounds) to wrap everything → put it FIRST (so it applies last on top
+        // of action_animation/appearance). Static transforms from style come first too.
+        const transforms: any[] = animatedStyle.transform ? [...animatedStyle.transform] : [];
+        if (hasTransitionChange && bounds.transform.length > 0) {
+            for (const t of bounds.transform) {
+                transforms.push(t);
+            }
+        }
+        if (hasActionAnim && hasScaleAnimation) {
+            transforms.push({ scale: animScale });
+        }
+        if (hasAppearanceTransitions && appearance.transform.length > 0) {
+            for (const t of appearance.transform) {
+                transforms.push(t);
             }
+        }
+        if (transforms.length > 0) {
+            animatedStyle.transform = transforms;
+        }
 
+        const innerNeedsOnLayout = hasAppearanceTransitions && !hasTransitionChange;
+        const outerNeedsOnLayout = hasTransitionChange;
+        const content = (
+            <Animated.View
+                style={animatedStyle}
+                onLayout={innerNeedsOnLayout ? onLayoutMeasure : undefined}
+            >
+                <Background layers={background as any} style={borderStyle} />
+                {children}
+            </Animated.View>
+        );
+
+        if (hasActions) {
             return (
                 <Pressable
                     onPress={handlePress}
                     onPressIn={onPressIn}
                     onPressOut={onPressOut}
                     style={outerStyle}
+                    onLayout={outerNeedsOnLayout ? onLayoutMeasure : undefined}
+                    testID={testID}
                 >
-                    <Animated.View style={animatedStyle}>
-                        <Background layers={background as any} style={borderStyle} />
-                        {children}
-                    </Animated.View>
+                    {content}
                 </Pressable>
             );
         }
 
         return (
-            <Pressable onPress={handlePress} style={finalStyle}>
+            <View
+                style={outerStyle}
+                onLayout={outerNeedsOnLayout ? onLayoutMeasure : undefined}
+                testID={testID}
+            >
+                {content}
+            </View>
+        );
+    }
+
+    if (hasActions) {
+        return (
+            <Pressable onPress={handlePress} style={finalStyle} testID={testID}>
                 <Background layers={background as any} style={borderStyle} />
                 {children}
             </Pressable>
@@ -536,7 +653,7 @@ export function Outer<T extends DivBaseData = DivBaseData>({
     }
 
     return (
-        <View style={finalStyle}>
+        <View style={finalStyle} testID={testID}>
             <Background layers={background as any} style={borderStyle} />
             {children}
         </View>

package/src/context/DivStateScopeContext.tsx

@@ -0,0 +1,23 @@
+import { createContext, useContext } from 'react';
+
+/**
+ * Scoped context provided by a single DivState wrapping its currently-rendered children.
+ *
+ * Allows children that declare `transition_out` (via Outer + useAppearanceTransition) to
+ * register a playOut callback so that DivState can await all of them in parallel
+ * before swapping to a new state. Analogous to Web's stateCtx.registerChildWithTransitionOut.
+ */
+export interface DivStateScopeValue {
+    /**
+     * Register a child's transition_out player.
+     * Returns an unregister callback (call from cleanup).
+     */
+    registerTransitionOutPlayer(play: () => Promise<void>): () => void;
+}
+
+export const DivStateScopeContext = createContext<DivStateScopeValue | null>(null);
+
+/** Get the nearest DivState scope, or null if outside any DivState. */
+export function useDivStateScopeOptional(): DivStateScopeValue | null {
+    return useContext(DivStateScopeContext);
+}

package/src/context/PagerContext.tsx

@@ -0,0 +1,108 @@
+import { createContext, useContext, useCallback, useMemo, useRef, ReactNode, createElement } from 'react';
+import type { PagerData, PagerListener, PagerRegisterData } from '../types/componentContext';
+
+/**
+ * PagerContext — shared registry for pagers and their indicators.
+ *
+ * Based on Web Root.svelte: registerPager / listenPager.
+ *
+ * - Pager registers itself with `registerPager(pagerId)` and gets back an object with
+ *   `update(data)` (called whenever current item / size changes) and `destroy()`.
+ * - Indicator subscribes to a pager via `listenPager(pagerId, cb)`.
+ * - Subscribers receive the current pager state immediately if it's already known
+ *   (so indicator works regardless of mount order).
+ */
+export interface PagerContextValue {
+    registerPager(pagerId: string | undefined): PagerRegisterData;
+    listenPager(pagerId: string | undefined, listener: PagerListener): () => void;
+}
+
+export const PagerContext = createContext<PagerContextValue | null>(null);
+
+export function usePagerContextOptional(): PagerContextValue | null {
+    return useContext(PagerContext);
+}
+
+export function usePagerContext(): PagerContextValue {
+    const context = useContext(PagerContext);
+    if (!context) {
+        throw new Error('usePagerContext must be used within PagerContext.Provider');
+    }
+    return context;
+}
+
+export interface PagerProviderProps {
+    children: ReactNode;
+}
+
+/**
+ * Provider that holds pager state in stable refs. Mirrors the Web behaviour
+ * where registration / listening is keyed by pagerId (with `undefined` allowed
+ * so indicators without an explicit pager_id still work).
+ */
+export function PagerProvider({ children }: PagerProviderProps) {
+    const pagersRef = useRef<Map<string | undefined, PagerData | null>>(new Map());
+    const listenersRef = useRef<Map<string | undefined, PagerListener[]>>(new Map());
+
+    const notify = useCallback((pagerId: string | undefined, data: PagerData) => {
+        const list = listenersRef.current.get(pagerId);
+        if (!list) return;
+        for (const fn of list) {
+            try {
+                fn(data);
+            } catch (err) {
+                // eslint-disable-next-line no-console
+                console.error('[DivKit Pager] listener error', err);
+            }
+        }
+    }, []);
+
+    const registerPager = useCallback((pagerId: string | undefined): PagerRegisterData => {
+        return {
+            update: (data: PagerData) => {
+                pagersRef.current.set(pagerId, data);
+                notify(pagerId, data);
+            },
+            destroy: () => {
+                pagersRef.current.set(pagerId, null);
+            }
+        };
+    }, [notify]);
+
+    const listenPager = useCallback(
+        (pagerId: string | undefined, listener: PagerListener): (() => void) => {
+            let list = listenersRef.current.get(pagerId);
+            if (!list) {
+                list = [];
+                listenersRef.current.set(pagerId, list);
+            }
+            list.push(listener);
+
+            // Replay last known state so indicator gets current pager position immediately
+            const current = pagersRef.current.get(pagerId);
+            if (current) {
+                try {
+                    listener(current);
+                } catch (err) {
+                    // eslint-disable-next-line no-console
+                    console.error('[DivKit Pager] listener error', err);
+                }
+            }
+
+            return () => {
+                const arr = listenersRef.current.get(pagerId);
+                if (!arr) return;
+                const idx = arr.indexOf(listener);
+                if (idx >= 0) arr.splice(idx, 1);
+            };
+        },
+        []
+    );
+
+    const value = useMemo<PagerContextValue>(
+        () => ({ registerPager, listenPager }),
+        [registerPager, listenPager]
+    );
+
+    return createElement(PagerContext.Provider, { value }, children);
+}

package/src/context/index.ts

@@ -22,3 +22,11 @@ export {
     useIsEnabled,
     type EnabledContextValue
 } from './EnabledContext';
+
+export {
+    PagerContext,
+    PagerProvider,
+    usePagerContext,
+    usePagerContextOptional,
+    type PagerContextValue
+} from './PagerContext';