expo-divkit/build/ExpoDivKitView.js

divkit render library

import * as React from "react";
import { findNodeHandle, View } from "react-native";
import { CustomComponentLibrary } from "./CustomComponent";
import { LayoutParam, } from "./ExpoDivKit.types";
import { NativeModule } from "./NativeModule";
import { NativeView } from "./NativeView";
import { deepCopyAndIndexCustom } from "./utils";
export function ExpoDivKitView({ json, variables, flex = false, }) {
    const refView = React.useRef(null);
    const [customViews, setCustomViews] = React.useState([]);
    const [rootViewHeight, setRootViewHeight] = React.useState(0);
    const [layoutHeight, setLayoutHeight] = React.useState(LayoutParam.WRAP_CONTENT);
    const [indexedJson, setIndexedJson] = React.useState(json);
    const initialization = (data) => {
        const deepCopy = deepCopyAndIndexCustom(data);
        const [indexedJson, customViews] = deepCopy;
        setIndexedJson(indexedJson);
        setCustomViews(customViews);
        /**
         * Изменение высоты необходимо чтобы принудительно вызвать перерисовку лайаута,
         * иначе она сама не вызывается.
         * При перерисовке лайаута будет вызван onHeightChanged и это событие корректно обновит высоту
         */
        setRootViewHeight((prev) => (prev > 0 ? prev - 1 : prev));
    };
    const onHeightChanged = (e) => {
        setRootViewHeight(e.nativeEvent.height);
    };
    const onLayout = () => {
        if (refView.current) {
            NativeModule.onCustomViewRendered(findNodeHandle(refView.current));
        }
    };
    const onLayoutWrapper = (e) => {
        setLayoutHeight(flex ? e.nativeEvent.layout.height : LayoutParam.WRAP_CONTENT);
        if (flex)
            setRootViewHeight(e.nativeEvent.layout.height);
    };
    React.useEffect(() => {
        initialization(json);
    }, [json]);
    return (<View style={flex ? { flex: 1 } : undefined} onLayout={onLayoutWrapper}>
      <NativeView ref={refView} json={indexedJson} onHeightChanged={onHeightChanged} style={{ height: rootViewHeight }} layoutHeight={layoutHeight} variables={variables}>
        {customViews.map(({ nativeViewId, customType }) => {
            const Component = CustomComponentLibrary.get(customType);
            return Component ? (<View key={nativeViewId} nativeID={nativeViewId} style={{ position: "absolute", left: 0, right: 0, top: 0 }} 
            // TODO: #104735
            onLayout={onLayout}>
              <Component />
            </View>) : null;
        })}
      </NativeView>
    </View>);
}
//# sourceMappingURL=ExpoDivKitView.js.map