jfs-components 0.1.2 → 0.1.12

package/src/components/Stack/Stack.tsx

@@ -0,0 +1,131 @@
+import React, { useMemo } from 'react'
+import { View, type StyleProp, type ViewProps, type ViewStyle } from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { useTokens } from '../../design-tokens/JFSThemeProvider'
+import { cloneChildrenWithModes, EMPTY_MODES, injectChildStyle } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
+
+export type StackLayoutDirection = 'vertical' | 'horizontal'
+
+export type StackProps = ViewProps & {
+  /**
+   * Content laid out inside the stack. `modes` are cascaded to every child via
+   * {@link cloneChildrenWithModes}.
+   */
+  children?: React.ReactNode
+  /**
+   * Main-axis direction for stack children. Matches the Figma Slot variant:
+   * - `vertical` (default): stacks children in a column
+   * - `horizontal`: arranges children in a row
+   */
+  layoutDirection?: StackLayoutDirection
+  /**
+   * Alignment along the cross axis.
+   * Defaults to `stretch` for vertical and `flex-start` for horizontal.
+   */
+  alignCrossAxis?: ViewStyle['alignItems']
+  /**
+   * Distribution along the main axis (maps to `justifyContent`).
+   */
+  justifyMainAxis?: ViewStyle['justifyContent']
+  /**
+   * Only meaningful when `layoutDirection` is `horizontal`.
+   *
+   * When true, forces every child to share the height of the tallest child. The
+   * height is enforced by the stack itself (`alignItems: 'stretch'` plus an
+   * injected `alignSelf: 'stretch'` on each child), so children can no longer
+   * opt out via their own `alignSelf`. Children with an explicit `height` keep
+   * that height, since a fixed cross-axis dimension defeats stretch in Yoga.
+   *
+   * Overrides `alignCrossAxis` when it applies.
+   */
+  equalHeight?: boolean
+  /**
+   * Only meaningful when `layoutDirection` is `vertical`.
+   *
+   * When true, forces every child to fill the full width of the stack. The width
+   * is enforced by the stack itself (`alignItems: 'stretch'` plus an injected
+   * `alignSelf: 'stretch'` on each child), so children can no longer opt out via
+   * their own `alignSelf`. Children with an explicit `width` keep that width,
+   * since a fixed cross-axis dimension defeats stretch in Yoga.
+   *
+   * Overrides `alignCrossAxis` when it applies.
+   */
+  fillWidth?: boolean
+  /**
+   * Mode configuration passed to the token resolver and cascaded to children.
+   */
+  modes?: Modes
+  style?: StyleProp<ViewStyle>
+}
+
+/**
+ * Stack — a token-driven layout container for grouped content.
+ *
+ * Use `Stack` instead of a raw `View` when you need a vertical or horizontal
+ * stack with design-token gap spacing and automatic `modes` propagation to
+ * children. Typical usage is nesting a column of actions inside a
+ * direction-locked parent such as `ActionFooter`:
+ *
+ * @example
+ * ```tsx
+ * <ActionFooter modes={modes}>
+ *   <Stack layoutDirection="vertical" modes={modes}>
+ *     <Button label="Continue" modes={primaryModes} />
+ *     <Disclaimer disclaimer="Terms apply." modes={modes} />
+ *   </Stack>
+ * </ActionFooter>
+ * ```
+ *
+ * @remarks
+ * Previously named `Slot`. The `Slot` export is preserved as a deprecated alias
+ * for backward compatibility.
+ */
+function Stack({
+  children,
+  layoutDirection = 'vertical',
+  alignCrossAxis,
+  justifyMainAxis,
+  equalHeight = false,
+  fillWidth = false,
+  modes: propModes = EMPTY_MODES,
+  style,
+  ...rest
+}: StackProps) {
+  const { modes: globalModes } = useTokens()
+  const modes = useMemo(() => ({ ...globalModes, ...propModes }), [globalModes, propModes])
+
+  const { containerStyle, processedChildren } = useMemo(() => {
+    const gap = (getVariableByName('slot/gap', modes) ?? 8) as number
+    const isHorizontal = layoutDirection === 'horizontal'
+
+    // Cross-axis stretch maps to "equal height" for a row and "fill width" for a
+    // column. Honour whichever flag matches the active direction.
+    const stretchCrossAxis = isHorizontal ? equalHeight : fillWidth
+
+    const container: ViewStyle = {
+      flexDirection: isHorizontal ? 'row' : 'column',
+      alignItems: stretchCrossAxis
+        ? 'stretch'
+        : alignCrossAxis ?? (isHorizontal ? 'flex-start' : 'stretch'),
+      justifyContent: justifyMainAxis ?? (isHorizontal ? 'center' : undefined),
+      alignSelf: 'stretch',
+      gap,
+    }
+
+    const moded = children ? cloneChildrenWithModes(children, modes) : null
+    const processed = stretchCrossAxis && moded
+      ? injectChildStyle(moded, { alignSelf: 'stretch' })
+      : moded
+
+    return { containerStyle: container, processedChildren: processed }
+  }, [children, modes, layoutDirection, alignCrossAxis, justifyMainAxis, equalHeight, fillWidth])
+
+  return (
+    <View style={[containerStyle, style]} {...rest}>
+      {processedChildren}
+    </View>
+  )
+}
+
+export default React.memo(Stack)

