jfs-components 0.0.85 → 0.0.95

package/lib/module/assets.d.js

@@ -0,0 +1 @@
+"use strict";

package/lib/module/components/AllocationComparisonChart/AllocationComparisonChart.js

@@ -0,0 +1,293 @@
+"use strict";
+
+import React from 'react';
+import { View, Text } from 'react-native';
+import Svg, { Line } from 'react-native-svg';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { useTokens } from '../../design-tokens/JFSThemeProvider';
+import { EMPTY_MODES } from '../../utils/react-utils';
+import MetricLegendItem from '../MetricLegendItem/MetricLegendItem';
+
+/**
+ * One vertical pill in the {@link AllocationComparisonChartProps.data} array.
+ *
+ * Each segment renders a single bar whose **height encodes `value`** (the
+ * "current" reading) and, when supplied, a **`baseline`** overlay drawn from
+ * the bottom up with a dashed marker line (the "recommended" reading). Both
+ * are measured against the same shared scale so bars and baselines are
+ * directly comparable across segments.
+ */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const DEFAULT_DATA = [{
+  label: 'Small & Mid',
+  value: 65,
+  baseline: 35
+}, {
+  label: 'Large',
+  value: 25
+}, {
+  label: 'Others',
+  value: 10
+}];
+const toNumber = (value, fallback) => {
+  if (typeof value === 'number') {
+    return Number.isFinite(value) ? value : fallback;
+  }
+  if (typeof value === 'string') {
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : fallback;
+  }
+  return fallback;
+};
+const toFontWeight = (value, fallback) => {
+  if (typeof value === 'number') {
+    return String(value);
+  }
+  if (typeof value === 'string') {
+    return value;
+  }
+  return fallback;
+};
+const isShown = node => node !== undefined && node !== null && node !== false;
+/**
+ * Internal: one vertical pill column (the Figma "Segment Indicator"). Not
+ * exported — the ergonomic public unit is the chart driven by `data`. The
+ * `segmentIndicator/*` token names are mirrored here so design ↔ code token
+ * alignment is preserved.
+ */
+function SegmentBar({
+  segment,
+  barHeightPx,
+  baselineHeightPx,
+  baselineLabel,
+  showMarker,
+  theme
+}) {
+  const {
+    barWidth,
+    pillRadius,
+    gap,
+    currentColor,
+    baselineColor,
+    lineColor,
+    lineSize,
+    labelStyle
+  } = theme;
+  const fillColor = segment.color ?? currentColor;
+  const overlayColor = segment.baselineColor ?? baselineColor;
+  const showValueLabel = isShown(segment.valueLabel);
+  const hasBaseline = baselineHeightPx !== null && baselineHeightPx > 0;
+  const overlayHeight = hasBaseline ? Math.min(baselineHeightPx, barHeightPx) : 0;
+  const overlayRadius = Math.min(pillRadius, barWidth / 2, overlayHeight / 2);
+  return /*#__PURE__*/_jsxs(View, {
+    style: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'flex-end',
+      gap
+    },
+    accessibilityLabel: segment.accessibilityLabel,
+    children: [showValueLabel ? /*#__PURE__*/_jsx(Text, {
+      numberOfLines: 1,
+      style: labelStyle,
+      children: segment.valueLabel
+    }) : null, /*#__PURE__*/_jsx(View, {
+      style: {
+        width: barWidth,
+        height: Math.max(barHeightPx, 1),
+        borderRadius: pillRadius,
+        backgroundColor: fillColor,
+        position: 'relative'
+      },
+      children: hasBaseline ? /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(View, {
+          style: {
+            position: 'absolute',
+            left: 0,
+            right: 0,
+            bottom: 0,
+            height: overlayHeight,
+            backgroundColor: overlayColor,
+            borderBottomLeftRadius: overlayRadius,
+            borderBottomRightRadius: overlayRadius
+          }
+        }), showMarker ? /*#__PURE__*/_jsxs(View, {
+          style: {
+            position: 'absolute',
+            left: 0,
+            bottom: overlayHeight,
+            height: 0,
+            flexDirection: 'row',
+            alignItems: 'center'
+          },
+          pointerEvents: "none",
+          children: [/*#__PURE__*/_jsx(Svg, {
+            width: barWidth,
+            height: Math.max(lineSize, 1),
+            children: /*#__PURE__*/_jsx(Line, {
+              x1: 0,
+              y1: Math.max(lineSize, 1) / 2,
+              x2: barWidth,
+              y2: Math.max(lineSize, 1) / 2,
+              stroke: lineColor,
+              strokeWidth: lineSize,
+              strokeDasharray: "2 2"
+            })
+          }), isShown(baselineLabel) ? /*#__PURE__*/_jsx(Text, {
+            numberOfLines: 1,
+            style: [labelStyle, {
+              marginLeft: 6
+            }],
+            children: baselineLabel
+          }) : null]
+        }) : null]
+      }) : null
+    }), /*#__PURE__*/_jsx(Text, {
+      numberOfLines: 1,
+      style: labelStyle,
+      children: segment.label
+    })]
+  });
+}
+
+/**
+ * `AllocationComparisonChart` plots a row of vertical pill bars that compare a
+ * **current** reading (each bar's height) against an optional **recommended**
+ * baseline (a filled overlay drawn from the bottom up, marked with a dashed
+ * line). Every bar and baseline shares a single scale, so heights are directly
+ * comparable across segments — no axes required.
+ *
+ * The chart is driven entirely by the `data` array: each entry pairs a
+ * `value`, an optional `baseline` and its `label`, so a bar can never drift
+ * out of sync with its caption or its baseline marker.
+ *
+ * Colors, fonts, spacing and the pill radius resolve from the Figma
+ * `segmentIndicator/*`, `metricLegendItem/*` and `allocationComparisonChart/*`
+ * tokens via the `modes` prop.
+ *
+ * @component
+ */
+function AllocationComparisonChart({
+  data = DEFAULT_DATA,
+  max,
+  height = 154,
+  barWidth,
+  showLegend = true,
+  valueLegendLabel = 'Current',
+  baselineLegendLabel = 'Recommended',
+  formatValue = value => `${value}%`,
+  modes: propModes = EMPTY_MODES,
+  style,
+  chartStyle,
+  legendStyle,
+  accessibilityLabel
+}) {
+  const {
+    modes: globalModes
+  } = useTokens();
+  const modes = React.useMemo(() => ({
+    ...globalModes,
+    ...propModes
+  }), [globalModes, propModes]);
+  const trackWidth = toNumber(getVariableByName('segmentIndicator/track/width', modes), 28);
+  const resolvedBarWidth = barWidth ?? trackWidth;
+  const radiusToken = toNumber(getVariableByName('segmentIndicator/indicator/radius', modes), 99999);
+  const pillRadius = Math.min(radiusToken, resolvedBarWidth / 2);
+  const gap = toNumber(getVariableByName('segmentIndicator/gap', modes), 4);
+  const chartGap = toNumber(getVariableByName('allocationComparisonChart/gap', modes), 8);
+  const currentColor = getVariableByName('segmentIndicator/indicator/background', modes) ?? '#5d00b5';
+  const baselineColor = getVariableByName('segmentIndicator/indicator/foreground', modes) ?? '#b84fbd';
+  const lineColor = getVariableByName('segmentIndicator/indicator/line/color', modes) ?? '#ffffff';
+  const lineSize = toNumber(getVariableByName('segmentIndicator/indicator/line/size', modes), 1);
+  const foreground = getVariableByName('segmentIndicator/foreground', modes) ?? '#0c0d10';
+  const fontFamily = getVariableByName('segmentIndicator/fontFamily', modes) ?? 'JioType Var';
+  const fontSize = toNumber(getVariableByName('segmentIndicator/fontSize', modes), 12);
+  const lineHeight = toNumber(getVariableByName('segmentIndicator/lineHeight', modes), 12);
+  const fontWeight = toFontWeight(getVariableByName('segmentIndicator/fontWeight', modes), '400');
+  const labelStyle = {
+    color: foreground,
+    fontFamily,
+    fontSize,
+    lineHeight,
+    fontWeight,
+    textAlign: 'center'
+  };
+  const computedMax = max ?? data.reduce((acc, seg) => Math.max(acc, seg.value, seg.baseline ?? 0), 0);
+  const safeMax = computedMax > 0 ? computedMax : 1;
+  const firstBaselineIndex = data.findIndex(seg => typeof seg.baseline === 'number');
+  const hasAnyBaseline = firstBaselineIndex !== -1;
+  const theme = {
+    barWidth: resolvedBarWidth,
+    pillRadius,
+    gap,
+    currentColor,
+    baselineColor,
+    lineColor,
+    lineSize,
+    labelStyle
+  };
+  const defaultAccessibilityLabel = accessibilityLabel ?? `Allocation comparison of ${data.length} segment${data.length === 1 ? '' : 's'}: ` + data.map(seg => {
+    const label = typeof seg.label === 'string' ? seg.label : 'segment';
+    const base = typeof seg.baseline === 'number' ? `, recommended ${seg.baseline}` : '';
+    return `${label} ${seg.value}${base}`;
+  }).join('; ');
+  return /*#__PURE__*/_jsxs(View, {
+    style: [{
+      width: '100%'
+    }, style],
+    accessibilityLabel: defaultAccessibilityLabel,
+    children: [showLegend ? /*#__PURE__*/_jsxs(View, {
+      style: [{
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+        marginBottom: chartGap
+      }, legendStyle],
+      children: [/*#__PURE__*/_jsx(MetricLegendItem, {
+        label: valueLegendLabel,
+        indicatorColor: currentColor,
+        modes: modes,
+        style: {
+          flexGrow: 0,
+          flexShrink: 1
+        }
+      }), hasAnyBaseline ? /*#__PURE__*/_jsx(MetricLegendItem, {
+        label: baselineLegendLabel,
+        indicatorColor: baselineColor,
+        modes: modes,
+        style: {
+          flexGrow: 0,
+          flexShrink: 1
+        }
+      }) : null]
+    }) : null, /*#__PURE__*/_jsx(View, {
+      accessibilityRole: "image",
+      style: [{
+        flexDirection: 'row',
+        alignItems: 'flex-end',
+        gap: 8,
+        width: '100%'
+      }, chartStyle],
+      children: data.map((segment, index) => {
+        const ratio = Math.max(0, Math.min(1, segment.value / safeMax));
+        const barHeightPx = Math.max(0, height * ratio);
+        const baselineHeightPx = typeof segment.baseline === 'number' ? Math.max(0, Math.min(1, segment.baseline / safeMax)) * height : null;
+        const baselineLabel = segment.baselineLabel === undefined ? typeof segment.baseline === 'number' ? formatValue(segment.baseline) : undefined : segment.baselineLabel;
+        const resolvedSegment = {
+          ...segment,
+          valueLabel: segment.valueLabel === undefined ? formatValue(segment.value) : segment.valueLabel
+        };
+        const showMarker = segment.showMarker ?? index === firstBaselineIndex;
+        return /*#__PURE__*/_jsx(SegmentBar, {
+          segment: resolvedSegment,
+          barHeightPx: barHeightPx,
+          baselineHeightPx: baselineHeightPx,
+          baselineLabel: baselineLabel,
+          showMarker: showMarker,
+          theme: theme
+        }, segment.key ?? `segment-${index}`);
+      })
+    })]
+  });
+}
+export default AllocationComparisonChart;

