@developer_tribe/react-builder 1.2.1 → 1.2.2

package/src/build-components/PaywallSubscribeButton/PaywallSubscribeButton.tsx

@@ -3,7 +3,7 @@ import type { PaywallSubscribeButtonComponentProps } from './PaywallSubscribeBut
 import useNode from '../useNode';
 import { useRenderStore } from '../../store';
 import { useLogRender } from '../../utils/useLogRender';
-import { extractTextStyle } from '../../utils/extractTextStyle';
+import { useExtractTextStyle } from '../../hooks/useExtractTextStyle';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
 import { useLocalize } from '../../hooks/useLocalize';
@@ -30,10 +30,10 @@ function PaywallSubscribeButton({
     }),
   );
 
-  const baseStyle = useMemo(
-    () => extractTextStyle(node as any, { appConfig, projectColors }),
-    [node, appConfig, projectColors],
-  );
+  const baseStyle = useExtractTextStyle(node as any, {
+    appConfig,
+    projectColors,
+  });
 
   const isSelected = isNodeSelected({ previewMode, current, node });
   const style = useMergedStyle(

package/src/build-components/RadioButton/RadioButton.tsx

@@ -2,7 +2,7 @@ import React, { useContext, useId, useMemo } from 'react';
 import type { RadioButtonComponentProps } from './RadioButtonProps.generated';
 import useNode from '../useNode';
 import { useRenderStore } from '../../store';
-import { extractViewStyle } from '../../utils/extractViewStyle';
+import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
 import { useLogRender } from '../../utils/useLogRender';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
@@ -91,10 +91,10 @@ function RadioButton({ node }: RadioButtonComponentProps) {
     }),
   );
 
-  const baseStyle = useMemo(
-    () => extractViewStyle(node, { appConfig, projectColors }),
-    [node, appConfig, projectColors],
-  );
+  const baseStyle = useExtractViewStyle(node as any, {
+    appConfig,
+    projectColors,
+  });
 
   const isSelected = isNodeSelected({ previewMode, current, node });
   const style = useMergedStyle(

package/src/build-components/Text/Text.tsx

@@ -8,7 +8,7 @@ import React, {
 import type { TextComponentProps } from './TextProps.generated';
 import useNode from '../useNode';
 import { useRenderStore } from '../../store';
-import { extractTextStyle } from '../../utils/extractTextStyle';
+import { useExtractTextStyle } from '../../hooks/useExtractTextStyle';
 import { useLogRender } from '../../utils/useLogRender';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
@@ -31,10 +31,7 @@ function Text({ node }: TextComponentProps) {
     }),
   );
   const keyOrText: string = node.children as string;
-  const textStyle = useMemo(
-    () => extractTextStyle(node, { appConfig, projectColors }),
-    [node, appConfig, projectColors],
-  );
+  const textStyle = useExtractTextStyle(node, { appConfig, projectColors });
   const isSelected = isNodeSelected({ previewMode, current, node });
   const localize = useLocalize();
 

package/src/build-components/View/View.tsx

@@ -1,10 +1,10 @@
-import React, { useId, useMemo } from 'react';
+import React, { useId } from 'react';
 import type { ViewComponentProps } from './ViewProps.generated';
 import RenderNode from '../RenderNode.generated';
 import { Node } from '../../types/Node';
 import useNode from '../useNode';
 import { useRenderStore } from '../../store';
-import { extractViewStyle } from '../../utils/extractViewStyle';
+import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
 import { useLogRender } from '../../utils/useLogRender';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
@@ -23,10 +23,7 @@ export function View({ node }: ViewComponentProps) {
       projectColors: s.projectColors,
     }),
   );