package/src/components/SuggestiveSearch/SuggestiveSearch.tsx

@@ -560,7 +560,16 @@ function SuggestiveSearch({
         color: tokens.inputTextColor,
         fontFamily: tokens.inputFontFamily,
         fontSize: tokens.inputFontSize,
-        lineHeight: tokens.inputLineHeight,
+        // iOS-only quirk: a single-line RNTextInput with `lineHeight` (45) far
+        // larger than `fontSize` (16) sinks the text to the bottom of the box
+        // instead of centering — iOS puts all the extra space ABOVE the glyphs.
+        // The row already owns the 45px height via `minHeight` + centering, so
+        // omit lineHeight on iOS (UITextField centers natively) and keep the
+        // token value on Android/Web where it renders correctly. Same fix as
+        // FormField — see facebook/react-native#39145 / #28012.
+        ...(Platform.OS === 'ios'
+            ? null
+            : { lineHeight: tokens.inputLineHeight }),
         fontWeight: tokens.inputFontWeight as TextStyle['fontWeight'],
         padding: 0,
         margin: 0,

package/src/components/SummaryTile/SummaryTile.tsx

@@ -9,7 +9,7 @@ import {
     type PressableStateCallbackType,
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
-import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import { EMPTY_MODES, cloneChildrenWithModes, resolveTruncation } from '../../utils/react-utils'
 import Button from '../Button/Button'
 import NavArrow from '../NavArrow/NavArrow'
 import StrengthIndicator, {
@@ -60,6 +60,12 @@ export type SummaryTileProps = {
     descriptionStyle?: StyleProp<TextStyle>
     /** Accessibility label override (defaults to `title`). */
     accessibilityLabel?: string
+    /**
+     * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+     * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+     * lines as it needs even when horizontal space is tight.
+     */
+    disableTruncation?: boolean
 }
 
 /**
@@ -84,6 +90,7 @@ function SummaryTile({
     titleStyle,
     descriptionStyle,
     accessibilityLabel,
+    disableTruncation,
 }: SummaryTileProps) {
     const containerGap =
         (getVariableByName('summaryTile/gap', modes) as number | null) ?? 8
@@ -179,7 +186,7 @@ function SummaryTile({
                     {title ? (
                         <Text
                             style={[titleTextStyle, titleStyle]}
-                            numberOfLines={1}
+                            {...resolveTruncation(disableTruncation, 1)}
                         >
                             {title}
                         </Text>

package/src/components/Table/Table.tsx

@@ -0,0 +1,449 @@
+import React from 'react'
+import {
+    View,
+    Text,
+    Pressable,
+    ScrollView,
+    Platform,
+    type StyleProp,
+    type ViewStyle,
+    type TextStyle,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
+
+/* -------------------------------------------------------------------------------------------------
+ * Shared types & token resolution
+ * -----------------------------------------------------------------------------------------------*/
+
+export type TableCellAlign = 'left' | 'center' | 'right'
+
+/** Resolved styling for a header cell and a body cell, derived from design tokens. */
+type ResolvedTableTokens = {
+    headerBg: string
+    headerText: TextStyle
+    headerPaddingH: number
+    headerPaddingV: number
+    cellBg: string
+    cellText: TextStyle
+    cellPaddingH: number
+    cellPaddingV: number
+    borderColor: string
+    borderSize: number
+}
+
+const toWeight = (w: number | string): TextStyle['fontWeight'] =>
+    (typeof w === 'number' ? `${w}` : w) as TextStyle['fontWeight']
+
+/**
+ * Resolve every token the table family needs in one place. Sub-components call
+ * this with their cascaded `modes` so they render correctly both inside a
+ * `Table` and when used standalone. Fallbacks mirror the Figma node values
+ * (`tableCell/*`, `tableHeader/*`) so the component is faithful even before the
+ * tokens are published to the local store.
+ */
+function resolveTableTokens(modes: Modes): ResolvedTableTokens {
+    const headerFontFamily =
+        (getVariableByName('tableHeader/label/fontfamily', modes) as string) ?? 'JioType Var'
+    const headerFontSize = (getVariableByName('tableHeader/label/fontsize', modes) as number) ?? 14
+    const headerFontWeight =
+        (getVariableByName('tableHeader/label/fontweight', modes) as number | string) ?? 600
+
+    const cellFontFamily =
+        (getVariableByName('tableCell/label/fontfamily', modes) as string) ?? 'JioType Var'
+    const cellFontSize = (getVariableByName('tableCell/label/fontsize', modes) as number) ?? 14
+    const cellFontWeight =
+        (getVariableByName('tableCell/label/fontweight', modes) as number | string) ?? 400
+
+    return {
+        headerBg: (getVariableByName('tableHeader/background/color', modes) as string) ?? '#f5f5f5',
+        headerPaddingH: (getVariableByName('tableHeader/padding/horizontal', modes) as number) ?? 12,
+        headerPaddingV: (getVariableByName('tableHeader/padding/vertical', modes) as number) ?? 12,
+        headerText: {
+            color: (getVariableByName('tableHeader/label/color', modes) as string) ?? '#000000',
+            fontFamily: headerFontFamily,
+            fontSize: headerFontSize,
+            fontWeight: toWeight(headerFontWeight),
+            lineHeight: 20,
+        },
+        cellBg: (getVariableByName('tableCell/background/color', modes) as string) ?? '#ffffff',
+        cellPaddingH: (getVariableByName('tableCell/padding/horizontal', modes) as number) ?? 12,
+        cellPaddingV: (getVariableByName('tableCell/padding/vertical', modes) as number) ?? 12,
+        cellText: {
+            color: (getVariableByName('tableCell/label/color', modes) as string) ?? '#000000',
+            fontFamily: cellFontFamily,
+            fontSize: cellFontSize,
+            fontWeight: toWeight(cellFontWeight),
+            lineHeight: 20,
+        },
+        borderColor: (getVariableByName('tableCell/border/color', modes) as string) ?? '#eeeeee',
+        borderSize: (getVariableByName('tableCell/border/size', modes) as number) ?? 1,
+    }
+}
+
+const alignToJustify = (align: TableCellAlign): ViewStyle['justifyContent'] =>
+    align === 'center' ? 'center' : align === 'right' ? 'flex-end' : 'flex-start'
+
+/** Renders text children through the resolved label style; passes elements through untouched. */
+function renderCellContent(
+    children: React.ReactNode,
+    textStyle: TextStyle,
+    align: TableCellAlign,
+    modes: Modes,
+): React.ReactNode {
+    if (children == null || children === false) return null
+    if (typeof children === 'string' || typeof children === 'number') {
+        return <Text style={[textStyle, { textAlign: align }]}>{children}</Text>
+    }
+    return cloneChildrenWithModes(children, modes)
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * Table.Cell — body cell (Figma `table-cell`, node 603:23)
+ * -----------------------------------------------------------------------------------------------*/
+
+export type TableCellProps = {
+    children?: React.ReactNode
+    /** Horizontal alignment of the cell content. @default 'left' */
+    align?: TableCellAlign
+    /** Fixed cell width. Omit to let the cell flex. */
+    width?: number
+    /** Flex-grow weight when `width` is not set. @default 1 */
+    flex?: number
+    /** Drop the right divider (used for the last column). @default false */
+    isLastColumn?: boolean
+    /** Drop the bottom divider (used for the last row). @default false */
+    isLastRow?: boolean
+    modes?: Modes
+    style?: StyleProp<ViewStyle>
+}
+
+/**
+ * A single body cell. White background with a bottom + right divider, matching
+ * the Figma `table-cell` sub-component. String/number children are rendered
+ * with the token label style; any element is rendered as-is.
+ */
+function TableCell({
+    children,
+    align = 'left',
+    width,
+    flex = 1,
+    isLastColumn = false,
+    isLastRow = false,
+    modes = EMPTY_MODES,
+    style,
+}: TableCellProps) {
+    const t = resolveTableTokens(modes)
+    return (
+        <View
+            style={[
+                {
+                    backgroundColor: t.cellBg,
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    justifyContent: alignToJustify(align),
+                    paddingHorizontal: t.cellPaddingH,
+                    paddingVertical: t.cellPaddingV,
+                    borderColor: t.borderColor,
+                    borderBottomWidth: isLastRow ? 0 : t.borderSize,
+                    borderRightWidth: isLastColumn ? 0 : t.borderSize,
+                    ...(width != null ? { width } : { flex, minWidth: 0 }),
+                },
+                style,
+            ]}
+        >
+            {renderCellContent(children, t.cellText, align, modes)}
+        </View>
+    )
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * Table.HeaderCell — header cell (Figma `table header wrap`, node 603:21)
+ * -----------------------------------------------------------------------------------------------*/
+
+export type TableHeaderCellProps = {
+    children?: React.ReactNode
+    /** Horizontal alignment of the header content. @default 'left' */
+    align?: TableCellAlign
+    /** Fixed cell width. Omit to let the cell flex. */
+    width?: number
+    /** Flex-grow weight when `width` is not set. @default 1 */
+    flex?: number
+    modes?: Modes
+    style?: StyleProp<ViewStyle>
+}
+
+/**
+ * A single header cell. Muted background with the bold token label style,
+ * matching the Figma `table header wrap` sub-component. Header cells carry no
+ * dividers; the header row draws a single bottom divider beneath them.
+ */
+function TableHeaderCell({
+    children,
+    align = 'left',
+    width,
+    flex = 1,
+    modes = EMPTY_MODES,
+    style,
+}: TableHeaderCellProps) {
+    const t = resolveTableTokens(modes)
+    return (
+        <View
+            style={[
+                {
+                    backgroundColor: t.headerBg,
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    justifyContent: alignToJustify(align),
+                    paddingHorizontal: t.headerPaddingH,
+                    paddingVertical: t.headerPaddingV,
+                    ...(width != null ? { width } : { flex, minWidth: 0 }),
+                },
+                style,
+            ]}
+        >
+            {renderCellContent(children, t.headerText, align, modes)}
+        </View>
+    )
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * Table.Header — row of header cells with a bottom divider
+ * -----------------------------------------------------------------------------------------------*/
+
+export type TableHeaderProps = {
+    children?: React.ReactNode
+    modes?: Modes
+    style?: StyleProp<ViewStyle>
+}
+
+function TableHeader({ children, modes = EMPTY_MODES, style }: TableHeaderProps) {
+    const t = resolveTableTokens(modes)
+    return (
+        <View
+            style={[
+                {
+                    flexDirection: 'row',
+                    width: '100%',
+                    borderBottomWidth: t.borderSize,
+                    borderBottomColor: t.borderColor,
+                },
+                style,
+            ]}
+        >
+            {cloneChildrenWithModes(children, modes)}
+        </View>
+    )
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * Table.Row — row of body cells
+ * -----------------------------------------------------------------------------------------------*/
+
+export type TableRowProps = {
+    children?: React.ReactNode
+    /** When provided, the whole row becomes pressable. */
+    onPress?: () => void
+    modes?: Modes
+    style?: StyleProp<ViewStyle>
+}
+
+function TableRow({ children, onPress, modes = EMPTY_MODES, style }: TableRowProps) {
+    const rowStyle: ViewStyle = { flexDirection: 'row', width: '100%' }
+    const content = cloneChildrenWithModes(children, modes)
+    if (onPress) {
+        return (
+            <Pressable
+                onPress={onPress}
+                accessibilityRole="button"
+                style={({ pressed }) => [rowStyle, pressed ? { opacity: 0.6 } : null, style]}
+            >
+                {content}
+            </Pressable>
+        )
+    }
+    return <View style={[rowStyle, style]}>{content}</View>
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * Table.Body — column container for rows
+ * -----------------------------------------------------------------------------------------------*/
+
+export type TableBodyProps = {
+    children?: React.ReactNode
+    modes?: Modes
+    style?: StyleProp<ViewStyle>
+}
+
+function TableBody({ children, modes = EMPTY_MODES, style }: TableBodyProps) {
+    return <View style={[{ width: '100%' }, style]}>{cloneChildrenWithModes(children, modes)}</View>
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * Table — root (Figma `Table`, node 5732:3710)
+ * -----------------------------------------------------------------------------------------------*/
+
+/**
+ * Column definition for the data-driven `Table` API. `T` is the shape of one
+ * row record.
+ */
+export type TableColumn<T> = {
+    /** Stable key; also used to read `row[key]` when no `render` is provided. */
+    key: string
+    /** Header label. Defaults to `key`. */
+    header?: React.ReactNode
+    /** Cell + header horizontal alignment. @default 'left' */
+    align?: TableCellAlign
+    /** Header-only alignment override. Defaults to `align`. */
+    headerAlign?: TableCellAlign
+    /** Fixed column width. Omit to let the column flex. */
+    width?: number
+    /** Flex-grow weight when `width` is not set. @default 1 */
+    flex?: number
+    /** Custom cell renderer. Falls back to `row[key]` as text. */
+    render?: (row: T, rowIndex: number) => React.ReactNode
+}
+
+export type TableProps<T = Record<string, unknown>> = {
+    /** Column definitions for the data-driven API. */
+    columns?: TableColumn<T>[]
+    /** Row records, one per table row. */
+    data?: T[]
+    /**
+     * Composition children (`Table.Header`, `Table.Body`, `Table.Row`,
+     * `Table.Cell`, `Table.HeaderCell`). When provided, `columns`/`data` are
+     * ignored and the children are rendered as-is.
+     */
+    children?: React.ReactNode
+    /** Show the header row in the data-driven API. @default true */
+    showHeader?: boolean
+    /** Resolve a stable key per row. Defaults to the row index. */
+    getRowKey?: (row: T, index: number) => React.Key
+    /** Called when a row is pressed (data-driven API). Makes rows pressable. */
+    onRowPress?: (row: T, index: number) => void
+    /**
+     * Wrap the table in a horizontal `ScrollView`. Use with fixed-width columns
+     * for wide tables that exceed the viewport on mobile. @default false
+     */
+    scrollable?: boolean
+    /** Accessibility label for the table container. */
+    accessibilityLabel?: string
+    /** Design token modes for theming (e.g. `{ "Color Mode": "Light" }`). */
+    modes?: Modes
+    /** Override the outer container style. */
+    style?: StyleProp<ViewStyle>
+}
+
+/**
+ * Table renders structured rows and columns. It supports two complementary
+ * usage styles that share the same token-driven styling:
+ *
+ * 1. **Data-driven** (recommended): pass `columns` + `data`. The header and body
+ *    are built for you, columns stay aligned, and per-column `align`/`width`/
+ *    `flex`/`render` give full control.
+ *
+ * 2. **Composition**: pass `Table.Header` / `Table.Body` / `Table.Row` /
+ *    `Table.Cell` / `Table.HeaderCell` as children for bespoke layouts. These
+ *    sub-components are also exported standalone.
+ *
+ * Implementation of Figma node `5732:3710` (`Table`) with sub-components
+ * `603:23` (`table-cell`) and `603:21` (`table header wrap`).
+ *
+ * @component
+ */
+function Table<T = Record<string, unknown>>({
+    columns,
+    data,
+    children,
+    showHeader = true,
+    getRowKey,
+    onRowPress,
+    scrollable = false,
+    accessibilityLabel,
+    modes = EMPTY_MODES,
+    style,
+}: TableProps<T>) {
+    const isComposition = children != null
+
+    const body = isComposition ? (
+        cloneChildrenWithModes(children, modes)
+    ) : (
+        <>
+            {showHeader && columns && columns.length > 0 && (
+                <TableHeader modes={modes}>
+                    {columns.map((col) => (
+                        <TableHeaderCell
+                            key={col.key}
+                            align={col.headerAlign ?? col.align ?? 'left'}
+                            width={col.width}
+                            flex={col.flex ?? 1}
+                            modes={modes}
+                        >
+                            {col.header ?? col.key}
+                        </TableHeaderCell>
+                    ))}
+                </TableHeader>
+            )}
+            {columns && data && data.length > 0 && (
+                <TableBody modes={modes}>
+                    {data.map((row, rowIndex) => {
+                        const isLastRow = rowIndex === data.length - 1
+                        return (
+                            <TableRow
+                                key={getRowKey?.(row, rowIndex) ?? rowIndex}
+                                onPress={onRowPress ? () => onRowPress(row, rowIndex) : undefined}
+                                modes={modes}
+                            >
+                                {columns.map((col, colIndex) => (
+                                    <TableCell
+                                        key={col.key}
+                                        align={col.align ?? 'left'}
+                                        width={col.width}
+                                        flex={col.flex ?? 1}
+                                        isLastColumn={colIndex === columns.length - 1}
+                                        isLastRow={isLastRow}
+                                        modes={modes}
+                                    >
+                                        {col.render
+                                            ? col.render(row, rowIndex)
+                                            : (row as Record<string, unknown>)[col.key] as React.ReactNode}
+                                    </TableCell>
+                                ))}
+                            </TableRow>
+                        )
+                    })}
+                </TableBody>
+            )}
+        </>
+    )
+
+    const container = (
+        <View
+            accessibilityRole={Platform.OS === 'web' ? ('table' as any) : undefined}
+            accessibilityLabel={accessibilityLabel}
+            style={[{ overflow: 'hidden' }, !scrollable && { width: '100%' }, style]}
+        >
+            {body}
+        </View>
+    )
+
+    if (scrollable) {
+        return (
+            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+                {container}
+            </ScrollView>
+        )
+    }
+    return container
+}
+
+Table.Header = TableHeader
+Table.HeaderCell = TableHeaderCell
+Table.Body = TableBody
+Table.Row = TableRow
+Table.Cell = TableCell
+
+export { TableHeader, TableHeaderCell, TableBody, TableRow, TableCell }
+
+export default Table

package/src/components/Text/Text.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Text as RNText, type TextStyle, type StyleProp } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
-import { EMPTY_MODES } from '../../utils/react-utils'
+import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils'
 import Skeleton from '../../skeleton/Skeleton'
 import { useSkeleton } from '../../skeleton/SkeletonGroup'
 import type { Modes } from '../../design-tokens'
@@ -26,6 +26,12 @@ export type TextProps = {
   style?: StyleProp<TextStyle>
   /** Number of lines to limit the text to. */
   numberOfLines?: number
+  /**
+   * When `true`, disables text truncation entirely: the trailing ellipsis (`…`)
+   * is never shown and any `numberOfLines` clamp is ignored, so the text wraps
+   * to as many lines as it needs even when horizontal space is tight.
+   */
+  disableTruncation?: boolean
   /**
    * Explicit per-instance loading override. When `true`, this `Text` renders
    * a skeleton placeholder regardless of any surrounding `<SkeletonGroup>`.
@@ -59,6 +65,7 @@ function Text({
   modes = EMPTY_MODES,
   style,
   numberOfLines,
+  disableTruncation,
   loading,
   skeletonWidth,
   skeletonLines,
@@ -124,7 +131,7 @@ function Text({
   return (
     <RNText
       style={[textStyle, style]}
-      numberOfLines={numberOfLines}
+      {...resolveTruncation(disableTruncation, numberOfLines)}
     >
       {content}
     </RNText>