package/lib/module/components/FullscreenModal/FullscreenModal.js

@@ -1,8 +1,7 @@
 "use strict";
 
-import React, { useMemo } from 'react';
-import { View, Text, ScrollView } from 'react-native';
-import Animated, { Extrapolation, interpolate, useAnimatedScrollHandler, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
+import React, { useMemo, useRef } from 'react';
+import { View, Text, Animated } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
@@ -29,22 +28,24 @@ const FULLSCREEN_MODAL_FORCED_MODES = Object.freeze({
   context5: 'Fullscreen Modal'
 });
 
-// Reanimated-driven ScrollView so the parallax handler runs on the UI thread.
-// Module scope so the wrapped component identity is stable across renders.
-const AnimatedScrollView = Animated.createAnimatedComponent(ScrollView);
-
-// Parallax tuning. The hero collapses by HEIGHT only as the user scrolls up —
-// its full width is preserved and the media keeps a fixed aspect ratio (it is
-// cropped, never scaled or squished, like a `cover` background). When no
-// explicit `heroMinHeight` is given, the hero collapses to this fraction of
-// its resting height.
-const HERO_MIN_HEIGHT_RATIO = 0.45;
+// ---------------------------------------------------------------------------
+// Default modes
+//
+// A FullscreenModal is a "JioPlus" surface, so it defaults the `Page type`
+// collection to `'JioPlus'`. Unlike the forced modes above this IS
+// overridable — it is applied before the caller's `modes`, so passing
+// `modes={{ 'Page type': 'SubPage' }}` still wins. Frozen for stable identity
+// (keeps the token resolver's per-modes cache hot).
+// ---------------------------------------------------------------------------
+const FULLSCREEN_MODAL_DEFAULT_MODES = Object.freeze({
+  'Page type': 'JioPlus'
+});
 
 // ---------------------------------------------------------------------------
 // Hero text — the eyebrow / headline / supporting / price block. Built inline
 // (rather than reusing <PageHero>) so we can render BOTH a supporting
 // paragraph AND a price line with the exact PageHero token gaps, and overlay
-// it on the parallax media without PageHero's media/button scaffolding.
+// it on the hero media without PageHero's media/button scaffolding.
 // ---------------------------------------------------------------------------
 
 function HeroText({
@@ -129,8 +130,9 @@ function HeroText({
 }
 
 /**
- * FullscreenModal — a full-screen takeover surface with a parallax media hero,
- * a scrollable body, a floating close button, and a sticky `ActionFooter`.
+ * FullscreenModal — a full-screen takeover surface with a full-bleed media
+ * hero, a scrollable body, a floating close button, and a sticky
+ * `ActionFooter`.
  *
  * The component always themes itself with `context5: 'Fullscreen Modal'`
  * (non-overridable) so every nested component (Section, ListItem, Button,
@@ -138,14 +140,21 @@ function HeroText({
  * That mode is cascaded into `children`, the footer, and the hero text via
  * `cloneChildrenWithModes` / the merged `modes` object.
  *
- * ### Parallax
- * As the user scrolls up, the hero collapses by **height only** (from
- * `heroHeight` to `heroMinHeight`) — its **full width is always preserved**.
- * The `heroMedia` is pinned to the top at a fixed size and `cover`-cropped by
- * the collapsing clip, so it keeps a perfect aspect ratio the whole time
- * (never scaled or squished). Because it collapses slower than the content
- * scrolls, the media lags behind for the parallax depth cue. Disable with
- * `parallax={false}`.
+ * ### Background media
+ * The `heroMedia` is a single full-bleed background pinned to the top of the
+ * modal at the full width and its own natural aspect ratio. It lives at the
+ * ROOT — behind both the scrolling content and the (transparent) footer — so
+ * it fills the whole surface and is NEVER clipped to the content height. It
+ * also contributes ZERO scroll height: the scroll extent is driven purely by
+ * the in-flow foreground (hero text + `children`), so the number of body
+ * elements dictates how far the surface scrolls. It still scrolls in lockstep
+ * WITH the content (the background is translated by the scroll offset), so the
+ * content reads as sitting ON one continuous image that moves with it — there
+ * is no parallax and no separate solid body box.
+ *
+ * Pass a background sized to the full width at its natural ratio
+ * (e.g. `<Image imageSource={bg} ratio={1080 / 4140} />`). Use an asset at
+ * least as tall as the surface so it covers the full modal.
  *
  * @component
  * @example
@@ -155,7 +164,7 @@ function HeroText({
  *   headline="Get more from your money."
  *   supportingText="JioFinance+ is your upgraded financial experience…"
  *   priceText="₹999/year · ₹0 until 2027"
- *   heroMedia={<LottiePlayer source={hero} size={{ width: 360, height: 420 }} />}
+ *   heroMedia={<Image imageSource={hero} ratio={1080 / 4140} />}
  *   primaryActionLabel="Upgrade for free"
  *   disclaimer="By upgrading, we'll check your eligibility with Experian."
  *   onPrimaryAction={() => upgrade()}
@@ -173,8 +182,6 @@ function FullscreenModal({
   priceText = '₹999/year · ₹0 until 2027',
   heroMedia,
   heroHeight = 420,
-  heroMinHeight,
-  parallax = true,
   showClose = true,
   onClose,
   closeAccessibilityLabel = 'Close',
@@ -182,7 +189,6 @@ function FullscreenModal({
   primaryActionLabel = 'Upgrade for free',
   onPrimaryAction,
   disclaimer = "By upgrading, we'll check your eligibility with Experian.",
-  backgroundColor = '#0f0d0a',
   children,
   modes: propModes = EMPTY_MODES,
   style,
@@ -193,76 +199,62 @@ function FullscreenModal({
     modes: globalModes
   } = useTokens();
 
-  // context5 is appended last so it always wins, regardless of what the
-  // caller (or the global theme) passes.
+  // Merge order (low → high priority):
+  //   global theme → component defaults (Page type: JioPlus) → caller modes →
+  //   forced modes (context5). So `Page type` defaults to JioPlus but the
+  //   caller can override it, while `context5` always wins. This single `modes`
+  //   object is what cascades to the body, hero media, and the ActionFooter.
   const modes = useMemo(() => ({
     ...globalModes,
+    ...FULLSCREEN_MODAL_DEFAULT_MODES,
     ...propModes,
     ...FULLSCREEN_MODAL_FORCED_MODES
   }), [globalModes, propModes]);
   const rootGap = Number(getVariableByName('fullScreenModal/gap', modes)) || 16;
-  const minHeight = heroMinHeight ?? Math.round(heroHeight * HERO_MIN_HEIGHT_RATIO);
-  const scrollY = useSharedValue(0);
-  const onScroll = useAnimatedScrollHandler(event => {
-    scrollY.value = event.contentOffset.y;
-  });
 
-  // Collapse the hero by HEIGHT only as the user scrolls up. The clip's width
-  // never changes and the media inside is pinned full-size at the top, so the
-  // art is cropped (cover) rather than scaled or narrowed — it keeps a perfect
-  // aspect ratio the whole time. Pull-down (negative offset) is clamped, so the
-  // hero never grows past its resting height.
-  const heroAnimatedStyle = useAnimatedStyle(() => {
-    const height = interpolate(scrollY.value, [0, heroHeight], [heroHeight, minHeight], Extrapolation.CLAMP);
-    return {
-      height
-    };
-  });
+  // Drives the background's parallax-free sync with the scroll. The hero media
+  // lives at the ROOT (so it is never clipped to the content height and sits
+  // behind the transparent footer), but we translate it up by the exact scroll
+  // offset so it moves in lockstep with the content — i.e. it scrolls WITH the
+  // body without ever contributing to the scroll height.
+  const scrollY = useRef(new Animated.Value(0)).current;
+  const onScroll = useMemo(() => Animated.event([{
+    nativeEvent: {
+      contentOffset: {
+        y: scrollY
+      }
+    }
+  }], {
+    useNativeDriver: true
+  }), [scrollY]);
+  const heroTranslateY = useMemo(() => Animated.multiply(scrollY, -1), [scrollY]);
   const processedHeroMedia = useMemo(() => heroMedia ? cloneChildrenWithModes(heroMedia, modes, FULLSCREEN_MODAL_FORCED_MODES) : null, [heroMedia, modes]);
   const processedChildren = useMemo(() => children ? cloneChildrenWithModes(children, modes, FULLSCREEN_MODAL_FORCED_MODES) : null, [children, modes]);
 
-  // The clip is full-width and top-pinned; its height is what animates. Width
-  // is intentionally never animated.
-  const heroClipBaseStyle = useMemo(() => ({
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    overflow: 'hidden'
-  }), []);
-
-  // The media sits at a fixed full-size box pinned to the top of the clip, so
-  // the collapsing clip crops it from the bottom (cover) instead of resizing
-  // it. Full width, fixed height — a perfect, constant aspect ratio.
-  const heroMediaWrapStyle = useMemo(() => ({
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    height: heroHeight,
-    alignItems: 'stretch'
-  }), [heroHeight]);
+  // The hero text region always reserves `heroHeight` and anchors its content
+  // to the bottom, so the eyebrow/headline block sits in the lower part of the
+  // first screenful — over the background media when present, in flow
+  // otherwise.
   const heroTextRegionStyle = useMemo(() => ({
-    height: heroHeight,
+    minHeight: heroHeight,
     justifyContent: 'flex-end',
     paddingHorizontal: 16,
     paddingBottom: 16
   }), [heroHeight]);
+
+  // Body is intentionally transparent — the background media shows through
+  // behind it. There is no solid "body box" stacked on top of the image.
   const bodyStyle = useMemo(() => [{
-    backgroundColor,
     gap: rootGap,
     paddingTop: rootGap,
     paddingBottom: 24
-  }, contentContainerStyle], [backgroundColor, rootGap, contentContainerStyle]);
-  const heroClip = /*#__PURE__*/_jsx(Animated.View, {
-    style: [heroClipBaseStyle, parallax ? heroAnimatedStyle : {
-      height: heroHeight
-    }],
-    pointerEvents: "none",
-    children: /*#__PURE__*/_jsx(View, {
-      style: heroMediaWrapStyle,
-      children: processedHeroMedia
-    })
+  }, contentContainerStyle], [rootGap, contentContainerStyle]);
+  const heroTextNode = /*#__PURE__*/_jsx(HeroText, {
+    eyebrow: eyebrow,
+    headline: headline,
+    supportingText: supportingText,
+    priceText: priceText,
+    modes: modes
   });
 
   // Footer: a fully custom node, or the default Button + Disclaimer column.
@@ -287,11 +279,17 @@ function FullscreenModal({
     });
   }
   return /*#__PURE__*/_jsxs(View, {
-    style: [rootStyle, {
-      backgroundColor
-    }, style],
+    style: [rootStyle, style],
     testID: testID,
-    children: [processedHeroMedia ? heroClip : null, /*#__PURE__*/_jsxs(AnimatedScrollView, {
+    children: [processedHeroMedia ? /*#__PURE__*/_jsx(Animated.View, {
+      style: [heroBackgroundStyle, {
+        transform: [{
+          translateY: heroTranslateY
+        }]
+      }],
+      pointerEvents: "none",
+      children: processedHeroMedia
+    }) : null, /*#__PURE__*/_jsx(Animated.ScrollView, {
       style: scrollViewStyle,
       contentContainerStyle: scrollContentStyle,
       showsVerticalScrollIndicator: false,
@@ -301,19 +299,16 @@ function FullscreenModal({
       // the keyboard is already open (default 'never' eats that tap).
       ,
       keyboardShouldPersistTaps: "handled",
-      children: [/*#__PURE__*/_jsx(View, {
-        style: heroTextRegionStyle,
-        children: /*#__PURE__*/_jsx(HeroText, {
-          eyebrow: eyebrow,
-          headline: headline,
-          supportingText: supportingText,
-          priceText: priceText,
-          modes: modes
-        })
-      }), /*#__PURE__*/_jsx(View, {
-        style: bodyStyle,
-        children: processedChildren
-      })]
+      children: /*#__PURE__*/_jsxs(View, {
+        style: foregroundFlowStyle,
+        children: [/*#__PURE__*/_jsx(View, {
+          style: heroTextRegionStyle,
+          children: heroTextNode
+        }), processedChildren ? /*#__PURE__*/_jsx(View, {
+          style: bodyStyle,
+          children: processedChildren
+        }) : null]
+      })
     }), footerContent ? /*#__PURE__*/_jsx(ActionFooter, {
       modes: modes,
       children: footerContent
@@ -349,4 +344,19 @@ const closeButtonStyle = {
   top: 12,
   right: 12
 };
+// Root-level full-bleed background media. Pinned to the top at full modal
+// width; the media inside keeps its own natural aspect ratio (only `top` is
+// pinned — no `bottom`/`overflow` clip), so it is NEVER cut to the content
+// height and fills the surface behind the scrolling content and the footer.
+// Living outside the ScrollView, it adds nothing to the scroll height.
+const heroBackgroundStyle = {
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0
+};
+// The foreground always flows normally — its content drives the scroll height.
+const foregroundFlowStyle = {
+  width: '100%'
+};
 export default FullscreenModal;