-  const baseStyle = useMemo(
-    () => extractViewStyle(node, { appConfig, projectColors }),
-    [node, appConfig, projectColors],
-  );
+  const baseStyle = useExtractViewStyle(node, { appConfig, projectColors });
   const isSelected = isNodeSelected({ previewMode, current, node });
   const viewStyle = useMergedStyle(
     baseStyle,

package/src/hooks/useExtractTextStyle.ts

@@ -0,0 +1,30 @@
+import { useMemo } from 'react';
+import type { NodeData } from '../types/Node';
+import type { TextPropsGenerated } from '../build-components/Text/TextProps.generated';
+import type { AppConfig } from '../types/PreviewConfig';
+import type { ProjectColors } from '../types/Project';
+import { useRenderStore } from '../store';
+import { extractTextStyle } from '../utils/extractTextStyle';
+
+export type UseExtractTextStyleOptions = {
+  appConfig?: AppConfig;
+  projectColors?: ProjectColors;
+};
+
+export function useExtractTextStyle<T extends TextPropsGenerated['attributes']>(
+  node: NodeData<T>,
+  options: UseExtractTextStyleOptions = {},
+) {
+  const storeAppConfig = useRenderStore((s) => s.appConfig);
+  const storeProjectColors = useRenderStore((s) => s.projectColors);
+  const fonts = useRenderStore((s) => s.fonts);
+
+  const appConfig = options.appConfig ?? storeAppConfig;
+  const projectColors = options.projectColors ?? storeProjectColors;
+
+  return useMemo(
+    () => extractTextStyle(node, { appConfig, projectColors }),
+    // fonts is intentionally included: extractTextStyle resolves weights via store-provided font definitions.
+    [node, appConfig, projectColors, fonts],
+  );
+}

package/src/hooks/useExtractViewStyle.ts

@@ -0,0 +1,28 @@
+import { useMemo } from 'react';
+import type { NodeData } from '../types/Node';
+import type { ViewPropsGenerated } from '../build-components/View/ViewProps.generated';
+import type { AppConfig } from '../types/PreviewConfig';
+import type { ProjectColors } from '../types/Project';
+import { useRenderStore } from '../store';
+import { extractViewStyle } from '../utils/extractViewStyle';
+
+export type UseExtractViewStyleOptions = {
+  appConfig?: AppConfig;
+  projectColors?: ProjectColors;
+};
+
+export function useExtractViewStyle<T extends ViewPropsGenerated['attributes']>(
+  node: NodeData<T>,
+  options: UseExtractViewStyleOptions = {},
+) {
+  const storeAppConfig = useRenderStore((s) => s.appConfig);
+  const storeProjectColors = useRenderStore((s) => s.projectColors);
+
+  const appConfig = options.appConfig ?? storeAppConfig;
+  const projectColors = options.projectColors ?? storeProjectColors;
+
+  return useMemo(
+    () => extractViewStyle(node, { appConfig, projectColors }),
+    [node, appConfig, projectColors],
+  );
+}

package/src/index.native.ts

@@ -74,6 +74,9 @@ export {
   getArrayItemType,
 } from './utils/patterns';
 
+// Node helpers (RN-safe)
+export { default as useNode } from './build-components/useNode';
+
 // Static sample data helpers (RN-safe)
 export {
   getSamples,

package/src/index.ts

@@ -12,6 +12,8 @@ export { RenderErrorBoundary } from './components/RenderErrorBoundary';
 export { useParams } from './hooks/useParams';
 export { useLocalizationParams } from './hooks/useLocalizationParams';
 export { useLocalize } from './hooks/useLocalize';
+export { useExtractTextStyle } from './hooks/useExtractTextStyle';
+export { useExtractViewStyle } from './hooks/useExtractViewStyle';
 
 export type { TargetedScreenSize } from './types/TargetedScreenSize';
 export type { Node, NodeData, NodeDefaultAttribute } from './types/Node';

package/src/utils/extractTextStyle/extractTextStyle.ts

@@ -0,0 +1,160 @@
+import type { NodeData } from '../../types/Node';
+import type { TextPropsGenerated } from '../../build-components/Text/TextProps.generated';
+import type { AppConfig } from '../../types/PreviewConfig';
+import { defaultAppConfig } from '../../types/PreviewConfig';
+import type { ProjectColors } from '../../types/Project';
+import { fs, parseSize } from '../../size-matters';
+import { parseColor } from '../parseColor';
+import { extractViewStyle } from '../extractViewStyle';
+import { normalizeFontWeight } from '../fontWeight';
+import { useRenderStore } from '../../store';
+import {
+  findFontDefinition,
+  loadFontFamily,
+  resolveClosestFontWeightKey,
+} from '../loadFontFamily';
+import { fontsDebug } from '../fontsDebug';
+
+const inFlightFontLoads: Map<string, Promise<void>> = new Map();
+
+function weightToNumericKey(weight: unknown): string | undefined {
+  const normalized = normalizeFontWeight(weight);
+  if (!normalized) return undefined;
+  if (normalized === 'normal') return '400';
+  if (normalized === 'bold') return '700';
+  // already '100'..'900'
+  return normalized;
+}
+
+function ensureFontWeightLoaded(familyName: string, weightKey?: string) {
+  if (typeof document === 'undefined') return;
+  const name = familyName.trim();
+  if (!name) return;
+  const weight = weightKey?.trim() || '400';
+  const cacheKey = `${name}@${weight}`;
+  if (inFlightFontLoads.has(cacheKey)) return;
+
+  fontsDebug.info('extractTextStyle: ensureFontWeightLoaded', {
+    familyName: name,
+    weight,
+  });
+
+  const { fonts, markFontLoaded, addError } = useRenderStore.getState();
+  const promise = loadFontFamily(fonts, name, {
+    preferWeight: weight,
+    forceFetch: true,
+  })
+    .then(() => {
+      fontsDebug.info('extractTextStyle: font weight loaded', {
+        familyName: name,
+        weight,
+      });
+      markFontLoaded(name);
+    })
+    .catch((e) => {
+      fontsDebug.compactError('extractTextStyle: font weight load failed', e, {
+        familyName: name,
+        weight,
+      });
+      addError(
+        `Failed to load font "${name}" (weight ${weight}): ${
+          e instanceof Error ? e.message : String(e)
+        }`,
+      );
+    })
+    .finally(() => {
+      inFlightFontLoads.delete(cacheKey);
+    });
+
+  inFlightFontLoads.set(cacheKey, promise);
+}
+
+export type ExtractTextStyleOptions = {
+  appConfig?: AppConfig;
+  projectColors?: ProjectColors;
+};
+
+export function extractTextStyle<T extends TextPropsGenerated['attributes']>(
+  node: NodeData<T>,
+  options: ExtractTextStyleOptions = {},
+) {
+  const attributes = node.attributes;
+  const styleBag = (attributes as any)?.style as
+    | Record<string, unknown>
+    | undefined;
+  const get = <K extends keyof TextPropsGenerated['attributes']>(
+    key: K,
+  ): TextPropsGenerated['attributes'][K] | undefined => {
+    const direct = (attributes as any)?.[key];
+    if (direct !== undefined && direct !== null) return direct;
+    return styleBag?.[key as unknown as string] as any;
+  };
+  const resolvedAppConfig = options.appConfig ?? defaultAppConfig;
+  const { screenStyle, theme } = resolvedAppConfig;
+  const fallbackColor =
+    theme === 'light' ? screenStyle.light.color : screenStyle.dark.color;
+
+  const style: React.CSSProperties = {};
+
+  if (!attributes) {
+    style.fontSize = fs(14);
+    style.color = fallbackColor;
+    return style;
+  }
+
+  // Typography
+  const fontSize = get('fontSize') as any;
+  if (fontSize !== undefined) {
+    const parsed = parseSize(fontSize);
+    style.fontSize = parsed as React.CSSProperties['fontSize'];
+  } else {
+    style.fontSize = fs(14);
+  }
+  const fontFamily = get('fontFamily') as any;
+  const fontWeight = get('fontWeight') as any;
+  const requestedWeight = weightToNumericKey(fontWeight);
+  const normalizedFontFamily =
+    typeof fontFamily === 'string' && fontFamily.trim().length > 0
+      ? fontFamily.trim()
+      : undefined;
+  if (normalizedFontFamily) {
+    // Resolve "closest available" weight for this family (e.g. if requested 100 but family starts at 300).
+    const { fonts } = useRenderStore.getState();
+    const def = findFontDefinition(fonts, normalizedFontFamily);
+    const resolvedWeightKey =
+      def?.family && typeof def.family === 'object'
+        ? resolveClosestFontWeightKey(
+            def.family as Record<string, string>,
+            requestedWeight,
+          )
+        : requestedWeight;
+
+    fontsDebug.info('extractTextStyle: resolved font family/weight', {
+      fontFamily: normalizedFontFamily,
+      requestedWeight,
+      resolvedWeightKey,
+    });
+
+    style.fontFamily = `"${normalizedFontFamily}"`;
+    // Ensure the correct weight file is available (lazy-load per weight).
+    ensureFontWeightLoaded(normalizedFontFamily, resolvedWeightKey);
+    // Important: set fontWeight to the actual weight we loaded so CSS requests match loaded face.
+    if (resolvedWeightKey) {
+      style.fontWeight = resolvedWeightKey;
+    }
+  }
+  const normalizedFontWeight = normalizeFontWeight(fontWeight);
+  // If no fontFamily is set, keep previous behavior.
+  if (!normalizedFontFamily && normalizedFontWeight)
+    style.fontWeight = normalizedFontWeight;
+  const resolvedTextColor = parseColor(get('color') as any, {
+    projectColors: options.projectColors,
+    appConfig: resolvedAppConfig,
+  });
+  style.color = resolvedTextColor ?? fallbackColor;
+  const textAlign = get('textAlign') as any;
+  if (textAlign)
+    style.textAlign = textAlign as React.CSSProperties['textAlign'];
+
+  return { ...extractViewStyle(node, options), ...style };
+}

package/src/utils/extractTextStyle.ts

@@ -1,160 +1,2 @@
-import type { NodeData } from '../types/Node';
-import type { TextPropsGenerated } from '../build-components/Text/TextProps.generated';
-import type { AppConfig } from '../types/PreviewConfig';
-import { defaultAppConfig } from '../types/PreviewConfig';
-import type { ProjectColors } from '../types/Project';
-import { fs, parseSize } from '../size-matters';
-import { parseColor } from './parseColor';
-import { extractViewStyle } from './extractViewStyle';
-import { normalizeFontWeight } from './fontWeight';
-import { useRenderStore } from '../store';
-import {
-  findFontDefinition,
-  loadFontFamily,
-  resolveClosestFontWeightKey,
-} from './loadFontFamily';
-import { fontsDebug } from './fontsDebug';
-
-const inFlightFontLoads: Map<string, Promise<void>> = new Map();
-
-function weightToNumericKey(weight: unknown): string | undefined {
-  const normalized = normalizeFontWeight(weight);
-  if (!normalized) return undefined;
-  if (normalized === 'normal') return '400';
-  if (normalized === 'bold') return '700';
-  // already '100'..'900'
-  return normalized;
-}
-
-function ensureFontWeightLoaded(familyName: string, weightKey?: string) {
-  if (typeof document === 'undefined') return;
-  const name = familyName.trim();
-  if (!name) return;
-  const weight = weightKey?.trim() || '400';
-  const cacheKey = `${name}@${weight}`;
-  if (inFlightFontLoads.has(cacheKey)) return;
-
-  fontsDebug.info('extractTextStyle: ensureFontWeightLoaded', {
-    familyName: name,
-    weight,
-  });
-
-  const { fonts, markFontLoaded, addError } = useRenderStore.getState();
-  const promise = loadFontFamily(fonts, name, {
-    preferWeight: weight,
-    forceFetch: true,
-  })
-    .then(() => {
-      fontsDebug.info('extractTextStyle: font weight loaded', {
-        familyName: name,
-        weight,
-      });
-      markFontLoaded(name);
-    })
-    .catch((e) => {
-      fontsDebug.compactError('extractTextStyle: font weight load failed', e, {
-        familyName: name,
-        weight,
-      });
-      addError(
-        `Failed to load font "${name}" (weight ${weight}): ${
-          e instanceof Error ? e.message : String(e)
-        }`,
-      );
-    })
-    .finally(() => {
-      inFlightFontLoads.delete(cacheKey);
-    });
-
-  inFlightFontLoads.set(cacheKey, promise);
-}
-
-type ExtractTextStyleOptions = {
-  appConfig?: AppConfig;
-  projectColors?: ProjectColors;
-};
-
-export function extractTextStyle<T extends TextPropsGenerated['attributes']>(
-  node: NodeData<T>,
-  options: ExtractTextStyleOptions = {},
-) {
-  const attributes = node.attributes;
-  const styleBag = (attributes as any)?.style as
-    | Record<string, unknown>
-    | undefined;
-  const get = <K extends keyof TextPropsGenerated['attributes']>(
-    key: K,
-  ): TextPropsGenerated['attributes'][K] | undefined => {
-    const direct = (attributes as any)?.[key];
-    if (direct !== undefined && direct !== null) return direct;
-    return styleBag?.[key as unknown as string] as any;
-  };
-  const resolvedAppConfig = options.appConfig ?? defaultAppConfig;
-  const { screenStyle, theme } = resolvedAppConfig;
-  const fallbackColor =
-    theme === 'light' ? screenStyle.light.color : screenStyle.dark.color;
-
-  const style: React.CSSProperties = {};
-
-  if (!attributes) {
-    style.fontSize = fs(14);
-    style.color = fallbackColor;
-    return style;
-  }
-
-  // Typography
-  const fontSize = get('fontSize') as any;
-  if (fontSize !== undefined) {
-    const parsed = parseSize(fontSize);
-    style.fontSize = parsed as React.CSSProperties['fontSize'];
-  } else {
-    style.fontSize = fs(14);
-  }
-  const fontFamily = get('fontFamily') as any;
-  const fontWeight = get('fontWeight') as any;
-  const requestedWeight = weightToNumericKey(fontWeight);
-  const normalizedFontFamily =
-    typeof fontFamily === 'string' && fontFamily.trim().length > 0
-      ? fontFamily.trim()
-      : undefined;
-  if (normalizedFontFamily) {
-    // Resolve "closest available" weight for this family (e.g. if requested 100 but family starts at 300).
-    const { fonts } = useRenderStore.getState();
-    const def = findFontDefinition(fonts, normalizedFontFamily);
-    const resolvedWeightKey =
-      def?.family && typeof def.family === 'object'
-        ? resolveClosestFontWeightKey(
-            def.family as Record<string, string>,
-            requestedWeight,
-          )
-        : requestedWeight;
-
-    fontsDebug.info('extractTextStyle: resolved font family/weight', {
-      fontFamily: normalizedFontFamily,
-      requestedWeight,
-      resolvedWeightKey,
-    });
-
-    style.fontFamily = `"${normalizedFontFamily}"`;
-    // Ensure the correct weight file is available (lazy-load per weight).
-    ensureFontWeightLoaded(normalizedFontFamily, resolvedWeightKey);
-    // Important: set fontWeight to the actual weight we loaded so CSS requests match loaded face.
-    if (resolvedWeightKey) {
-      style.fontWeight = resolvedWeightKey;
-    }
-  }
-  const normalizedFontWeight = normalizeFontWeight(fontWeight);
-  // If no fontFamily is set, keep previous behavior.
-  if (!normalizedFontFamily && normalizedFontWeight)
-    style.fontWeight = normalizedFontWeight;
-  const resolvedTextColor = parseColor(get('color') as any, {
-    projectColors: options.projectColors,
-    appConfig: resolvedAppConfig,
-  });
-  style.color = resolvedTextColor ?? fallbackColor;
-  const textAlign = get('textAlign') as any;
-  if (textAlign)
-    style.textAlign = textAlign as React.CSSProperties['textAlign'];
-
-  return { ...extractViewStyle(node, options), ...style };
-}
+export type { ExtractTextStyleOptions } from './extractTextStyle/extractTextStyle';
+export { extractTextStyle } from './extractTextStyle/extractTextStyle';

package/src/utils/extractViewStyle/extractViewStyle.ts

@@ -0,0 +1,145 @@
+import { ViewPropsGenerated } from '../../build-components/View/ViewProps.generated';
+import type { NodeData } from '../../types/Node';
+import type { AppConfig } from '../../types/PreviewConfig';
+import type { ProjectColors } from '../../types/Project';
+import { parseSize } from '../../size-matters';
+import { parseColor } from '../parseColor';
+
+export type ExtractViewStyleOptions = {
+  appConfig?: AppConfig;
+  projectColors?: ProjectColors;
+};
+
+export function extractViewStyle<T extends ViewPropsGenerated['attributes']>(
+  node: NodeData<T>,
+  options: ExtractViewStyleOptions = {},
+) {
+  const attributes = node.attributes;
+  const styleBag = (attributes as any)?.style as
+    | Record<string, unknown>
+    | undefined;
+  const get = <K extends keyof ViewPropsGenerated['attributes']>(
+    key: K,
+  ): ViewPropsGenerated['attributes'][K] | undefined => {
+    const direct = (attributes as any)?.[key];
+    if (direct !== undefined && direct !== null) return direct;
+    return styleBag?.[key as unknown as string] as any;
+  };
+
+  const scrollable = (get('scrollable') as any) ?? false;
+  const style: React.CSSProperties = {
+    display: 'flex',
+    flexDirection: 'column',
+  };
+  if (!attributes) return style;
+  const isEmptySizeValue = (value: unknown) =>
+    value === undefined ||
+    value === null ||
+    (typeof value === 'string' && value.trim() === '');
+  if (scrollable) {
+    // Important for flex children: allow the element to shrink so overflow scroll can work.
+    style.minWidth = 0;
+    style.minHeight = 0;
+    if (get('flexDirection') === 'row') {
+      style.overflowX = 'auto';
+      style.overflowY = 'hidden';
+      style.maxWidth = '100%';
+      style.maxHeight = '100%';
+    } else {
+      style.overflowY = 'auto';
+      style.overflowX = 'hidden';
+      style.maxHeight = '100%';
+      style.maxWidth = '100%';
+    }
+  }
+  const flexDirection = get('flexDirection');
+  if (flexDirection) style.flexDirection = flexDirection as any;
+  const alignItems = get('alignItems');
+  if (alignItems)
+    style.alignItems = alignItems as React.CSSProperties['alignItems'];
+  const justifyContent = get('justifyContent');
+  if (justifyContent)
+    style.justifyContent =
+      justifyContent as React.CSSProperties['justifyContent'];
+  const setParsedSize = <K extends keyof React.CSSProperties>(
+    property: K,
+    rawValue: string | number | undefined,
+  ) => {
+    if (isEmptySizeValue(rawValue)) return;
+    const parsed = parseSize(rawValue);
+    style[property] = parsed as React.CSSProperties[K];
+  };
+
+  setParsedSize('gap', get('gap') as any);
+  setParsedSize('padding', get('padding') as any);
+  setParsedSize('margin', get('margin') as any);
+
+  const paddingHorizontal = get('paddingHorizontal') as any;
+  if (!isEmptySizeValue(paddingHorizontal)) {
+    const parsed = parseSize(paddingHorizontal);
+    style.paddingLeft = parsed as React.CSSProperties['paddingLeft'];
+    style.paddingRight = parsed as React.CSSProperties['paddingRight'];
+  }
+  const paddingVertical = get('paddingVertical') as any;
+  if (!isEmptySizeValue(paddingVertical)) {
+    const parsed = parseSize(paddingVertical);
+    style.paddingTop = parsed as React.CSSProperties['paddingTop'];
+    style.paddingBottom = parsed as React.CSSProperties['paddingBottom'];
+  }
+
+  // Explicit per-side paddings should override paddingHorizontal/paddingVertical.
+  setParsedSize('paddingTop', get('paddingTop') as any);
+  setParsedSize('paddingBottom', get('paddingBottom') as any);
+  setParsedSize('paddingLeft', get('paddingLeft') as any);
+  setParsedSize('paddingRight', get('paddingRight') as any);
+
+  const marginHorizontalRaw =
+    ((attributes as Record<string, unknown>).marginHorizontal as
+      | string
+      | number
+      | undefined) ?? (styleBag?.marginHorizontal as any);
+  if (!isEmptySizeValue(marginHorizontalRaw)) {
+    const parsed = parseSize(marginHorizontalRaw);
+    style.marginLeft = parsed as React.CSSProperties['marginLeft'];
+    style.marginRight = parsed as React.CSSProperties['marginRight'];
+  }
+
+  const marginVertical = get('marginVertical') as any;
+  if (!isEmptySizeValue(marginVertical)) {
+    const parsed = parseSize(marginVertical);
+    style.marginTop = parsed as React.CSSProperties['marginTop'];
+    style.marginBottom = parsed as React.CSSProperties['marginBottom'];
+  }
+
+  setParsedSize('marginTop', get('marginTop') as any);
+  setParsedSize('marginBottom', get('marginBottom') as any);
+  setParsedSize('marginLeft', get('marginLeft') as any);
+  setParsedSize('marginRight', get('marginRight') as any);
+  const backgroundColor = get('backgroundColor') as any;
+  if (backgroundColor) {
+    style.backgroundColor =
+      parseColor(backgroundColor, {
+        projectColors: options.projectColors,
+        appConfig: options.appConfig,
+      }) ?? backgroundColor;
+  }
+  setParsedSize('borderRadius', get('borderRadius') as any);
+  setParsedSize('width', get('width') as any);
+  setParsedSize('minWidth', get('minWidth') as any);
+  setParsedSize('maxWidth', get('maxWidth') as any);
+  setParsedSize('height', get('height') as any);
+  setParsedSize('minHeight', get('minHeight') as any);
+  setParsedSize('maxHeight', get('maxHeight') as any);
+  const flex = get('flex') as any;
+  if (flex !== undefined) style.flex = flex as React.CSSProperties['flex'];
+  const position = get('position') as any;
+  if (position) style.position = position as React.CSSProperties['position'];
+  setParsedSize('top', get('top') as any);
+  setParsedSize('bottom', get('bottom') as any);
+  setParsedSize('left', get('left') as any);
+  setParsedSize('right', get('right') as any);
+  const zIndex = get('zIndex') as any;
+  if (zIndex !== undefined)
+    style.zIndex = zIndex as React.CSSProperties['zIndex'];
+  return style;
+}