jfs-components 0.1.55 → 0.1.56

package/lib/module/utils/react-utils.js

@@ -58,8 +58,11 @@ export function cloneChildrenWithModes(children, modes, forcedModes) {
     } : modes;
     let processedChildren;
     if (hasChildren) {
+      // Descendants inherit this child's merged modes, not the ancestor's
+      // raw modes — so nested containers (e.g. ButtonGroup Neutral inside
+      // a CardCTA slot that injects Secondary) can cascade correctly.
       const childArray = React.Children.toArray(childChildren);
-      const processed = cloneChildrenWithModes(childArray, modes, forcedModes);
+      const processed = cloneChildrenWithModes(childArray, mergedModes, forcedModes);
       processedChildren = processed.length === 1 ? processed[0] : processed;
     }
     result.push(/*#__PURE__*/React.cloneElement(child, {

package/lib/typescript/src/components/ButtonGroup/ButtonGroup.d.ts

@@ -9,7 +9,7 @@ export type ButtonGroupProps = {
     children?: React.ReactNode;
     /**
      * Mode configuration for design tokens (e.g., {"Button / Size": "M", "Emphasis": "High"})
-     * These modes are passed down to all child components.
+     * These modes cascade to all children; a child's own `modes` still win on conflict.
      */
     modes?: Modes;
     /**
@@ -21,14 +21,14 @@ export type ButtonGroupProps = {
  * ButtonGroup component that aggregates multiple buttons (e.g., IconButton)
  * and handles their layout and styling/theming via design tokens.
  *
- * It passes the provided `modes` to all its immediate React Element children.
- * Non-IconButton children (e.g., Button) are automatically stretched to fill
- * available space. IconButton children keep their natural width.
+ * Group `modes` cascade to every child (and nested slot children). A child's
+ * own `modes` still win on conflict. Non-IconButton children (e.g. Button) are
+ * stretched to fill available space; IconButton children keep intrinsic width.
  *
  * @component
  * @example
  * ```jsx
- * <ButtonGroup modes={{"Color Mode": "Light"}}>
+ * <ButtonGroup modes={{"Color Mode": "Light", AppearanceBrand: "Neutral"}}>
  *   <IconButton iconName="ic_qr_code" />
  *   <Button label="Pay" />
  * </ButtonGroup>

package/lib/typescript/src/components/CardCTA/CardCTA.d.ts

@@ -31,6 +31,19 @@ export type CardCTAProps = {
     ratingLabel?: string;
     /** Show like/dislike actions in the rating footer */
     showRatingActions?: boolean;
+    /**
+     * [rating] Show the primary footer button (default `Save` / `buttonSlot`).
+     * When `false`, only rating actions render and they stay start-aligned —
+     * no empty button slot and no consumer `buttonSlot={<Fragment />}` hack.
+     * Default: `true`.
+     */
+    showButton?: boolean;
+    /**
+     * [rating] Horizontal alignment of the media / badge slot above the title.
+     * Charts and dataviz should use `'center'` (default). Use `'start'` for
+     * left-aligned badges/labels.
+     */
+    ratingMediaAlign?: 'start' | 'center';
     /** Callback for the default like action */
     onPressLike?: () => void;
     /** Callback for the default dislike action */
@@ -58,6 +71,6 @@ export type CardCTAProps = {
     /** Container style overrides */
     style?: StyleProp<ViewStyle>;
 };
-declare function CardCTA({ type, title, body, iconName, buttonLabel, onPressButton, ratingLabel, showRatingActions, onPressLike, onPressDislike, headline, description, subtitle, avatarSource, modes: propModes, iconSlot, buttonSlot, ratingBadgeSlot, ratingActionsSlot, avatarSlot, style, }: CardCTAProps): import("react/jsx-runtime").JSX.Element;
+declare function CardCTA({ type, title, body, iconName, buttonLabel, onPressButton, ratingLabel, showRatingActions, showButton, ratingMediaAlign, onPressLike, onPressDislike, headline, description, subtitle, avatarSource, modes: propModes, iconSlot, buttonSlot, ratingBadgeSlot, ratingActionsSlot, avatarSlot, style, }: CardCTAProps): import("react/jsx-runtime").JSX.Element;
 export default CardCTA;
 //# sourceMappingURL=CardCTA.d.ts.map

package/lib/typescript/src/components/Carousel/Carousel.d.ts

@@ -18,16 +18,44 @@ export interface CarouselProps {
     gap?: number;
     /** Width of each carousel item. When undefined, items take full container width. */
     itemWidth?: number;
+    /**
+     * Inset from each horizontal edge of the carousel to the active item.
+     * Sets scroll `paddingHorizontal` to this value and, when `itemWidth` is
+     * omitted, derives `itemWidth` as `containerWidth - itemInset * 2`.
+     * Prefer this over manually pairing `itemWidth` + `paddingHorizontal`.
+     */
+    itemInset?: number;
+    /**
+     * Negative horizontal margin (px) so the carousel can bleed past a padded
+     * parent (e.g. Section / VStack). Combine with `itemInset` for
+     * screen-edge-aligned cards without consumer math.
+     */
+    bleedHorizontal?: number;
     /**
      * Explicit horizontal padding (px) for the scroll content. When provided it
      * overrides the token-derived padding verbatim — the built-in `carousel/
      * padding/horizontal × 2` "peek" multiplier is NOT applied. Use this for
      * presets (e.g. the account-card strip) whose own tokens define a flush,
-     * non-peeking layout.
+     * non-peeking layout. Ignored when `itemInset` is set.
      */
     paddingHorizontal?: number;
     /** Explicit vertical padding (px) for the outer container. Overrides `carousel/padding/vertical`. */
     paddingVertical?: number;
+    /**
+     * When true (default), every slide stretches to the tallest slide's height
+     * so mixed-content cards share one row height. Set `false` to keep each
+     * slide at its intrinsic height.
+     */
+    equalHeight?: boolean;
+    /**
+     * Hard max height for the carousel shell.
+     * - `undefined` (default): apply the `carousel/maxHeight` token only when
+     *   `equalHeight` is `false` (legacy clipped strip). With `equalHeight`
+     *   (default) the shell hugs content and is not clipped.
+     * - `number`: always apply that max height.
+     * - `false`: never apply a max height.
+     */
+    maxHeight?: number | false;
     /**
      * Carousel visual type.
      * - `'Default'` — standard carousel with dot pagination below.
@@ -40,7 +68,7 @@ export interface CarouselProps {
     /** Style overrides for the outermost container. */
     style?: StyleProp<ViewStyle>;
 }
-export declare function Carousel({ children, modes, autoPlay, autoPlayInterval, showPagination, loop, gap: gapProp, itemWidth: itemWidthProp, paddingHorizontal: paddingHorizontalProp, paddingVertical: paddingVerticalProp, type, onIndexChange, style, }: CarouselProps): import("react/jsx-runtime").JSX.Element;
+export declare function Carousel({ children, modes, autoPlay, autoPlayInterval, showPagination, loop, gap: gapProp, itemWidth: itemWidthProp, itemInset, bleedHorizontal, paddingHorizontal: paddingHorizontalProp, paddingVertical: paddingVerticalProp, equalHeight, maxHeight: maxHeightProp, type, onIndexChange, style, }: CarouselProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Carousel {
     var Item: typeof import("./Carousel").Item;
     var Pagination: typeof import("./Carousel").Pagination;

package/lib/typescript/src/design-tokens/figma-modes.generated.d.ts

@@ -179,6 +179,7 @@ export declare const FIGMA_MODES: {
     readonly "NavArrow Direction": readonly ["Left&Right", "Top&Bottom"];
     readonly "NoteInput / Output": readonly ["Default"];
     readonly "Nudge / Output": readonly ["Default"];
+    readonly "Nudge Border Radius ": readonly ["Default", "Pill"];
     readonly "Nudge padding": readonly ["Default", "None"];
     readonly "number pagination": readonly ["Default"];
     readonly "Numpad / Output": readonly ["Default"];

package/lib/typescript/src/icons/registry.d.ts

@@ -4,7 +4,7 @@
  * Auto-generated from SVG files in src/icons/
  * DO NOT EDIT MANUALLY - Run "npm run icons:generate" to regenerate
  *
- * Generated: 2026-07-27T16:45:55.755Z
+ * Generated: 2026-07-27T20:32:46.426Z
  */
 export declare const iconRegistry: Record<string, {
     path: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jfs-components",
-  "version": "0.1.55",
+  "version": "0.1.56",
   "description": "React Native Jio Finance Components Library",
   "author": "sunshuaiqi@gmail.com",
   "license": "MIT",

package/src/components/ButtonGroup/ButtonGroup.tsx

@@ -5,7 +5,11 @@ import {
     type ViewStyle,
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
-import { EMPTY_MODES, flattenChildren } from '../../utils/react-utils'
+import {
+    EMPTY_MODES,
+    cloneChildrenWithModes,
+    flattenChildren,
+} from '../../utils/react-utils'
 import IconButton from '../IconButton/IconButton'
 import type { Modes } from '../../design-tokens'
 
@@ -17,7 +21,7 @@ export type ButtonGroupProps = {
     children?: React.ReactNode;
     /**
      * Mode configuration for design tokens (e.g., {"Button / Size": "M", "Emphasis": "High"})
-     * These modes are passed down to all child components.
+     * These modes cascade to all children; a child's own `modes` still win on conflict.
      */
     modes?: Modes;
     /**
@@ -30,14 +34,14 @@ export type ButtonGroupProps = {
  * ButtonGroup component that aggregates multiple buttons (e.g., IconButton)
  * and handles their layout and styling/theming via design tokens.
  *
- * It passes the provided `modes` to all its immediate React Element children.
- * Non-IconButton children (e.g., Button) are automatically stretched to fill
- * available space. IconButton children keep their natural width.
+ * Group `modes` cascade to every child (and nested slot children). A child's
+ * own `modes` still win on conflict. Non-IconButton children (e.g. Button) are
+ * stretched to fill available space; IconButton children keep intrinsic width.
  *
  * @component
  * @example
  * ```jsx
- * <ButtonGroup modes={{"Color Mode": "Light"}}>
+ * <ButtonGroup modes={{"Color Mode": "Light", AppearanceBrand: "Neutral"}}>
  *   <IconButton iconName="ic_qr_code" />
  *   <Button label="Pay" />
  * </ButtonGroup>
@@ -48,12 +52,10 @@ function ButtonGroup({
     modes = EMPTY_MODES,
     style,
 }: ButtonGroupProps) {
-    // Resolve design tokens
     const gap = getVariableByName('buttonGroup/gap', modes) ?? 12
     const paddingHorizontal = getVariableByName('buttonGroup/padding/horizontal', modes) ?? 0
     const paddingVertical = getVariableByName('buttonGroup/padding/vertical', modes) ?? 0
 
-    // Container style
     const containerStyle: ViewStyle = {
         flexDirection: 'row',
         alignItems: 'center',
@@ -62,25 +64,21 @@ function ButtonGroup({
         paddingVertical: paddingVertical,
     }
 
-    // Flatten children to handle Fragments properly
     const flatChildren = flattenChildren(children)
+    const cascadedChildren = cloneChildrenWithModes(flatChildren, modes)
 
-    const childrenWithModes = React.Children.map(flatChildren, (child) => {
-        if (React.isValidElement(child)) {
-            const element = child as React.ReactElement<any>
-            const childModes = element.props.modes || {}
-            const mergedModes = { ...modes, ...childModes }
-            const isIconButton = element.type === IconButton
-            const stretchStyle = isIconButton
-                ? undefined
-                : { flex: 1 }
-
-            return React.cloneElement(element, {
-                modes: mergedModes,
-                style: [stretchStyle, element.props.style],
-            })
+    const childrenWithModes = React.Children.map(cascadedChildren, (child) => {
+        if (!React.isValidElement(child)) {
+            return child
         }
-        return child
+
+        const element = child as React.ReactElement<any>
+        const isIconButton = element.type === IconButton
+        const stretchStyle = isIconButton ? undefined : { flex: 1 }
+
+        return React.cloneElement(element, {
+            style: [stretchStyle, element.props.style],
+        })
     })
 
     return (

package/src/components/CardCTA/CardCTA.tsx

@@ -63,6 +63,19 @@ export type CardCTAProps = {
     ratingLabel?: string;
     /** Show like/dislike actions in the rating footer */
     showRatingActions?: boolean;
+    /**
+     * [rating] Show the primary footer button (default `Save` / `buttonSlot`).
+     * When `false`, only rating actions render and they stay start-aligned —
+     * no empty button slot and no consumer `buttonSlot={<Fragment />}` hack.
+     * Default: `true`.
+     */
+    showButton?: boolean;
+    /**
+     * [rating] Horizontal alignment of the media / badge slot above the title.
+     * Charts and dataviz should use `'center'` (default). Use `'start'` for
+     * left-aligned badges/labels.
+     */
+    ratingMediaAlign?: 'start' | 'center';
     /** Callback for the default like action */
     onPressLike?: () => void;
     /** Callback for the default dislike action */
@@ -100,6 +113,8 @@ function CardCTA({
     onPressButton,
     ratingLabel = '+28 Rating',
     showRatingActions = true,
+    showButton = true,
+    ratingMediaAlign = 'center',
     onPressLike,
     onPressDislike,
     headline = 'Headline',
@@ -187,7 +202,15 @@ function CardCTA({
     const avatarModes = { ...modes, 'Avatar Size': 'L' }
 
     const buttonModes = {...modes, AppearanceBrand: 'Secondary', 'Button / Size': 'S'}
-    const iconButtonModes = {'Button / Size': 'S', 'Emphasis': 'Low', 'AppearanceBrand':'Neutral',...modes }
+    // Rating footer IconButtons are Neutral / S / Low per Figma. Apply those
+    // AFTER cascaded modes so card-level AppearanceBrand (often Secondary)
+    // cannot override the footer chrome.
+    const iconButtonModes: Modes = {
+        ...modes,
+        'Button / Size': 'S',
+        Emphasis: 'Low',
+        AppearanceBrand: 'Neutral',
+    }
     const effectiveButtonLabel = buttonLabel ?? (isRating ? 'Save' : 'Button')
     const nonWrappingButtonLabel = effectiveButtonLabel.replace(/\s/g, '\u00A0')
     const [measuredButtonLabelWidth, setMeasuredButtonLabelWidth] = React.useState<number | null>(null)
@@ -261,6 +284,15 @@ function CardCTA({
         borderColor,
         flexDirection: isRating || isSip ? 'column' : 'row',
         overflow: 'visible',
+        // Rating cards fill equal-height carousel slots and pin the footer down
+        // when free space exists; intrinsic height is unchanged when not stretched.
+        ...(isRating
+            ? {
+                alignSelf: 'stretch',
+                justifyContent: 'space-between' as const,
+                flexGrow: 1,
+            }
+            : {}),
     }
 
     // NOTE: `minWidth: 0` + explicit `flexShrink: 1` are required on native.
@@ -417,16 +449,24 @@ function CardCTA({
         paddingVertical: ratingContentPaddingV,
         gap: ratingContentGap,
         alignItems: 'flex-start',
+        alignSelf: 'stretch',
+    }
+
+    const ratingMediaStyle: ViewStyle = {
+        alignSelf: 'stretch',
+        width: '100%',
+        alignItems: ratingMediaAlign === 'center' ? 'center' : 'flex-start',
     }
 
     const ratingFooterStyle: ViewStyle = {
         flexDirection: 'row',
         alignItems: 'flex-start',
-        justifyContent: 'space-between',
+        justifyContent: showButton ? 'space-between' : 'flex-start',
         paddingHorizontal: ratingFooterPaddingH,
         paddingTop: ratingFooterPaddingTop,
         paddingBottom: ratingFooterPaddingBottom,
         overflow: 'visible',
+        alignSelf: 'stretch',
     }
 
     const buttonLabelStyle: TextStyle = {
@@ -503,30 +543,34 @@ function CardCTA({
         return (
             <View style={[containerStyle, style]}>
                 <View style={ratingContentStyle}>
-                    {ratingBadgeSlot ? (
-                        cloneChildrenWithModes(ratingBadgeSlot, modes)
-                    ) : (
-                        <Badge label={ratingLabel} modes={modes} />
-                    )}
+                    <View style={ratingMediaStyle}>
+                        {ratingBadgeSlot ? (
+                            cloneChildrenWithModes(ratingBadgeSlot, modes)
+                        ) : (
+                            <Badge label={ratingLabel} modes={modes} />
+                        )}
+                    </View>
                     <View style={textWrapStyle}>
                         <Text style={titleStyle}>{title}</Text>
                         <Text style={bodyStyle}>{body}</Text>
                     </View>
                 </View>
                 <View style={ratingFooterStyle}>
-                    <View style={ratingButtonWrapStyle}>
-                        {buttonSlot ? (
-                            cloneChildrenWithModes(buttonSlot, buttonModes)
-                        ) : (
-                            <Button
-                                label={effectiveButtonLabel}
-                                onPress={onPressButton || (() => {})}
-                                modes={buttonModes}
-                                style={ratingButtonStyle}
-                                renderContent={renderButtonContent(ratingButtonLabelStyle)}
-                            />
-                        )}
-                    </View>
+                    {showButton ? (
+                        <View style={ratingButtonWrapStyle}>
+                            {buttonSlot ? (
+                                cloneChildrenWithModes(buttonSlot, buttonModes)
+                            ) : (
+                                <Button
+                                    label={effectiveButtonLabel}
+                                    onPress={onPressButton || (() => {})}
+                                    modes={buttonModes}
+                                    style={ratingButtonStyle}
+                                    renderContent={renderButtonContent(ratingButtonLabelStyle)}
+                                />
+                            )}
+                        </View>
+                    ) : null}
                     {showRatingActions ? (
                         ratingActionsSlot ? (
                             cloneChildrenWithModes(ratingActionsSlot, iconButtonModes)
@@ -535,11 +579,13 @@ function CardCTA({
                                 <IconButton
                                     iconName="ic_like"
                                     accessibilityLabel="Like"
+                                    modes={iconButtonModes}
                                     {...(onPressLike ? { onPress: onPressLike } : {})}
                                 />
                                 <IconButton
                                     iconName="ic_dislike"
                                     accessibilityLabel="Dislike"
+                                    modes={iconButtonModes}
                                     {...(onPressDislike ? { onPress: onPressDislike } : {})}
                                 />
                             </ButtonGroup>

package/src/components/Carousel/Carousel.tsx

@@ -67,16 +67,44 @@ export interface CarouselProps {
   gap?: number
   /** Width of each carousel item. When undefined, items take full container width. */
   itemWidth?: number
+  /**
+   * Inset from each horizontal edge of the carousel to the active item.
+   * Sets scroll `paddingHorizontal` to this value and, when `itemWidth` is
+   * omitted, derives `itemWidth` as `containerWidth - itemInset * 2`.
+   * Prefer this over manually pairing `itemWidth` + `paddingHorizontal`.
+   */
+  itemInset?: number
+  /**
+   * Negative horizontal margin (px) so the carousel can bleed past a padded
+   * parent (e.g. Section / VStack). Combine with `itemInset` for
+   * screen-edge-aligned cards without consumer math.
+   */
+  bleedHorizontal?: number
   /**
    * Explicit horizontal padding (px) for the scroll content. When provided it
    * overrides the token-derived padding verbatim — the built-in `carousel/
    * padding/horizontal × 2` "peek" multiplier is NOT applied. Use this for
    * presets (e.g. the account-card strip) whose own tokens define a flush,
-   * non-peeking layout.
+   * non-peeking layout. Ignored when `itemInset` is set.
    */
   paddingHorizontal?: number
   /** Explicit vertical padding (px) for the outer container. Overrides `carousel/padding/vertical`. */
   paddingVertical?: number
+  /**
+   * When true (default), every slide stretches to the tallest slide's height
+   * so mixed-content cards share one row height. Set `false` to keep each
+   * slide at its intrinsic height.
+   */
+  equalHeight?: boolean
+  /**
+   * Hard max height for the carousel shell.
+   * - `undefined` (default): apply the `carousel/maxHeight` token only when
+   *   `equalHeight` is `false` (legacy clipped strip). With `equalHeight`
+   *   (default) the shell hugs content and is not clipped.
+   * - `number`: always apply that max height.
+   * - `false`: never apply a max height.
+   */
+  maxHeight?: number | false
   /**
    * Carousel visual type.
    * - `'Default'` — standard carousel with dot pagination below.
@@ -104,8 +132,12 @@ export function Carousel({
   loop = true,
   gap: gapProp,
   itemWidth: itemWidthProp,
+  itemInset,
+  bleedHorizontal,
   paddingHorizontal: paddingHorizontalProp,
   paddingVertical: paddingVerticalProp,
+  equalHeight = true,
+  maxHeight: maxHeightProp,
   type = 'Default',
 
   onIndexChange,
@@ -127,7 +159,7 @@ export function Carousel({
     getVariableByName('carousel/padding/vertical', modes),
   )
   // Outer container max height per Figma (`carousel/maxHeight`).
-  const maxHeight = parseFloat(
+  const tokenMaxHeight = parseFloat(
     getVariableByName('carousel/maxHeight', modes),
   )
   // Gap between AutoplayControl and NumberPagination in the Numbered overlay.
@@ -165,15 +197,18 @@ export function Carousel({
 
   const totalItems = items.length
 
-  // Effective item width: provided prop, or full container width minus peek offsets.
+  // Effective item width: explicit prop, itemInset derivation, or token peek.
   // For the Numbered variant the items are full-bleed (no peek padding).
   const effectiveItemWidth = useMemo(() => {
     if (itemWidthProp != null) return itemWidthProp
     if (containerWidth === 0) return 0
     if (isNumbered) return containerWidth
+    if (itemInset != null) {
+      return Math.max(0, containerWidth - itemInset * 2)
+    }
     // Full-width minus peekOffset on each side
     return containerWidth - containerPaddingH * 4
-  }, [itemWidthProp, containerWidth, containerPaddingH, isNumbered])
+  }, [itemWidthProp, itemInset, containerWidth, containerPaddingH, isNumbered])
 
   // Snap interval = item width + gap
   const snapInterval = effectiveItemWidth + gap
@@ -345,15 +380,31 @@ export function Carousel({
   }, [isPlaying, startAutoPlay, clearAutoPlay])
 
   // ---- Render ----
-  // Explicit padding props win verbatim; otherwise fall back to the
-  // token-derived values (horizontal keeps its legacy ×2 "peek" multiplier).
-  // Numbered variant is full-bleed: zero padding.
-  const effectivePaddingH = isNumbered ? 0 : (paddingHorizontalProp ?? containerPaddingH)
+  // Padding priority: Numbered → 0; itemInset → inset; explicit padding →
+  // verbatim; else token (legacy ×2 peek is applied via item width, not here).
+  const effectivePaddingH = isNumbered
+    ? 0
+    : (itemInset ?? paddingHorizontalProp ?? containerPaddingH)
   const effectivePaddingV = isNumbered ? 0 : (paddingVerticalProp ?? containerPaddingV)
 
+  // Equal-height rows hug content — don't clip with the token maxHeight unless
+  // the caller opts into a numeric max (or disables equalHeight for legacy strips).
+  const resolvedMaxHeight = isNumbered
+    ? undefined
+    : maxHeightProp === false
+      ? undefined
+      : typeof maxHeightProp === 'number'
+        ? maxHeightProp
+        : equalHeight
+          ? undefined
+          : tokenMaxHeight
+
   const outerStyle: ViewStyle = {
     paddingVertical: effectivePaddingV,
-    maxHeight: isNumbered ? undefined : maxHeight,
+    maxHeight: resolvedMaxHeight,
+    ...(bleedHorizontal != null
+      ? { marginHorizontal: -Math.abs(bleedHorizontal) }
+      : {}),
     // Numbered needs relative positioning for the floating controls overlay.
     ...(isNumbered ? { overflow: 'hidden' as const } : {}),
   }
@@ -361,8 +412,8 @@ export function Carousel({
   const contentContainerStyle: ViewStyle = {
     paddingHorizontal: effectivePaddingH,
     gap,
-    // Align items to the start so snap works correctly
-    alignItems: 'flex-start',
+    // Stretch so every slide matches the tallest (default). Opt out with equalHeight={false}.
+    alignItems: equalHeight ? 'stretch' : 'flex-start',
   }
 
   return (
@@ -394,6 +445,7 @@ export function Carousel({
               flexShrink: 0,
               flexBasis: effectiveItemWidth > 0 ? effectiveItemWidth : 'auto',
               overflow: 'hidden',
+              ...(equalHeight ? { alignSelf: 'stretch' } : {}),
             }
 
             // The cloned style forces the child's outer node to also honor the
@@ -402,8 +454,11 @@ export function Carousel({
             const childOverrideStyle: ViewStyle = {
               width: effectiveItemWidth > 0 ? effectiveItemWidth : undefined,
               maxWidth: effectiveItemWidth > 0 ? effectiveItemWidth : undefined,
-              flexGrow: 0,
+              flexGrow: equalHeight ? 1 : 0,
               flexShrink: 0,
+              ...(equalHeight
+                ? { alignSelf: 'stretch', height: '100%' as const }
+                : {}),
             }
 
             // Pass modes down to children