jfs-components 0.1.8 → 0.1.17

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, resolveTextLayout } from '../../utils/react-utils'
 import Skeleton from '../../skeleton/Skeleton'
 import { useSkeleton } from '../../skeleton/SkeletonGroup'
 import type { Modes } from '../../design-tokens'
@@ -26,6 +26,21 @@ 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. The text is also
+   * never shrunk by a tight parent — it keeps its full intrinsic size and
+   * overflows (even breaking the parent layout) rather than clipping into an
+   * ellipsis. It still wraps onto multiple lines.
+   */
+  disableTruncation?: boolean
+  /**
+   * When `true`, forces the text onto a single line with no wrapping (implies
+   * {@link disableTruncation}). On web the line overflows horizontally —
+   * brutally breaking the parent layout if it has to — instead of wrapping or
+   * truncating.
+   */
+  singleLine?: boolean
   /**
    * Explicit per-instance loading override. When `true`, this `Text` renders
    * a skeleton placeholder regardless of any surrounding `<SkeletonGroup>`.
@@ -59,6 +74,8 @@ function Text({
   modes = EMPTY_MODES,
   style,
   numberOfLines,
+  disableTruncation,
+  singleLine,
   loading,
   skeletonWidth,
   skeletonLines,
@@ -121,10 +138,18 @@ function Text({
         ? text
         : 'Korem ipsum '
 
+  // Layout `style` is merged after the consumer `style` so the brutal overflow
+  // / no-wrap behaviour always wins.
+  const { style: layoutStyle, ...truncation } = resolveTextLayout({
+    disableTruncation,
+    singleLine,
+    numberOfLines,
+  })
+
   return (
     <RNText
-      style={[textStyle, style]}
-      numberOfLines={numberOfLines}
+      style={[textStyle, style, layoutStyle]}
+      {...truncation}
     >
       {content}
     </RNText>

package/src/components/TextInput/TextInput.tsx

@@ -137,18 +137,18 @@ const TextInputBase = forwardRef<RNTextInput, TextInputProps>(function TextInput
   const inputRef = useRef<RNTextInput>(null)
 
   // Resolve container tokens
-  const backgroundColor = getVariableByName('textInput/background', modes) || '#f5f5f5'
-  const borderColor = getVariableByName('textInput/border/color', modes) || '#f5f5f5'
-  const paddingHorizontal = getVariableByName('textInput/horizontal/padding', modes) || 14
-  const paddingVertical = getVariableByName('textInput/vertical/padding', modes) || 14
-  const radius = getVariableByName('textInput/radius', modes) || 99999
+  const backgroundColor = getVariableByName('textInput/background', modes)
+  const borderColor = getVariableByName('textInput/border/color', modes)
+  const paddingHorizontal = getVariableByName('textInput/horizontal/padding', modes)
+  const paddingVertical = getVariableByName('textInput/vertical/padding', modes)
+  const radius = getVariableByName('textInput/radius', modes)
 
   // Resolve text input typography tokens
-  const textColor = getVariableByName('textInput/label/color', modes) || '#24262b'
-  const fontSize = getVariableByName('textInput/fontSize', modes) || 14
-  const lineHeight = getVariableByName('textInput/lineHeight', modes) || 18
-  const fontFamily = getVariableByName('textInput/fontFamily', modes) || 'System'
-  const fontWeightRaw = getVariableByName('textInput/fontWeight', modes) || 400
+  const textColor = getVariableByName('textInput/label/color', modes)
+  const fontSize = getVariableByName('textInput/fontSize', modes)
+  const lineHeight = getVariableByName('textInput/lineHeight', modes)
+  const fontFamily = getVariableByName('textInput/fontFamily', modes)
+  const fontWeightRaw = getVariableByName('textInput/fontWeight', modes)
   const fontWeight =
     typeof fontWeightRaw === 'number' ? fontWeightRaw.toString() : fontWeightRaw
 
@@ -156,8 +156,8 @@ const TextInputBase = forwardRef<RNTextInput, TextInputProps>(function TextInput
   const placeholderColor = makePlaceholderColor(textColor, 0.6)
 
   // Resolve icon tokens (for default icon rendering if needed)
-  const iconColor = getVariableByName('textInput/icon/color', modes) || '#24262b'
-  const iconSize = getVariableByName('textInput/icon/size', modes) || 18
+  const iconColor = getVariableByName('textInput/icon/color', modes)
+  const iconSize = getVariableByName('textInput/icon/size', modes)
 
   // Convert radius to React Native format (if 99999, use a large value for fully rounded)
   const borderRadius = radius === 99999 ? 99999 : radius
@@ -182,7 +182,13 @@ const TextInputBase = forwardRef<RNTextInput, TextInputProps>(function TextInput
     flex: 1,
     color: textColor,
     fontSize,
-    lineHeight,
+    // iOS-only quirk: a single-line RNTextInput with an explicit `lineHeight`
+    // larger than `fontSize` puts all the extra space ABOVE the glyphs, so the
+    // text/placeholder sits below center (iOS native font-metrics bug — see
+    // facebook/react-native#39145 / #28012). The container centers via
+    // `alignItems: 'center'` + `minHeight`, so omit lineHeight on iOS
+    // (UITextField centers natively) and keep it on Android/Web where it's fine.
+    ...(Platform.OS === 'ios' ? null : { lineHeight }),
     fontFamily,
     fontWeight,
     padding: 0,
@@ -340,8 +346,8 @@ const TextInputSearch = forwardRef<RNTextInput, TextInputSearchProps>(function T
   ...rest
 }: TextInputSearchProps, ref: React.Ref<RNTextInput>) {
   // Resolve icon tokens for default search icon
-  const iconColor = getVariableByName('textInput/icon/color', modes) || '#24262b'
-  const iconSize = getVariableByName('textInput/icon/size', modes) || 18
+  const iconColor = getVariableByName('textInput/icon/color', modes)
+  const iconSize = getVariableByName('textInput/icon/size', modes)
 
   // Use provided leading or default to search icon
   const defaultLeading = (

package/src/components/TextSegment/TextSegment.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react'
 import { Text as RNText, type TextStyle, type StyleProp } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
-import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import { EMPTY_MODES, cloneChildrenWithModes, resolveTextLayout } from '../../utils/react-utils'
 import type { Modes } from '../../design-tokens'
 
 /**
@@ -58,6 +58,21 @@ export type TextSegmentProps = {
   textAlign?: 'Left' | 'Center'
   /** Clamp the paragraph to this many lines (truncates with an ellipsis). Applies to the whole composed line, not per-run. */
   numberOfLines?: number
