Text

const Text: ForwardRefExoticComponent<TextProps & RefAttributes<TextHandle>>;

Renders styled text in the terminal.

Supports inline nesting for rich text — wrap portions of text in additional <Text> elements with different styles:

Examples

<Text style={{ color: "white" }}>
  Hello <Text style={{ bold: true, color: "cyan" }}>World</Text>!
</Text>

// Focusable text with highlight
<Text focusable focusedStyle={{ bg: "cyan", color: "black" }}>
  Press Tab to reach me
</Text>

---

Properties

Property	Type	Description
children?	ReactNode	Text content. Can be a string, number, or nested <Text> elements for rich inline styling (bold words inside a sentence, etc.).
focusable?	boolean	When true, the text element participates in the focus (Tab) order.
focusedStyle?	Style	Style applied when this element is focused (merged with style).
style?	Style	Text style (color, bold, dim, italic, underline, etc.).
wrap?	Responsive<WrapMode>	Text wrapping mode. Overrides style.wrap. - "wrap" — soft-wrap at the container edge (default) - "truncate" — cut off with no indicator - "ellipsis" — cut off with … - "none" — no wrapping at all

---

TextHandle

Handle for Text (when focusable)

Extends

• FocusableHandle

Methods

blur()

blur(): void;

Programmatically blur (unfocus) this element

Returns

void

Inherited from

FocusableHandle.blur

---

focus()

focus(): void;

Programmatically focus this element

Returns

void

Inherited from

FocusableHandle.focus

---

scrollIntoView()

scrollIntoView(options?): void;

Scroll the nearest parent ScrollView to make this element visible. Behaves like the DOM Element.scrollIntoView() method. No-op if the element is not inside a ScrollView.

Parameters

Parameter	Type	Description
options?	ScrollIntoViewOptions	Alignment options (default: { block: "nearest" })

Returns

void

Example

const inputRef = useRef<InputHandle>(null);

// Minimal scroll — just enough to make it visible
inputRef.current?.scrollIntoView();

// Center the element in the viewport
inputRef.current?.scrollIntoView({ block: "center" });

Inherited from

FocusableHandle.scrollIntoView

Properties

Property	Modifier	Type	Description	Inherited from
isFocused	readonly	boolean	Whether this element is currently focused	FocusableHandle.isFocused