jfs-components 0.0.79 → 0.0.85

package/src/components/ListItem/ListItem.tsx

@@ -11,7 +11,6 @@ import {
   type PressableStateCallbackType,
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
-import IconCapsule from '../IconCapsule/IconCapsule'
 import NavArrow from '../NavArrow/NavArrow'
 import { usePressableWebSupport, type WebAccessibilityProps } from '../../utils/web-platform-utils'
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
@@ -21,8 +20,8 @@ type ListItemProps = {
   title?: string;
   supportText?: string;
   showSupportText?: boolean;
-  /** Leading slot (Figma "leading"). Defaults to an `IconCapsule` when omitted. */
-  leading?: React.ReactNode;
+  /** Leading slot (Figma "leading"). Omitted or `null` renders nothing. */
+  leading?: React.ReactNode | null;
   supportSlot?: React.ReactNode;
   /** Trailing slot (Figma "trailing"), e.g. `MoneyValue` or `Button`. Horizontal layout only. */
   trailing?: React.ReactNode;
@@ -188,7 +187,7 @@ const verticalSupportTextOverride: TextStyle = { textAlign: 'center' }
  * @param {string} [props.title='Title'] - Primary title used in the horizontal layout.
  * @param {string} [props.supportText='Support Text'] - Support text used in both layouts when `supportSlot` is not provided.
  * @param {boolean} [props.showSupportText=true] - Toggles rendering of the support text in Horizontal layout.
- * @param {React.ReactNode} [props.leading] - Optional leading slot. Defaults to `IconCapsule`.
+ * @param {React.ReactNode|null} [props.leading] - Optional leading slot. Omitted or `null` renders nothing.
  * @param {React.ReactNode} [props.supportSlot] - Optional custom slot used instead of the default support text block.
  * @param {React.ReactNode} [props.trailing] - Optional trailing slot (Figma Slot "trailing"). Horizontal layout only.
  * @param {boolean} [props.navArrow=true] - Whether to show NavArrow on the far right (Horizontal layout only).
@@ -263,16 +262,15 @@ function ListItemImpl({
   // Process leading slot to pass modes to children. Memoized on
   // (leading, resolvedModes) so a parent re-render doesn't re-walk the tree.
   const leadingElement = useMemo(() => {
-    const processed = leading
-      ? cloneChildrenWithModes(
-          React.Children.toArray(leading),
-          tokens.resolvedModes,
-          SLOT_FORCED_MODES
-        )
-      : []
-    if (processed.length === 0) {
-      return <IconCapsule modes={tokens.resolvedModes} accessibilityLabel={undefined} />
-    }
+    if (leading == null) return null
+
+    const processed = cloneChildrenWithModes(
+      React.Children.toArray(leading),
+      tokens.resolvedModes,
+      SLOT_FORCED_MODES
+    )
+    if (processed.length === 0) return null
+
     return processed.length === 1 ? processed[0] : processed
   }, [leading, tokens.resolvedModes])
 
@@ -373,7 +371,7 @@ function ListItemImpl({
   if (layout === 'Horizontal') {
     const innerContent = (
       <View style={innerContentStyleArray}>
-        {leadingElement}
+        {leadingElement ?? null}
         <View
           style={{
             flex: 1,
@@ -431,7 +429,7 @@ function ListItemImpl({
   // Vertical layout — icon on top, support text/slot below
   const verticalContent = (
     <View style={verticalContentStyleArray}>
-      {leadingElement}
+      {leadingElement ?? null}
       {renderSupportContent()}
     </View>
   )

package/src/components/MessageField/MessageField.tsx

@@ -1,8 +1,7 @@
-import React, { useCallback, useMemo, useRef, useState } from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
 import {
     View,
     Text,
-    Pressable,
     TextInput as RNTextInput,
     type StyleProp,
     type TextInputProps as RNTextInputProps,
@@ -297,15 +296,6 @@ function MessageField({
     const [isFocused, setIsFocused] = useState(false)
     const interactive = !isDisabled && !isReadOnly
 
-    // Ref to the native textarea so tapping anywhere in the (padded) textarea
-    // container focuses it on the FIRST tap, fixing the Android "two taps to
-    // open the keyboard" issue.
-    const inputRef = useRef<RNTextInput>(null)
-    const focusInput = useCallback(() => {
-        if (!interactive) return
-        inputRef.current?.focus()
-    }, [interactive])
-
     const { modes: globalModes } = useTokens()
     const baseModes = useMemo(
         () => ({ ...globalModes, ...propModes }),
@@ -508,13 +498,8 @@ function MessageField({
                 </View>
             )}
 
-            <Pressable
-                style={[textareaContainerStyle, textareaStyle]}
-                onPress={focusInput}
-                accessible={false}
-            >
+            <View style={[textareaContainerStyle, textareaStyle]}>
                 <RNTextInput
-                    ref={inputRef}
                     multiline
                     value={currentValue}
                     onChangeText={handleChangeText}
@@ -529,7 +514,7 @@ function MessageField({
                     accessibilityHint={accessibilityHint}
                     style={[inputTextStyle, inputStyle]}
                 />
-            </Pressable>
+            </View>
 
             {shouldShowCounter && (
                 <Text style={counterTextStyle} accessibilityElementsHidden>

package/src/components/MetricLegendItem/MetricLegendItem.tsx

@@ -22,6 +22,12 @@ export type MetricLegendItemProps = {
      * `metricLegendItem/indicator/bg` design token.
      */
     indicatorColor?: string
+    /**
+     * Shape of the leading indicator. `'dot'` (default) renders the small
+     * circle used in categorical legends; `'line'` renders a short
+     * horizontal bar, matching the legend of a line chart.
+     */
+    indicatorShape?: 'dot' | 'line'
     /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
     modes?: Record<string, any>
     /** Override container styles. */
@@ -46,6 +52,7 @@ function MetricLegendItem({
     label = 'Current (4 months)',
     value,
     indicatorColor,
+    indicatorShape = 'dot',
     modes = EMPTY_MODES,
     style,
     indicatorStyle,
@@ -107,12 +114,19 @@ function MetricLegendItem({
         >
             <View
                 style={[
-                    {
-                        width: indicatorSize,
-                        height: indicatorSize,
-                        borderRadius: indicatorRadius,
-                        backgroundColor: indicatorBg,
-                    },
+                    indicatorShape === 'line'
+                        ? {
+                              width: indicatorSize * 2,
+                              height: Math.max(2, Math.round(indicatorSize / 4)),
+                              borderRadius: indicatorRadius,
+                              backgroundColor: indicatorBg,
+                          }
+                        : {
+                              width: indicatorSize,
+                              height: indicatorSize,
+                              borderRadius: indicatorRadius,
+                              backgroundColor: indicatorBg,
+                          },
                     indicatorStyle,
                 ]}
             />

package/src/components/PaymentFeedback/PaymentFeedback.tsx

@@ -1,9 +1,9 @@
-import React, { type ReactNode, isValidElement, cloneElement } from 'react'
+import React, { type ReactNode } from 'react'
 import { View, Text, type ViewStyle, type TextStyle } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import IconCapsule from '../IconCapsule/IconCapsule'
-import { EMPTY_MODES } from '../../utils/react-utils'
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
 
 export type PaymentFeedbackProps = {
   /** Large heading text, typically a monetary value (e.g. "₹50,000") */
@@ -20,7 +20,11 @@ export type PaymentFeedbackProps = {
   iconName?: string
   /** Optional custom media slot that replaces the default IconCapsule */
   renderMedia?: ReactNode
-  /** Mode configuration for design tokens */
+  /**
+   * Mode configuration for design tokens. Also drives the default
+   * IconCapsule's color — pass `AppearanceSystem: 'positive' | 'warning' |
+   * 'negative'` to render a green/orange/red capsule (defaults to `positive`).
+   */
   modes?: Record<string, any>
   style?: ViewStyle
 }
@@ -28,7 +32,7 @@ export type PaymentFeedbackProps = {
 export default function PaymentFeedback({
   title = '₹50,000',
   subtitle = 'Payment successful',
-  body = 'Your payment has been\nsuccessfully processed.',
+  body,
   details = '18 March 2025, 4:15 pm\nTransaction ID: TXN121466784',
   showDetails = true,
   iconName = 'ic_confirm',
@@ -123,14 +127,17 @@ export default function PaymentFeedback({
     textAlign: 'center',
   }
 
-  const mediaContent = isValidElement(renderMedia)
-    ? cloneElement(renderMedia as React.ReactElement<any>, { modes })
-    : renderMedia
+  // Cascade modes into a custom media slot (per the modes-cascade convention);
+  // any modes the consumer set on the slot child still take precedence.
+  const mediaContent =
+    renderMedia != null ? cloneChildrenWithModes(renderMedia, modes) : null
 
   const defaultMedia = (
     <IconCapsule
       iconName={iconName}
-      modes={{ ...modes, 'Icon Capsule Size': 'L', Emphasis: 'High', 'Semantic Intent': 'System', AppearanceSystem: 'positive' }}
+      // `positive` is the default; consumers override the capsule color by
+      // passing `AppearanceSystem` (or any other mode) via the `modes` prop.
+      modes={{ AppearanceSystem: 'positive', ...modes, 'Icon Capsule Size': 'L', Emphasis: 'High', 'Semantic Intent': 'System' }}
     />
   )
 

package/src/components/PlanComparisonCard/PlanComparisonCard.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react';
+import React from 'react';
 import {
     View,
     Text,
@@ -7,12 +7,15 @@ import {
     type StyleProp,
     type ViewStyle,
     type TextStyle,
-    type LayoutChangeEvent,
 } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
 import Icon from '../../icons/Icon';
 
+/** Figma grid: label column 1.8fr, each plan column 1fr. */
+const LABEL_COLUMN_FR = 1.8;
+const PLAN_COLUMN_FR = 1;
+
 /**
  * A single plan column header (the label column has no header of its own).
  */
@@ -69,13 +72,6 @@ export type PlanComparisonCardProps = {
     columns?: PlanComparisonColumn[];
     /** Feature rows compared across the plan columns. */
     rows?: PlanComparisonRow[];
-    /**
-     * Minimum flex-grow on the label column when the table is given extra
-     * horizontal space. Plan columns always size to their content and never
-     * shrink below it.
-     * @default 0
-     */
-    labelColumnFlex?: number;
     /** Design token modes for theming (e.g. `{ "Color Mode": "Light" }`). */
     modes?: Record<string, any>;
     /** Override the outer container style. */
@@ -93,92 +89,40 @@ const DEFAULT_ROWS: PlanComparisonRow[] = [
     { label: 'Bonus JioGold', showInfo: true, values: [false, '1%'] },
 ];
 
+/** Keeps every text layer on a single line. */
+const NO_WRAP_TEXT: TextStyle = {
+    flexShrink: 0,
+    ...(Platform.OS === 'web' ? { whiteSpace: 'nowrap' as const } : {}),
+};
+
+const labelColumnStyle: ViewStyle = {
+    flex: LABEL_COLUMN_FR,
+    minWidth: 0,
+};
+
+const planColumnStyle: ViewStyle = {
+    flex: PLAN_COLUMN_FR,
+    minWidth: 0,
+    alignItems: 'center',
+};
+
 /**
  * PlanComparisonCard renders a compact comparison table that pits the user's
  * current plan against one or more alternative plans across a set of feature
  * rows. Implementation of Figma node `4498:2968` (`PlanComparisonCard`).
  *
- * The leading column holds feature labels (with an optional info icon); every
- * other column maps to a plan in `columns`. Each cell value can be plain text,
- * a "not available" cross (`false`), or any custom React node.
+ * Columns use a 1.8fr / 1fr flex ratio (label vs plan), matching the Figma grid.
  *
  * @component
- * @example
- * ```tsx
- * <PlanComparisonCard
- *   columns={[{ label: 'Your plan' }, { label: 'JioFinance+', brand: true }]}
- *   rows={[
- *     { label: 'JioPoints multiplier', values: ['1x', '1.25x'] },
- *     { label: 'Cashback', showInfo: true, values: [false, 'Upto ₹5000'] },
- *   ]}
- * />
- * ```
  */
-/** Keeps every text layer on a single line; columns grow to fit content. */
-const NO_WRAP_TEXT: TextStyle = {
-    flexShrink: 0,
-    ...(Platform.OS === 'web' ? { whiteSpace: 'nowrap' as const } : {}),
-};
-
 function PlanComparisonCard({
     columns = DEFAULT_COLUMNS,
     rows = DEFAULT_ROWS,
-    labelColumnFlex = 0,
     modes = EMPTY_MODES,
     style,
 }: PlanComparisonCardProps) {
-    /** Natural widths from header labels (plan columns only). */
-    const [headerWidths, setHeaderWidths] = useState<(number | undefined)[]>([]);
-    /** Natural widths from table body columns. */
-    const [bodyWidths, setBodyWidths] = useState<(number | undefined)[]>([]);
-
-    const setMeasuredWidth = useCallback(
-        (
-            setter: React.Dispatch<React.SetStateAction<(number | undefined)[]>>,
-            index: number,
-            width: number,
-        ) => {
-            setter((prev) => {
-                if (prev[index] === width) return prev;
-                const next = [...prev];
-                next[index] = width;
-                return next;
-            });
-        },
-        [],
-    );
-
-    const onHeaderColumnLayout = useCallback(
-        (index: number, event: LayoutChangeEvent) => {
-            setMeasuredWidth(setHeaderWidths, index, event.nativeEvent.layout.width);
-        },
-        [setMeasuredWidth],
-    );
-
-    const onBodyColumnLayout = useCallback(
-        (index: number, event: LayoutChangeEvent) => {
-            setMeasuredWidth(setBodyWidths, index, event.nativeEvent.layout.width);
-        },
-        [setMeasuredWidth],
-    );
-
-    /**
-     * Shared width for header + body cells in a column (max of natural header
-     * label vs body content). No columnGap between columns — gaps would shift
-     * headers relative to the flush table grid below.
-     */
-    const columnWidthStyle = (index: number): ViewStyle => {
-        const width = Math.max(headerWidths[index] ?? 0, bodyWidths[index] ?? 0);
-        if (width > 0) {
-            return { width, minWidth: width, flexShrink: 0, flexGrow: 0 };
-        }
-        return { flexShrink: 0, flexGrow: 0 };
-    };
-
-    // Container
     const gap = (getVariableByName('planComparisonCard/gap', modes) as number) ?? 16;
 
-    // Header
     const headerFg = (getVariableByName('planComparisonCard/header/fg', modes) as string) ?? '#ffffff';
     const headerBrandFg = (getVariableByName('planComparisonCard/header/brand/fg', modes) as string) ?? '#cea15a';
     const headerFontSize = (getVariableByName('planComparisonCard/header/fontSize', modes) as number) ?? 14;
@@ -186,20 +130,17 @@ function PlanComparisonCard({
     const headerLineHeight = (getVariableByName('planComparisonCard/header/lineHeight', modes) as number) ?? 18;
     const headerFontWeight = (getVariableByName('planComparisonCard/header/fontWeight', modes) as number | string) ?? '500';
 
-    // Table
     const tableBackground = (getVariableByName('planComparisonCard/tableRow/background', modes) as string) ?? '#141414';
     const tableRadius = (getVariableByName('planComparisonCard/tableRow/radius', modes) as number) ?? 16;
     const tableBorderSize = (getVariableByName('planComparisonCard/tableRow/border/size', modes) as number) ?? 1;
     const tableBorderColor = (getVariableByName('planComparisonCard/tableRow/border/color', modes) as string) ?? '#1e1a14';
 
-    // Cell
     const cellPadding = (getVariableByName('planComparisonCard/tableCell/padding', modes) as number) ?? 12;
     const cellGap = (getVariableByName('planComparisonCard/tableCell/gap', modes) as number) ?? 2;
     const cellMinHeight = (getVariableByName('planComparisonCard/tableCell/height', modes) as number) ?? 46;
     const cellBorderSize = (getVariableByName('planComparisonCard/tableCell/border/size', modes) as number) ?? 1;
     const cellBorderColor = (getVariableByName('planComparisonCard/tableCell/border/color', modes) as string) ?? '#1e1a14';
 
-    // Cell label
     const labelColor = (getVariableByName('planComparisonCard/tableCell/label/color', modes) as string) ?? '#ffffff';
     const labelDisabledColor = (getVariableByName('planComparisonCard/tableCell/label/disabled/color', modes) as string) ?? '#91949c';
     const labelFontSize = (getVariableByName('planComparisonCard/tableCell/label/fontSize', modes) as number) ?? 12;
@@ -207,14 +148,12 @@ function PlanComparisonCard({
     const labelLineHeight = (getVariableByName('planComparisonCard/tableCell/label/lineHeight', modes) as number) ?? 16;
     const labelFontWeight = (getVariableByName('planComparisonCard/tableCell/label/fontWeight', modes) as number | string) ?? '400';
 
-    // Cell value
     const valueColor = (getVariableByName('planComparisonCard/tableCell/value/color', modes) as string) ?? '#ffffff';
     const valueFontSize = (getVariableByName('planComparisonCard/tableCell/value/fontSize', modes) as number) ?? 12;
     const valueFontFamily = (getVariableByName('planComparisonCard/tableCell/value/fontFamily', modes) as string) ?? 'JioType Var';
     const valueLineHeight = (getVariableByName('planComparisonCard/tableCell/value/lineHeight', modes) as number) ?? 16;
     const valueFontWeight = (getVariableByName('planComparisonCard/tableCell/value/fontWeight', modes) as number | string) ?? '500';
 
-    // Icon
     const iconColor = (getVariableByName('planComparisonCard/icon/color', modes) as string) ?? '#ffffff';
     const iconSize = (getVariableByName('planComparisonCard/icon/size', modes) as number) ?? 16;
 
@@ -248,13 +187,29 @@ function PlanComparisonCard({
         textAlign: 'center',
     };
 
-    const planHeaderColumnStyle: ViewStyle = {
+    const rowStyle: ViewStyle = {
+        flexDirection: 'row',
+        width: '100%',
+    };
+
+    const labelCellStyle: ViewStyle = {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: cellGap,
+        padding: cellPadding,
+        minHeight: cellMinHeight,
+    };
+
+    const valueCellStyle: ViewStyle = {
+        flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'center',
+        padding: cellPadding,
+        minHeight: cellMinHeight,
+        width: '100%',
     };
 
     const renderValue = (value: PlanComparisonCellValue, cellKey: React.Key) => {
-        // "Not available" → muted cross icon.
         if (value === false) {
             return (
                 <Icon
@@ -265,11 +220,9 @@ function PlanComparisonCard({
                 />
             );
         }
-        // Empty cell.
         if (value === null || value === undefined || value === true) {
             return null;
         }
-        // Text content.
         if (typeof value === 'string' || typeof value === 'number') {
             return (
                 <Text key={cellKey} style={valueTextStyle}>
@@ -277,67 +230,32 @@ function PlanComparisonCard({
                 </Text>
             );
         }
-        // Custom node — forward modes so themed children stay in sync.
         return cloneChildrenWithModes(value, modes);
     };
 
-    const labelCellStyle: ViewStyle = {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: cellGap,
-        padding: cellPadding,
-        minHeight: cellMinHeight,
-        flexShrink: 0,
-    };
-
-    const valueCellStyle: ViewStyle = {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-        padding: cellPadding,
-        minHeight: cellMinHeight,
-        flexShrink: 0,
-    };
-
     return (
-        <View style={[{ gap, alignSelf: 'flex-start' }, style]}>
-            {/* Headers above table — same column grid as body (no columnGap) */}
-            <View style={{ flexDirection: 'row', alignItems: 'flex-end' }}>
-                <View
-                    style={[
-                        columnWidthStyle(0),
-                        labelColumnFlex > 0 ? { flexGrow: labelColumnFlex } : undefined,
-                    ]}
-                />
-                {columns.map((column, index) => {
-                    const colIndex = index + 1;
-                    return (
-                        <View
-                            key={column.label ?? index}
-                            onLayout={(e) => onHeaderColumnLayout(colIndex, e)}
-                            style={[columnWidthStyle(colIndex), planHeaderColumnStyle]}
+        <View style={[{ gap, width: '100%' }, style]}>
+            {/* Header row — same 1.8fr / 1fr grid as the table */}
+            <View style={rowStyle}>
+                <View style={labelColumnStyle} />
+                {columns.map((column, index) => (
+                    <View key={column.label ?? index} style={planColumnStyle}>
+                        <Text
+                            style={[
+                                headerTextStyle,
+                                { color: column.brand ? headerBrandFg : headerFg },
+                            ]}
                         >
-                            <Text
-                                style={[
-                                    headerTextStyle,
-                                    {
-                                        color: column.brand ? headerBrandFg : headerFg,
-                                        alignSelf: 'center',
-                                    },
-                                ]}
-                            >
-                                {column.label}
-                            </Text>
-                        </View>
-                    );
-                })}
+                            {column.label}
+                        </Text>
+                    </View>
+                ))}
             </View>
 
-            {/* Single rounded table — columns size to their widest cell */}
+            {/* Table body */}
             <View
                 style={{
-                    flexDirection: 'row',
-                    alignSelf: 'flex-start',
+                    width: '100%',
                     backgroundColor: tableBackground,
                     borderWidth: tableBorderSize,
                     borderColor: tableBorderColor,
@@ -345,27 +263,21 @@ function PlanComparisonCard({
                     overflow: 'hidden',
                 }}
             >
-                <View
-                    onLayout={(e) => onBodyColumnLayout(0, e)}
-                    style={[
-                        columnWidthStyle(0),
-                        labelColumnFlex > 0 ? { flexGrow: labelColumnFlex } : undefined,
-                    ]}
-                >
-                    {rows.map((row, rowIndex) => {
-                        const isLast = rowIndex === rows.length - 1;
-                        const showInfo = row.showInfo || row.onInfoPress != null;
-                        return (
-                            <View
-                                key={row.key ?? `${row.label}-${rowIndex}`}
-                                style={[
-                                    labelCellStyle,
-                                    {
-                                        borderBottomWidth: isLast ? 0 : cellBorderSize,
-                                        borderBottomColor: cellBorderColor,
-                                    },
-                                ]}
-                            >
+                {rows.map((row, rowIndex) => {
+                    const isLast = rowIndex === rows.length - 1;
+                    const showInfo = row.showInfo || row.onInfoPress != null;
+                    return (
+                        <View
+                            key={row.key ?? `${row.label}-${rowIndex}`}
+                            style={[
+                                rowStyle,
+                                {
+                                    borderBottomWidth: isLast ? 0 : cellBorderSize,
+                                    borderBottomColor: cellBorderColor,
+                                },
+                            ]}
+                        >
+                            <View style={[labelColumnStyle, labelCellStyle]}>
                                 <Text style={labelTextStyle}>{row.label}</Text>
                                 {showInfo &&
                                     (row.onInfoPress ? (
@@ -381,41 +293,19 @@ function PlanComparisonCard({
                                         <Icon name="ic_info" size={iconSize} color={iconColor} />
                                     ))}
                             </View>
-                        );
-                    })}
-                </View>
 
-                {columns.map((column, colIndex) => {
-                    const colIndexWidth = colIndex + 1;
-                    return (
-                    <View
-                        key={column.label ?? colIndex}
-                        onLayout={(e) => onBodyColumnLayout(colIndexWidth, e)}
-                        style={[columnWidthStyle(colIndexWidth), planHeaderColumnStyle]}
-                    >
-                        {rows.map((row, rowIndex) => {
-                            const isLast = rowIndex === rows.length - 1;
-                            return (
+                            {columns.map((column, colIndex) => (
                                 <View
-                                    key={row.key ?? `${row.label}-${rowIndex}`}
-                                    style={[
-                                        valueCellStyle,
-                                        {
-                                            borderBottomWidth: isLast ? 0 : cellBorderSize,
-                                            borderBottomColor: cellBorderColor,
-                                        },
-                                    ]}
+                                    key={column.label ?? colIndex}
+                                    style={[planColumnStyle, valueCellStyle]}
                                 >
-                                    <View style={{ flexShrink: 0 }}>
-                                        {renderValue(
-                                            row.values?.[colIndex],
-                                            `${rowIndex}-${colIndex}`,
-                                        )}
-                                    </View>
+                                    {renderValue(
+                                        row.values?.[colIndex],
+                                        `${rowIndex}-${colIndex}`,
+                                    )}
                                 </View>
-                            );
-                        })}
-                    </View>
+                            ))}
+                        </View>
                     );
                 })}
             </View>