+  /**
+   * When `true`, disables truncation entirely: the trailing ellipsis (`…`) is
+   * never shown and the `numberOfLines` clamp is ignored. The paragraph is also
+   * never shrunk by a tight parent — it keeps its full intrinsic size and
+   * overflows (even breaking the parent layout) rather than clipping into an
+   * ellipsis. It still wraps onto multiple lines.
+   */
+  disableTruncation?: boolean
+  /**
+   * When `true`, forces the whole paragraph onto a single line with no wrapping
+   * (implies {@link disableTruncation}). On web the line overflows horizontally
+   * — brutally breaking the parent layout if it has to — instead of wrapping or
+   * truncating.
+   */
+  singleLine?: boolean
   /** Mode configuration used for the base style and cascaded to every run/child. */
   modes?: Modes
   /** Style override applied to the outer paragraph (e.g. width constraints to force wrapping). */
@@ -125,6 +140,8 @@ function TextSegment({
   children,
   textAlign = 'Left',
   numberOfLines,
+  disableTruncation,
+  singleLine,
   modes = EMPTY_MODES,
   style,
 }: TextSegmentProps) {
@@ -156,8 +173,16 @@ function TextSegment({
   // while still honouring any per-child `modes` override.
   const content = hasChildren ? cloneChildrenWithModes(children, modes) : renderedSegments
 
+  // Layout `style` is merged after the consumer `style` so the brutal overflow
+  // / no-wrap behaviour always wins.
+  const { style: layoutStyle, ...truncation } = resolveTextLayout({
+    disableTruncation,
+    singleLine,
+    numberOfLines,
+  })
+
   return (
-    <RNText style={[baseStyle, style]} numberOfLines={numberOfLines}>
+    <RNText style={[baseStyle, style, layoutStyle]} {...truncation}>
       {content}
     </RNText>
   )