flowboard-react 0.6.8 → 0.6.12

package/src/components/FlowboardRenderer.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import {
   Animated,
   KeyboardAvoidingView,
@@ -42,6 +42,26 @@ import {
 } from '../utils/flowboardUtils';
 import { resolveFontAwesomeIcon, FontAwesome6 } from '../core/fontAwesome';
 import { useSliderRegistry } from './widgets/sliderRegistry';
+import {
+  isOverlayStack,
+  isPositionedChild,
+  resolveAlignmentToCss,
+  resolveClipBehavior,
+  resolveFitBehavior,
+  resolveOverlayAlignmentValue,
+  resolvePositionedStyle,
+} from './layout/stackOverlayModel';
+import {
+  ensureGoogleFontLoaded as ensureWebGoogleFontLoaded,
+  resolveFontFamily,
+} from '../fonts/googleFontLoader';
+import {
+  ensureFontLoaded as ensureNativeFontLoaded,
+  isFontLoaded,
+  resolveAppliedFontFamily,
+  subscribeFontLoad,
+} from '../fonts/fontLoader';
+import { resolveFontSpec } from '../fonts/fontResolver';
 
 const styles = StyleSheet.create({
   root: { flex: 1, backgroundColor: '#ffffff' },
@@ -91,6 +111,175 @@ function getAxisBoundsForPageScroll(pageScroll: PageScrollAxis): AxisBounds {
   return { widthBounded: true, heightBounded: true };
 }
 
+const LEGACY_SLIDE_DROP_KEYS = new Set(['badge']);
+
+function isDevelopmentMode(): boolean {
+  return process.env.NODE_ENV !== 'production';
+}
+
+function warnLegacySlideMigration(
+  contextPath: string,
+  componentId: string | undefined,
+  droppedKeys: string[]
+): void {
+  if (!isDevelopmentMode() || droppedKeys.length === 0) return;
+  const idSuffix = componentId ? ` (id: ${componentId})` : '';
+  console.warn(
+    `[slider-migration] Migrated legacy slide to stack at "${contextPath}"${idSuffix}. Dropped unsupported keys: ${droppedKeys.join(
+      ', '
+    )}`
+  );
+}
+
+function warnLegacySliderChildWrap(
+  contextPath: string,
+  childType: string | undefined
+): void {
+  if (!isDevelopmentMode()) return;
+  console.warn(
+    `[slider-migration] Wrapped non-stack slider child at "${contextPath}" as a stack page${
+      childType ? ` (type: ${childType})` : ''
+    }.`
+  );
+}
+
+function normalizeLegacySlidePropsToStackProps(
+  input: Record<string, any> | undefined,
+  contextPath: string,
+  componentId?: string
+): Record<string, any> {
+  const props =
+    input && typeof input === 'object'
+      ? { ...input }
+      : ({} as Record<string, any>);
+  const droppedKeys: string[] = [];
+
+  if (props.fill && typeof props.fill === 'object') {
+    const normalizedFill = { ...(props.fill as Record<string, any>) };
+    const fillType = String(normalizedFill.type ?? '').toLowerCase();
+    if (fillType === 'color') {
+      normalizedFill.type = 'solid';
+    }
+    props.fill = normalizedFill;
+  }
+
+  for (const key of LEGACY_SLIDE_DROP_KEYS) {
+    if (key in props) {
+      droppedKeys.push(key);
+      delete props[key];
+    }
+  }
+
+  warnLegacySlideMigration(contextPath, componentId, droppedKeys);
+  return props;
+}
+
+function createStackPageWrapper(
+  child: Record<string, any> | null,
+  pageIndex: number
+): Record<string, any> {
+  return {
+    id: child?.id ? `${String(child.id)}-page` : `legacy-page-${pageIndex + 1}`,
+    type: 'stack',
+    properties: {
+      axis: 'vertical',
+      alignment: 'start',
+      distribution: 'start',
+      childSpacing: 0,
+      size: { width: 'fill', height: 'fit' },
+      layout: {
+        margin: { top: 0, right: 0, bottom: 0, left: 0 },
+      },
+      appearance: {
+        shape: 'rectangle',
+        cornerRadius: 0,
+      },
+    },
+    children: child ? [child] : [],
+  };
+}
+
+function migrateLegacySlideNodes(
+  input: unknown,
+  contextPath = 'screen'
+): unknown {
+  if (Array.isArray(input)) {
+    return input.map((item, index) =>
+      migrateLegacySlideNodes(item, `${contextPath}[${index}]`)
+    );
+  }
+  if (!input || typeof input !== 'object') return input;
+
+  const node = { ...(input as Record<string, any>) };
+  const rawType = String(node.type ?? '');
+
+  if (Array.isArray(node.children)) {
+    node.children = node.children.map((child, index) =>
+      migrateLegacySlideNodes(child, `${contextPath}.children[${index}]`)
+    );
+  }
+  if (node.child && typeof node.child === 'object') {
+    node.child = migrateLegacySlideNodes(node.child, `${contextPath}.child`);
+  }
+  if (Array.isArray(node.options)) {
+    node.options = node.options.map((option, index) => {
+      if (!option || typeof option !== 'object') return option;
+      const optionNode = { ...(option as Record<string, any>) };
+      if (optionNode.child && typeof optionNode.child === 'object') {
+        optionNode.child = migrateLegacySlideNodes(
+          optionNode.child,
+          `${contextPath}.options[${index}].child`
+        );
+      }
+      return optionNode;
+    });
+  }
+
+  if (rawType === 'slide') {
+    node.type = 'stack';
+    node.properties = normalizeLegacySlidePropsToStackProps(
+      (node.properties ?? {}) as Record<string, any>,
+      contextPath,
+      node.id ? String(node.id) : undefined
+    );
+  }
+
+  if (String(node.type ?? '') === 'slider') {
+    const children = Array.isArray(node.children) ? node.children : [];
+    const normalizedPages = children.map((child, index) => {
+      if (!child || typeof child !== 'object') {
+        warnLegacySliderChildWrap(
+          `${contextPath}.children[${index}]`,
+          undefined
+        );
+        return createStackPageWrapper(null, index);
+      }
+      const pageNode = child as Record<string, any>;
+      const childType = String(pageNode.type ?? '');
+      if (childType === 'stack') return pageNode;
+      warnLegacySliderChildWrap(`${contextPath}.children[${index}]`, childType);
+      return createStackPageWrapper(pageNode, index);
+    });
+    node.children =
+      normalizedPages.length > 0
+        ? normalizedPages
+        : [createStackPageWrapper(null, 0)];
+  }
+
+  return node;
+}
+
+function useGoogleFontLoadSignal(): void {
+  const [, setVersion] = useState(0);
+  useEffect(
+    () =>
+      subscribeFontLoad(() => {
+        setVersion((version) => version + 1);
+      }),
+    []
+  );
+}
+
 export default function FlowboardRenderer(props: FlowboardRendererProps) {
   const {
     screenData,
@@ -101,27 +290,37 @@ export default function FlowboardRenderer(props: FlowboardRendererProps) {
     currentIndex = 0,
     totalScreens = 1,
   } = props;
+  useGoogleFontLoadSignal();
 
-  const childrenData: any[] = Array.isArray(screenData.children)
-    ? screenData.children
+  const migratedScreenData = useMemo(
+    () =>
+      (migrateLegacySlideNodes(screenData, 'screen') as Record<string, any>) ??
+      {},
+    [screenData]
+  );
+
+  const childrenData: any[] = Array.isArray(migratedScreenData.children)
+    ? migratedScreenData.children
     : [];
 
-  const backgroundData = screenData.background;
-  const bgColorCode = screenData.backgroundColor;
+  const backgroundData = migratedScreenData.background;
+  const bgColorCode = migratedScreenData.backgroundColor;
 
-  const showProgress = screenData.showProgress === true;
-  const progressColor = parseColor(screenData.progressColor ?? '0xFF000000');
-  const progressThickness = Number(screenData.progressThickness ?? 4);
-  const progressRadius = Number(screenData.progressRadius ?? 0);
-  const progressStyle = screenData.progressStyle ?? 'linear';
-  const pageScroll = resolvePageScrollAxis(screenData);
+  const showProgress = migratedScreenData.showProgress === true;
+  const progressColor = parseColor(
+    migratedScreenData.progressColor ?? '0xFF000000'
+  );
+  const progressThickness = Number(migratedScreenData.progressThickness ?? 4);
+  const progressRadius = Number(migratedScreenData.progressRadius ?? 0);
+  const progressStyle = migratedScreenData.progressStyle ?? 'linear';
+  const pageScroll = resolvePageScrollAxis(migratedScreenData);
   const pageAxisBounds = getAxisBoundsForPageScroll(pageScroll);
   const scrollable = pageScroll !== 'none';
-  const safeArea = screenData.safeArea !== false;
+  const safeArea = migratedScreenData.safeArea !== false;
   const safeAreaInsets = useSafeAreaInsets();
   const rootAxis: 'vertical' = 'vertical';
 
-  const padding = parseInsets(screenData.padding);
+  const padding = parseInsets(migratedScreenData.padding);
   const contentPaddingStyle = insetsToStyle(padding);
   const progressPaddingStyle = {
     paddingTop: padding.top,
@@ -129,7 +328,7 @@ export default function FlowboardRenderer(props: FlowboardRendererProps) {
     paddingLeft: padding.left,
   };
   const rootCrossAxisAlignment =
-    screenData.crossAxisAlignment ?? screenData.crossAxis;
+    migratedScreenData.crossAxisAlignment ?? migratedScreenData.crossAxis;
   const safeAreaPaddingStyle = safeArea
     ? {
         paddingTop: safeAreaInsets.top,
@@ -162,6 +361,7 @@ export default function FlowboardRenderer(props: FlowboardRendererProps) {
             Platform.OS === 'ios' ? 'interactive' : 'on-drag'
           }
           contentContainerStyle={{
+            flexGrow: 1,
             ...contentPaddingStyle,
             paddingTop: showProgress ? 0 : padding.top,
           }}
@@ -170,9 +370,11 @@ export default function FlowboardRenderer(props: FlowboardRendererProps) {
             style={{
               flexGrow: 1,
               flexDirection: 'column',
-              justifyContent: parseFlexAlignment(screenData.mainAxisAlignment),
+              justifyContent: parseFlexAlignment(
+                migratedScreenData.mainAxisAlignment
+              ),
               alignItems: parseRootCrossAlignment(rootCrossAxisAlignment),
-              minHeight: 0,
+              minHeight: '100%',
               minWidth: 0,
             }}
           >
@@ -185,7 +387,7 @@ export default function FlowboardRenderer(props: FlowboardRendererProps) {
                 parentFlexAxis: rootAxis,
                 parentMainAxisBounded: pageAxisBounds.heightBounded,
                 pageAxisBounds,
-                screenData,
+                screenData: migratedScreenData,
                 enableFontAwesomeIcons,
                 key: `child-${index}`,
               })
@@ -198,7 +400,9 @@ export default function FlowboardRenderer(props: FlowboardRendererProps) {
             flex: 1,
             ...contentPaddingStyle,
             paddingTop: showProgress ? 0 : padding.top,
-            justifyContent: parseFlexAlignment(screenData.mainAxisAlignment),
+            justifyContent: parseFlexAlignment(
+              migratedScreenData.mainAxisAlignment
+            ),
             alignItems: parseRootCrossAlignment(rootCrossAxisAlignment),
           }}
         >
@@ -211,7 +415,7 @@ export default function FlowboardRenderer(props: FlowboardRendererProps) {
               parentFlexAxis: rootAxis,
               parentMainAxisBounded: true,
               pageAxisBounds,
-              screenData,
+              screenData: migratedScreenData,
               enableFontAwesomeIcons,
               key: `child-${index}`,
             })
@@ -487,10 +691,7 @@ function normalizeStackAxis(type: string, props: Record<string, any>) {
   if (type === 'layout') {
     return props.direction === 'horizontal' ? 'horizontal' : 'vertical';
   }
-  if (
-    type === 'stack' &&
-    (props.fit !== undefined || isLegacyOverlayAlignment(props.alignment))
-  ) {
+  if (type === 'stack' && isLegacyOverlayAlignment(props.alignment)) {
     return 'overlay';
   }
   return 'vertical';
@@ -548,7 +749,7 @@ function normalizeOverlayAlignment(value: unknown) {
     case 'bottomRight':
       return 'bottomEnd';
     default:
-      return 'center';
+      return 'topStart';
   }
 }
 
@@ -589,6 +790,67 @@ function normalizeStackSizeMode(
   return undefined;
 }
 
+export function resolveFillSizeStyle(
+  size: Record<string, any> | null | undefined,
+  options?: { allowWidthFill?: boolean; allowHeightFill?: boolean }
+): ViewStyle {
+  const allowWidthFill = options?.allowWidthFill !== false;
+  const allowHeightFill = options?.allowHeightFill !== false;
+  const fillWidth =
+    allowWidthFill && normalizeStackSizeMode(size?.width) === 'fill';
+  const fillHeight =
+    allowHeightFill && normalizeStackSizeMode(size?.height) === 'fill';
+  const style: Record<string, any> = {};
+
+  if (fillWidth) {
+    style.width = '100%';
+    style.alignSelf = 'stretch';
+    style.minWidth = 0;
+  }
+  if (fillHeight) {
+    style.height = '100%';
+    style.flexGrow = 1;
+    style.flexShrink = 1;
+    style.flexBasis = 'auto';
+    style.minHeight = 0;
+  }
+  if (fillWidth && fillHeight) {
+    style.flexGrow = 1;
+    style.flexShrink = 1;
+    style.flexBasis = 'auto';
+  }
+
+  return style;
+}
+
+function resolveOverlayContainerFitStyle(
+  props: Record<string, any>,
+  axisBounds: AxisBounds
+): ViewStyle {
+  if (resolveFitBehavior(props.fit) !== 'expand') return {};
+
+  const widthMode = normalizeStackSizeMode(props.size?.width);
+  const heightMode = normalizeStackSizeMode(props.size?.height);
+  const style: Record<string, any> = {
+    minWidth: 0,
+    minHeight: 0,
+  };
+
+  if (axisBounds.widthBounded && widthMode !== 'fixed') {
+    style.width = '100%';
+    style.alignSelf = 'stretch';
+  }
+
+  if (axisBounds.heightBounded && heightMode !== 'fixed') {
+    style.height = '100%';
+    style.flexGrow = 1;
+    style.flexShrink = 1;
+    style.flexBasis = 'auto';
+  }
+
+  return style;
+}
+
 function wantsFillWidth(props: Record<string, any>) {
   return (
     normalizeStackSizeMode(props.size?.width) === 'fill' ||
@@ -636,18 +898,36 @@ function normalizeStackFill(props: Record<string, any>) {
   if (props.fill && typeof props.fill === 'object') {
     const next = { ...props.fill };
     if (!next.type && next.color) next.type = 'solid';
+    if (String(next.type ?? '').toLowerCase() === 'color') {
+      next.type = 'solid';
+    }
+    const fillType = String(next.type ?? '').toLowerCase();
+    if (
+      (fillType === '' || fillType === 'solid') &&
+      (typeof next.color !== 'string' || next.color.trim().length === 0)
+    ) {
+      next.type = 'solid';
+      next.color = '0x00FFFFFF';
+    }
     return next;
   }
   if (props.background && typeof props.background === 'object') {
     if (props.background.type === 'color') {
-      return { type: 'solid', color: props.background.color };
+      return {
+        type: 'solid',
+        color:
+          typeof props.background.color === 'string' &&
+          props.background.color.trim().length > 0
+            ? props.background.color
+            : '0x00FFFFFF',
+      };
     }
     return { ...props.background };
   }
   if (props.backgroundColor) {
     return { type: 'solid', color: props.backgroundColor };
   }
-  return undefined;
+  return { type: 'solid', color: '0x00FFFFFF' };
 }
 
 function normalizeStackBorder(props: Record<string, any>) {
@@ -746,9 +1026,28 @@ function mergeStackProps(
     },
   };
 
-  if (axis === 'overlay') {
+  if (
+    axis === 'overlay' ||
+    childProps.overlayAlignment !== undefined ||
+    parentProps.overlayAlignment !== undefined ||
+    childProps.mode === 'overlay' ||
+    parentProps.mode === 'overlay'
+  ) {
     mergedProps.overlayAlignment =
-      childProps.overlayAlignment ?? parentProps.overlayAlignment ?? 'center';
+      childProps.overlayAlignment ?? parentProps.overlayAlignment ?? 'topStart';
+  }
+  if (childProps.mode !== undefined || parentProps.mode !== undefined) {
+    mergedProps.mode = childProps.mode ?? parentProps.mode;
+  }
+  if (childProps.fit !== undefined || parentProps.fit !== undefined) {
+    mergedProps.fit = childProps.fit ?? parentProps.fit;
+  }
+  if (
+    childProps.clipBehavior !== undefined ||
+    parentProps.clipBehavior !== undefined
+  ) {
+    mergedProps.clipBehavior =
+      childProps.clipBehavior ?? parentProps.clipBehavior;
   }
 
   if (parentProps.fill || childProps.fill) {
@@ -811,12 +1110,34 @@ function normalizeStackLikeNode(
     },
   };
 
-  if (axis === 'overlay') {
-    normalizedProps.overlayAlignment = normalizeOverlayAlignment(
-      props.overlayAlignment ?? props.alignment
-    );
+  if (props.mode === 'overlay' || props.mode === 'linear') {
+    normalizedProps.mode = props.mode;
+  }
+
+  if (
+    props.fit === 'expand' ||
+    props.fit === 'loose' ||
+    String(props.fit).toLowerCase() === 'expand' ||
+    String(props.fit).toLowerCase() === 'loose'
+  ) {
+    normalizedProps.fit =
+      String(props.fit).toLowerCase() === 'expand' ? 'expand' : 'loose';
+  }
+
+  if (
+    String(props.clipBehavior ?? '').toLowerCase() === 'none' ||
+    String(props.clipBehavior ?? '').toLowerCase() === 'hardedge'
+  ) {
+    normalizedProps.clipBehavior =
+      String(props.clipBehavior).toLowerCase() === 'hardedge'
+        ? 'hardEdge'
+        : 'none';
   }
 
+  normalizedProps.overlayAlignment = normalizeOverlayAlignment(
+    props.overlayAlignment ?? props.alignment
+  );
+
   const fill = normalizeStackFill(props);
   if (fill) normalizedProps.fill = fill;
 
@@ -862,32 +1183,6 @@ function normalizeStackLikeNode(
   };
 }
 
-function parseOverlayGridAlignment(
-  value?: string
-): Pick<ViewStyle, 'justifyContent' | 'alignItems'> {
-  switch (normalizeOverlayAlignment(value)) {
-    case 'topStart':
-      return { justifyContent: 'flex-start', alignItems: 'flex-start' };
-    case 'top':
-      return { justifyContent: 'flex-start', alignItems: 'center' };
-    case 'topEnd':
-      return { justifyContent: 'flex-start', alignItems: 'flex-end' };
-    case 'start':
-      return { justifyContent: 'center', alignItems: 'flex-start' };
-    case 'end':
-      return { justifyContent: 'center', alignItems: 'flex-end' };
-    case 'bottomStart':
-      return { justifyContent: 'flex-end', alignItems: 'flex-start' };
-    case 'bottom':
-      return { justifyContent: 'flex-end', alignItems: 'center' };
-    case 'bottomEnd':
-      return { justifyContent: 'flex-end', alignItems: 'flex-end' };
-    case 'center':
-    default:
-      return { justifyContent: 'center', alignItems: 'center' };
-  }
-}
-
 function resolveStackDimension(
   props: Record<string, any>,
   axis: 'vertical' | 'horizontal' | 'overlay',
@@ -910,6 +1205,35 @@ function resolveStackDimension(
   return undefined;
 }
 
+type TextWidthMode = 'fit' | 'fill' | 'fixed';
+
+function resolveTextWidthMode(props: Record<string, any>): TextWidthMode {
+  const raw = String(props.size?.width ?? '')
+    .trim()
+    .toLowerCase();
+  if (
+    raw === 'fill' ||
+    raw === 'infinity' ||
+    raw === 'infinite' ||
+    raw === 'double.infinity' ||
+    raw === '+infinity'
+  ) {
+    return 'fill';
+  }
+  if (raw === 'fit') return 'fit';
+  if (raw === 'fixed') return 'fixed';
+  if (isFillDimensionValue(props.width)) return 'fill';
+  return props.width !== undefined ? 'fixed' : 'fit';
+}
+
+function resolveTextFixedWidth(
+  props: Record<string, any>
+): number | string | undefined {
+  const explicit = normalizeDimension(parseLayoutDimension(props.width, true));
+  if (explicit !== undefined) return explicit;
+  return normalizeDimension(parseLayoutDimension(props.size?.widthPx, true));
+}
+
 function buildWidget(
   json: Record<string, any>,
   params: {
@@ -1059,6 +1383,13 @@ function buildWidget(
       const gradient = parseGradient(props.foreground);
       const textStyle = getTextStyle(props, 'color');
       const align = parseTextAlign(props.textAlign);
+      const widthMode = resolveTextWidthMode(props);
+      const fixedWidth = resolveTextFixedWidth(props);
+      const widthBounded = params.pageAxisBounds?.widthBounded ?? true;
+      // Shared width-mode contract across React/Flutter:
+      // fit = intrinsic width (no flex, no 100% stretch)
+      // fill = expand within bounded parent constraints
+      // fixed = explicit width value
       if (gradient) {
         node = (
           <GradientText
@@ -1072,6 +1403,31 @@ function buildWidget(
           <Text style={[textStyle, { textAlign: align }]}>{resolvedText}</Text>
         );
       }
+      if (widthMode === 'fill') {
+        if (params.parentFlexAxis === 'horizontal') {
+          if (params.parentMainAxisBounded ?? true) {
+            node = (
+              <View style={{ flex: 1, minWidth: 0, alignSelf: 'stretch' }}>
+                {node}
+              </View>
+            );
+          } else {
+            node = <View style={{ minWidth: 0 }}>{node}</View>;
+          }
+        } else if (widthBounded) {
+          node = (
+            <View style={{ width: '100%', minWidth: 0, alignSelf: 'stretch' }}>
+              {node}
+            </View>
+          );
+        } else {
+          node = <View style={{ minWidth: 0 }}>{node}</View>;
+        }
+      } else if (widthMode === 'fixed') {
+        node = <View style={{ width: fixedWidth, minWidth: 0 }}>{node}</View>;
+      } else {
+        node = <View style={{ minWidth: 0 }}>{node}</View>;
+      }
       break;
     }
     case 'rich_text': {
@@ -1505,14 +1861,14 @@ function buildWidget(
         props.direction === 'vertical' ? 'vertical' : 'horizontal';
       const interaction = props.interaction ?? {};
       const pageControl = props.pageControl ?? {};
-      const sliderChildren = (childrenJson ?? []).filter(Boolean);
+      const sliderPages = (childrenJson ?? []).filter(
+        (child) => child && String(child.type ?? '') === 'stack'
+      );
       node = (
         <SliderWidget
-          id={json._internalId}
+          id={json._internalId ?? json.id}
           sliderProps={props}
-          slidePropsList={sliderChildren.map(
-            (child) => child?.properties ?? {}
-          )}
+          pagePropsList={sliderPages.map((child) => child?.properties ?? {})}
           direction={direction}
           pageAlignment={
             props.pageAlignment === 'start' || props.pageAlignment === 'end'
@@ -1531,28 +1887,19 @@ function buildWidget(
             pageControl.position === 'top' ? 'top' : 'bottom'
           }
         >
-          {sliderChildren.map((child, index) => (
+          {sliderPages.map((child, index) => (
             <View key={`slider-${index}`}>
-              {buildWidget(child, { ...params })}
+              {buildWidget(child, {
+                ...params,
+                // Slider pages always render inside a bounded pager viewport.
+                pageAxisBounds: { widthBounded: true, heightBounded: true },
+              })}
             </View>
           ))}
         </SliderWidget>
       );
       break;
     }
-    case 'slide': {
-      node = buildWidget(
-        {
-          ...json,
-          type: 'stack',
-          properties: {
-            ...(props || {}),
-          },
-        },
-        { ...params }
-      );
-      break;
-    }
     case 'pageview_indicator': {
       node = (
         <PageViewIndicator
@@ -1597,19 +1944,22 @@ function buildWidget(
       break;
     }
     case 'stack': {
-      const axis =
-        props.axis === 'horizontal' || props.axis === 'overlay'
-          ? props.axis
-          : 'vertical';
-      const isOverlay = axis === 'overlay';
+      const axis = props.axis === 'horizontal' ? 'horizontal' : 'vertical';
+      const isOverlay = isOverlayStack(childrenJson, props);
       const spacing = Number(props.childSpacing ?? 0);
       const applySpacing = !STACK_SPACE_DISTRIBUTIONS.has(
         String(props.distribution ?? 'start')
       );
-      const width = resolveStackDimension(props, axis, 'width', pageAxisBounds);
+      const resolvedAxis = isOverlay ? 'overlay' : axis;
+      const width = resolveStackDimension(
+        props,
+        resolvedAxis,
+        'width',
+        pageAxisBounds
+      );
       const height = resolveStackDimension(
         props,
-        axis,
+        resolvedAxis,
         'height',
         pageAxisBounds
       );
@@ -1661,14 +2011,27 @@ function buildWidget(
           : undefined;
       const stackColor =
         fill?.type === 'solid' || (!fill?.type && fill?.color)
-          ? parseColor(fill?.color ?? '#FFFFFFFF')
+          ? parseColor(fill?.color ?? '0x00FFFFFF')
           : parseColor(props.backgroundColor ?? '#00000000');
 
       const baseStackStyle: any = {
         width,
         height,
+        ...resolveFillSizeStyle(props.size, {
+          allowWidthFill: pageAxisBounds.widthBounded,
+          allowHeightFill: pageAxisBounds.heightBounded,
+        }),
+        ...(isOverlay
+          ? resolveOverlayContainerFitStyle(props, pageAxisBounds)
+          : {}),
         borderRadius: borderRadius > 0 ? borderRadius : undefined,
-        overflow: borderRadius > 0 ? 'hidden' : undefined,
+        overflow: isOverlay
+          ? resolveClipBehavior(props.clipBehavior) === 'hardEdge'
+            ? 'hidden'
+            : 'visible'
+          : borderRadius > 0
+          ? 'hidden'
+          : undefined,
         borderWidth: borderColor ? borderWidth : undefined,
         borderColor: borderColor ?? undefined,
         ...shadowStyle,
@@ -1688,12 +2051,38 @@ function buildWidget(
           }}
         >
           {(childrenJson ?? []).map((child, index) => {
-            const alignment = parseOverlayGridAlignment(
-              props.overlayAlignment ?? props.alignment
+            if (isPositionedChild(child)) {
+              if (String(child?.type ?? '') === 'positioned') {
+                return (
+                  <React.Fragment key={`stack-overlay-positioned-${index}`}>
+                    {buildWidget(child, {
+                      ...params,
+                      pageAxisBounds,
+                    })}
+                  </React.Fragment>
+                );
+              }
+              return (
+                <View
+                  key={`stack-overlay-positioned-${index}`}
+                  style={resolvePositionedStyle(
+                    (child?.properties ?? {}) as Record<string, any>
+                  )}
+                >
+                  {buildWidget(child, {
+                    ...params,
+                    pageAxisBounds,
+                  })}
+                </View>
+              );
+            }
+
+            const alignment = resolveAlignmentToCss(
+              resolveOverlayAlignmentValue(props)
             );
             return (
               <View
-                key={`stack-overlay-${index}`}
+                key={`stack-overlay-non-positioned-${index}`}
                 style={{
                   position: 'absolute',
                   top: 0,
@@ -1772,24 +2161,8 @@ function buildWidget(
       break;
     }
     case 'positioned': {
-      const left = parseLayoutDimension(props.left);
-      const top = parseLayoutDimension(props.top);
-      const right = parseLayoutDimension(props.right);
-      const bottom = parseLayoutDimension(props.bottom);
-      const width = parseLayoutDimension(props.width);
-      const height = parseLayoutDimension(props.height);
       node = (
-        <View
-          style={{
-            position: 'absolute',
-            left,
-            top,
-            right,
-            bottom,
-            width,
-            height,
-          }}
-        >
+        <View style={resolvePositionedStyle(props)}>
           {childJson ? buildWidget(childJson, { ...params }) : null}
         </View>
       );
@@ -1856,6 +2229,10 @@ function buildWidget(
     let shouldExpand = false;
     const parentAxis = params.parentFlexAxis ?? 'vertical';
     const parentMainAxisBounded = params.parentMainAxisBounded ?? true;
+    const sliderWantsMainAxisFill =
+      type === 'slider' &&
+      ((parentAxis === 'vertical' && wantsFillHeight(props)) ||
+        (parentAxis === 'horizontal' && wantsFillWidth(props)));
 
     if (parentMainAxisBounded) {
       if (type === 'stack') {
@@ -1889,9 +2266,25 @@ function buildWidget(
         }
       }
     }
+    if (sliderWantsMainAxisFill) {
+      shouldExpand = true;
+    }
 
     if (shouldExpand) {
-      node = <View style={{ flex: 1, minHeight: 0, minWidth: 0 }}>{node}</View>;
+      // Keep cross-axis stretching on the outer expansion wrapper as well.
+      // Without this, a centered parent cross-axis can collapse effective fill width/height.
+      node = (
+        <View
+          style={{
+            flex: 1,
+            minHeight: 0,
+            minWidth: 0,
+            alignSelf: shouldStretchCrossAxis ? 'stretch' : undefined,
+          }}
+        >
+          {node}
+        </View>
+      );
     }
   }
 
@@ -1926,9 +2319,38 @@ function getTextStyle(
   colorKey: string,
   defaultColor?: string
 ): TextStyle {
-  const fontFamily = props.fontFamily;
+  const requestedFontFamily = resolveFontFamily(props.fontFamily);
   const fontSize = Number(props.fontSize ?? 14);
-  const fontWeight = parseFontWeight(props.fontWeight);
+  const parsedFontWeight = parseFontWeight(props.fontWeight);
+  const requestedWeight = Number(parsedFontWeight);
+  const numericRequestedWeight = Number.isFinite(requestedWeight)
+    ? requestedWeight
+    : undefined;
+  let fontFamily = requestedFontFamily;
+  let fontWeight = parsedFontWeight;
+
+  if (Platform.OS === 'web' && requestedFontFamily) {
+    const resolvedSpec = resolveFontSpec({
+      family: requestedFontFamily,
+      requestedWeight: numericRequestedWeight,
+    });
+    fontFamily = resolvedSpec.resolvedFamily;
+    fontWeight =
+      resolvedSpec.resolvedWeight !== undefined
+        ? String(resolvedSpec.resolvedWeight)
+        : parsedFontWeight;
+    ensureWebGoogleFontLoaded(resolvedSpec.resolvedFamily, [fontWeight]);
+  } else if (requestedFontFamily) {
+    const resolvedSpec = resolveFontSpec({
+      family: requestedFontFamily,
+      requestedWeight: numericRequestedWeight,
+    });
+    void ensureNativeFontLoaded(resolvedSpec).catch(() => undefined);
+    fontWeight = undefined;
+    fontFamily = isFontLoaded(resolvedSpec)
+      ? resolveAppliedFontFamily(resolvedSpec)
+      : resolvedSpec.resolvedFamily;
+  }
   const fontStyle = props.fontStyle === 'italic' ? 'italic' : 'normal';
   const color = parseColor(props[colorKey] ?? defaultColor ?? '0xFF000000');
   const letterSpacing =
@@ -1964,9 +2386,13 @@ function parseGradient(value: any):
   if (colors.length === 0) return undefined;
   const start = alignmentToGradient(value.begin ?? 'topLeft');
   const end = alignmentToGradient(value.end ?? 'bottomRight');
-  const stops = Array.isArray(value.stops)
+  const parsedStops = Array.isArray(value.stops)
     ? value.stops.map((s: number) => Number(s))
     : undefined;
+  const stops =
+    parsedStops && parsedStops.length === colors.length
+      ? parsedStops
+      : undefined;
   return { colors, start, end, stops };
 }
 
@@ -2419,10 +2845,26 @@ function GradientText({
   gradient: { colors: string[]; start: any; end: any; stops?: number[] };
   style?: any;
 }) {
+  if (Platform.OS === 'web') {
+    return (
+      <Text style={[style, getWebGradientTextStyle(gradient)]}>{text}</Text>
+    );
+  }
+
   return (
     <MaskedView
       maskElement={
-        <Text style={[style, { backgroundColor: 'transparent' }]}>{text}</Text>
+        <Text
+          style={[
+            style,
+            {
+              color: '#FFFFFF',
+              backgroundColor: 'transparent',
+            },
+          ]}
+        >
+          {text}
+        </Text>
       }
     >
       <LinearGradient
@@ -2431,12 +2873,48 @@ function GradientText({
         end={gradient.end}
         locations={gradient.stops}
       >
-        <Text style={[style, { opacity: 0 }]}>{text}</Text>
+        <Text style={[style, { color: '#FFFFFF', opacity: 0 }]}>{text}</Text>
       </LinearGradient>
     </MaskedView>
   );
 }
 
+function getWebGradientTextStyle(gradient: {
+  colors: string[];
+  start: { x: number; y: number };
+  end: { x: number; y: number };
+  stops?: number[];
+}) {
+  const angle = gradientToCssAngle(gradient.start, gradient.end);
+  const normalizedStops =
+    gradient.stops && gradient.stops.length === gradient.colors.length
+      ? gradient.stops.map((stop) => `${clamp01(stop) * 100}%`)
+      : undefined;
+  const gradientStops = gradient.colors.map((color, index) => {
+    if (!normalizedStops) return color;
+    return `${color} ${normalizedStops[index]}`;
+  });
+  return {
+    backgroundImage: `linear-gradient(${angle}deg, ${gradientStops.join(
+      ', '
+    )})`,
+    backgroundClip: 'text',
+    WebkitBackgroundClip: 'text',
+    color: 'transparent',
+  };
+}
+
+function gradientToCssAngle(
+  start: { x: number; y: number },
+  end: { x: number; y: number }
+) {
+  const dx = end.x - start.x;
+  const dy = end.y - start.y;
+  const radians = Math.atan2(dy, dx);
+  const degrees = (radians * 180) / Math.PI;
+  return (degrees + 90 + 360) % 360;
+}
+
 type TextInputStrokeStyle = 'solid' | 'dashed' | 'dotted';
 
 type NormalizedTextInputStroke = {
@@ -3590,11 +4068,20 @@ function FakeProgressBar({
   }
 
   return (
-    <View>
+    <View
+      style={{
+        width: '100%',
+        alignSelf: 'stretch',
+        minWidth: 0,
+        flexDirection: 'column',
+      }}
+    >
       <View
         style={{
           height: thickness,
           width: '100%',
+          alignSelf: 'stretch',
+          minWidth: 0,
           borderRadius,
           backgroundColor,
           overflow: 'hidden',
@@ -3613,7 +4100,12 @@ function FakeProgressBar({
         />
       </View>
       {showProgressText ? (
-        <Text style={[progressTextStyle, { marginTop: 8 }]}>
+        <Text
+          style={[
+            progressTextStyle,
+            { marginTop: 8, width: '100%', alignSelf: 'stretch' },
+          ]}
+        >
           {progressText}
         </Text>
       ) : null}
@@ -3650,16 +4142,36 @@ function resolveSliderSizeMode(
   fallback: SliderSizeMode
 ): SliderSizeMode {
   const raw = String(sliderProps?.size?.[key] ?? '').toLowerCase();
-  if (raw === 'fill' || raw === 'fit' || raw === 'fixed') return raw;
+  if (
+    raw === 'fill' ||
+    raw === 'infinity' ||
+    raw === 'infinite' ||
+    raw === 'double.infinity' ||
+    raw === '+infinity'
+  ) {
+    return 'fill';
+  }
+  if (raw === 'fit' || raw === 'fixed') return raw;
+  if (isFillDimensionValue(sliderProps?.[key])) return 'fill';
   return sliderProps?.[key] !== undefined ? 'fixed' : fallback;
 }
 
-function resolveSlideSizeMode(
-  slideProps: Record<string, any>,
+function resolvePageSizeMode(
+  pageProps: Record<string, any>,
   key: 'width' | 'height'
 ): SliderSizeMode {
-  const raw = String(slideProps?.size?.[key] ?? '').toLowerCase();
-  if (raw === 'fill' || raw === 'fit' || raw === 'fixed') return raw;
+  const raw = String(pageProps?.size?.[key] ?? '').toLowerCase();
+  if (
+    raw === 'fill' ||
+    raw === 'infinity' ||
+    raw === 'infinite' ||
+    raw === 'double.infinity' ||
+    raw === '+infinity'
+  ) {
+    return 'fill';
+  }
+  if (raw === 'fit' || raw === 'fixed') return raw;
+  if (isFillDimensionValue(pageProps?.[key])) return 'fill';
   return key === 'width' ? 'fill' : 'fit';
 }
 
@@ -3678,24 +4190,31 @@ export function resolveSliderContainerSize(args: {
   heightMode: SliderSizeMode;
   availableWidth: number;
   availableHeight: number;
-  activeSlideWidth: number;
-  activeSlideHeight: number;
+  activePageWidth: number;
+  activePageHeight: number;
   fixedWidth: number | null;
   fixedHeight: number | null;
   leadingPeek: number;
   trailingPeek: number;
   showDots: boolean;
+  dotsTopInset?: number;
+  dotsBottomInset?: number;
 }): {
   outerWidth: number | string;
   outerHeight: number | string;
   viewportWidth: number;
   viewportHeight: number;
 } {
-  const dotsInset = args.showDots ? 8 + 6 + 8 : 0;
+  const dotsTopInset = Math.max(0, args.dotsTopInset ?? 0);
+  const dotsBottomInset = Math.max(
+    0,
+    args.dotsBottomInset ?? (args.showDots ? 18 : 0)
+  );
+  const dotsInset = dotsTopInset + dotsBottomInset;
   const fitPrimary =
     args.direction === 'horizontal'
-      ? args.activeSlideWidth
-      : args.activeSlideHeight;
+      ? args.activePageWidth
+      : args.activePageHeight;
   const fitViewportPrimary = Math.max(
     1,
     fitPrimary + args.leadingPeek + args.trailingPeek
@@ -3704,11 +4223,11 @@ export function resolveSliderContainerSize(args: {
   const viewportWidth =
     args.direction === 'horizontal'
       ? fitViewportPrimary
-      : Math.max(1, args.activeSlideWidth);
+      : Math.max(1, args.activePageWidth);
   const viewportHeight =
     args.direction === 'vertical'
       ? fitViewportPrimary
-      : Math.max(1, args.activeSlideHeight);
+      : Math.max(1, args.activePageHeight);
 
   const fitOuterWidth = Math.min(
     Math.max(1, viewportWidth),
@@ -3743,23 +4262,47 @@ export function resolveSliderContainerSize(args: {
   };
 }
 
-export function resolveSlidePageSize(args: {
-  slideProps: Record<string, any>;
+function resolvePageFixedSizeHint(pageProps: Record<string, any>): {
+  width: number | null;
+  height: number | null;
+} {
+  const widthMode = resolvePageSizeMode(pageProps, 'width');
+  const heightMode = resolvePageSizeMode(pageProps, 'height');
+  const width =
+    widthMode === 'fixed'
+      ? toFinite(
+          parseLayoutDimension(pageProps.width ?? pageProps.size?.widthPx, true)
+        )
+      : null;
+  const height =
+    heightMode === 'fixed'
+      ? toFinite(
+          parseLayoutDimension(
+            pageProps.height ?? pageProps.size?.heightPx,
+            true
+          )
+        )
+      : null;
+  return { width, height };
+}
+
+export function resolvePageSize(args: {
+  pageProps: Record<string, any>;
   direction: 'horizontal' | 'vertical';
   pagePrimary: number;
   crossSize: number | string;
 }): { width: number | string; height: number | string } {
-  const widthMode = resolveSlideSizeMode(args.slideProps, 'width');
-  const heightMode = resolveSlideSizeMode(args.slideProps, 'height');
+  const widthMode = resolvePageSizeMode(args.pageProps, 'width');
+  const heightMode = resolvePageSizeMode(args.pageProps, 'height');
   const fixedWidth = toFinite(
     parseLayoutDimension(
-      args.slideProps.width ?? args.slideProps.size?.widthPx,
+      args.pageProps.width ?? args.pageProps.size?.widthPx,
       true
     )
   );
   const fixedHeight = toFinite(
     parseLayoutDimension(
-      args.slideProps.height ?? args.slideProps.size?.heightPx,
+      args.pageProps.height ?? args.pageProps.size?.heightPx,
       true
     )
   );
@@ -3918,7 +4461,7 @@ function resolveSliderBackgroundColor(
 function SliderWidget({
   id,
   sliderProps,
-  slidePropsList,
+  pagePropsList,
   direction,
   pageAlignment,
   pageSpacing,
@@ -3932,7 +4475,7 @@ function SliderWidget({
 }: {
   id?: string;
   sliderProps: Record<string, any>;
-  slidePropsList: Record<string, any>[];
+  pagePropsList: Record<string, any>[];
   direction: 'horizontal' | 'vertical';
   pageAlignment: 'start' | 'center' | 'end';
   pageSpacing: number;
@@ -3956,7 +4499,10 @@ function SliderWidget({
     width: 1,
     height: 1,
   });
-  const [activeSlideSize, setActiveSlideSize] = React.useState({
+  const [measuredPageSizes, setMeasuredPageSizes] = React.useState<
+    Record<number, { width: number; height: number }>
+  >({});
+  const [activePageSize, setActivePageSize] = React.useState({
     width: 1,
     height: 1,
   });
@@ -3973,6 +4519,22 @@ function SliderWidget({
     setCurrentPage((prev) => clampSliderPage(prev, pageCount));
   }, [pageCount]);
 
+  React.useEffect(() => {
+    setMeasuredPageSizes((prev) => {
+      const next: Record<number, { width: number; height: number }> = {};
+      Object.keys(prev).forEach((key) => {
+        const index = Number(key);
+        if (Number.isFinite(index) && index < pageCount) {
+          const cached = prev[index];
+          if (cached) next[index] = cached;
+        }
+      });
+      return Object.keys(next).length === Object.keys(prev).length
+        ? prev
+        : next;
+    });
+  }, [pageCount]);
+
   React.useEffect(() => {
     if (autoAdvance && !isInteracting && pageLength > 1) {
       timerRef.current = setInterval(() => {
@@ -4002,6 +4564,30 @@ function SliderWidget({
     }
   }, [currentPage, pageCount]);
 
+  const syncActivePageSize = React.useCallback(
+    (page: number) => {
+      if (pageCount <= 0) return;
+      const safePage = clampSliderPage(page, pageCount);
+      const measured = measuredPageSizes[safePage];
+      const hint = resolvePageFixedSizeHint(pagePropsList[safePage] ?? {});
+      setActivePageSize((prev) => {
+        const next = {
+          width: Math.max(1, hint.width ?? measured?.width ?? prev.width),
+          height: Math.max(1, hint.height ?? measured?.height ?? prev.height),
+        };
+        return prev.width === next.width && prev.height === next.height
+          ? prev
+          : next;
+      });
+    },
+    [measuredPageSizes, pageCount, pagePropsList]
+  );
+
+  React.useEffect(() => {
+    if (pageCount <= 0) return;
+    syncActivePageSize(currentPage);
+  }, [currentPage, pageCount, syncActivePageSize]);
+
   React.useEffect(() => {
     if (registry && id && children.length > 0) {
       registry.update(id, currentPage % children.length, children.length);
@@ -4015,10 +4601,12 @@ function SliderWidget({
   // 2) trailingPeek = end?0 : start?pagePeek*2 : pagePeek
   // 3) pagePrimary = viewportPrimary - leadingPeek - trailingPeek (clamped >= 1)
   // 4) track offset = activeIndex * (pagePrimary + pageSpacing)
-  // 5) fit parent mode follows active slide size but is clamped to container width
+  // 5) fit parent mode follows active page size but is clamped to container width
   // 6) viewport always clips track content (no root horizontal overflow)
   const { leading, trailing } = resolvePeekInsets(pageAlignment, pagePeek);
   const showDots = pageControlEnabled && pageLength > 1;
+  const dotsTopInset = showDots && pageControlPosition === 'top' ? 18 : 0;
+  const dotsBottomInset = showDots && pageControlPosition !== 'top' ? 18 : 0;
   const widthMode = resolveSliderSizeMode(sliderProps, 'width', 'fill');
   const heightMode = resolveSliderSizeMode(sliderProps, 'height', 'fit');
   const fixedWidth = toFinite(parseLayoutDimension(sliderProps.width, true));
@@ -4030,14 +4618,17 @@ function SliderWidget({
     heightMode,
     availableWidth: availableSize.width,
     availableHeight: availableSize.height,
-    activeSlideWidth: activeSlideSize.width,
-    activeSlideHeight: activeSlideSize.height,
+    activePageWidth: activePageSize.width,
+    activePageHeight: activePageSize.height,
     fixedWidth,
     fixedHeight,
     leadingPeek: leading,
     trailingPeek: trailing,
     showDots,
+    dotsTopInset,
+    dotsBottomInset,
   });
+  const sliderFillSizeStyle = resolveFillSizeStyle(sliderProps.size);
   const viewportPrimary =
     direction === 'horizontal'
       ? resolved.viewportWidth
@@ -4069,63 +4660,50 @@ function SliderWidget({
       style={{
         width: resolved.outerWidth,
         height: resolved.outerHeight,
-        minWidth: 1,
-        minHeight: 1,
+        minWidth: 0,
+        minHeight: 0,
+        display: 'flex',
+        flexDirection: 'column',
+        ...sliderFillSizeStyle,
         backgroundColor: sliderBackgroundColor,
         borderRadius: 0,
-        overflow: 'visible',
+        overflow: 'hidden',
+        position: 'relative',
       }}
     >
-      {showDots && pageControlPosition === 'top' ? (
-        <View
-          style={{
-            marginBottom: 8,
-            flexDirection: 'row',
-            justifyContent: 'center',
-            alignItems: 'center',
-          }}
-        >
-          {Array.from({ length: pageLength }).map((_, index) => {
-            const isActive = index === currentPage;
-            return (
-              <View
-                key={`slider-dot-top-${index}`}
-                style={{
-                  width: 6,
-                  height: 6,
-                  borderRadius: 3,
-                  marginHorizontal: 3,
-                  backgroundColor: isActive
-                    ? parseColor('0xFF111827')
-                    : parseColor('0xFFD1D5DB'),
-                }}
-              />
-            );
-          })}
-        </View>
-      ) : null}
-
       <View
         style={{
           overflow: 'hidden',
+          width: widthMode === 'fit' ? resolved.viewportWidth : '100%',
+          height: heightMode === 'fit' ? resolved.viewportHeight : '100%',
+          minWidth: 0,
+          minHeight: 0,
+          display: 'flex',
+          flexDirection: 'column',
+          flexGrow: heightMode === 'fit' ? 0 : 1,
+          flexShrink: 1,
           ...(direction === 'horizontal'
             ? {
-                width: resolved.viewportWidth,
-                height: resolved.viewportHeight,
                 paddingLeft: leading,
                 paddingRight: trailing,
+                paddingTop: dotsTopInset,
+                paddingBottom: dotsBottomInset,
               }
             : {
-                width: resolved.viewportWidth,
-                height: resolved.viewportHeight,
-                paddingTop: leading,
-                paddingBottom: trailing,
+                paddingTop: leading + dotsTopInset,
+                paddingBottom: trailing + dotsBottomInset,
               }),
         }}
       >
         <PagerView
           ref={pagerRef}
-          style={{ width: '100%', height: '100%', minHeight: 1 }}
+          style={{
+            width: '100%',
+            height: '100%',
+            minWidth: 0,
+            minHeight: 0,
+            flex: 1,
+          }}
           orientation={direction}
           pageMargin={Math.max(0, pageSpacing)}
           initialPage={clampSliderPage(currentPage, pageCount)}
@@ -4133,6 +4711,7 @@ function SliderWidget({
             const page = event.nativeEvent.position;
             const safePage = clampSliderPage(page, pageCount);
             setCurrentPage(safePage);
+            syncActivePageSize(safePage);
             markInteracting();
             if (registry && id) {
               registry.update(id, safePage % pageLength, pageLength);
@@ -4142,56 +4721,115 @@ function SliderWidget({
           {Array.from({ length: pageCount }).map((_, index) => (
             <View
               key={`slider-page-${index}`}
-              onLayout={
-                index === currentPage
-                  ? (event) => {
-                      const nextWidth = Math.max(
-                        1,
-                        Math.round(event.nativeEvent.layout.width)
-                      );
-                      const nextHeight = Math.max(
-                        1,
-                        Math.round(event.nativeEvent.layout.height)
-                      );
-                      setActiveSlideSize((prev) =>
-                        prev.width === nextWidth && prev.height === nextHeight
-                          ? prev
-                          : { width: nextWidth, height: nextHeight }
-                      );
-                    }
-                  : undefined
-              }
               style={{
-                alignSelf: 'flex-start',
+                width: '100%',
+                height: '100%',
                 overflow: 'hidden',
-                ...(resolveSlidePageSize({
-                  slideProps: slidePropsList[index] ?? {},
-                  direction,
-                  pagePrimary,
-                  crossSize: '100%',
-                }) as ViewStyle),
+                minWidth: 0,
+                minHeight: 0,
+                display: 'flex',
+                flexDirection: 'column',
               }}
             >
-              {children[index % pageLength]}
+              <View
+                onLayout={(event) => {
+                  const nextWidth = Math.max(
+                    1,
+                    Math.round(event.nativeEvent.layout.width)
+                  );
+                  const nextHeight = Math.max(
+                    1,
+                    Math.round(event.nativeEvent.layout.height)
+                  );
+
+                  setMeasuredPageSizes((prev) => {
+                    const current = prev[index];
+                    if (
+                      current &&
+                      current.width === nextWidth &&
+                      current.height === nextHeight
+                    ) {
+                      return prev;
+                    }
+                    return {
+                      ...prev,
+                      [index]: { width: nextWidth, height: nextHeight },
+                    };
+                  });
+
+                  if (index === currentPage) {
+                    setActivePageSize((prev) =>
+                      prev.width === nextWidth && prev.height === nextHeight
+                        ? prev
+                        : { width: nextWidth, height: nextHeight }
+                    );
+                  }
+                }}
+                style={{
+                  alignSelf: (
+                    direction === 'horizontal'
+                      ? resolvePageSizeMode(
+                          pagePropsList[index] ?? {},
+                          'height'
+                        ) === 'fill'
+                      : resolvePageSizeMode(
+                          pagePropsList[index] ?? {},
+                          'width'
+                        ) === 'fill'
+                  )
+                    ? 'stretch'
+                    : 'flex-start',
+                  overflow: 'hidden',
+                  minWidth: 0,
+                  minHeight: 0,
+                  display: 'flex',
+                  flexDirection: 'column',
+                  ...(resolvePageSize({
+                    pageProps: pagePropsList[index] ?? {},
+                    direction,
+                    pagePrimary,
+                    crossSize: '100%',
+                  }) as ViewStyle),
+                }}
+              >
+                <View
+                  style={{
+                    width: '100%',
+                    height: '100%',
+                    minWidth: 0,
+                    minHeight: 0,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    flexGrow: 1,
+                  }}
+                >
+                  {children[index % pageLength]}
+                </View>
+              </View>
             </View>
           ))}
         </PagerView>
       </View>
 
-      {showDots && pageControlPosition === 'bottom' ? (
+      {showDots ? (
         <View
           style={{
-            marginTop: 8,
+            position: 'absolute',
+            left: 0,
+            right: 0,
+            ...(pageControlPosition === 'top' ? { top: 4 } : { bottom: 4 }),
+            height: 12,
             flexDirection: 'row',
             justifyContent: 'center',
             alignItems: 'center',
+            pointerEvents: 'none',
           }}
         >
           {Array.from({ length: pageLength }).map((_, index) => {
             const isActive = index === currentPage;
             return (
               <View
-                key={`slider-dot-bottom-${index}`}
+                key={`slider-dot-${index}`}
                 style={{
                   width: 6,
                   height: 6,
@@ -4235,12 +4873,16 @@ function PageViewIndicator({
 }) {
   const registry = useSliderRegistry();
   const [current, setCurrent] = React.useState(0);
+  const [count, setCount] = React.useState(0);
   const indicatorStyle = style ?? 'dots';
-  const count = linkedTo && registry ? registry.getPageCount(linkedTo) : 0;
 
   React.useEffect(() => {
     if (!linkedTo || !registry) return;
-    return registry.getNotifier(linkedTo, setCurrent);
+    setCount(registry.getPageCount(linkedTo));
+    return registry.getNotifier(linkedTo, (page) => {
+      setCurrent(page);
+      setCount(registry.getPageCount(linkedTo));
+    });
   }, [linkedTo, registry]);
 
   if (!linkedTo || !registry || count <= 1) return null;