πŸš€ 8.9 Released! β†’ ⚑️ New Node-API Engine Preview, πŸ“² ns widget ios, πŸ’… Tailwind v4 and more...
Read Announcement

<TextView> is a UI component for multi-line text entry. When set to read-only, it can also be used to display multi-line text.

For single-line text input, see TextField.

xml
<TextViewtext="{{ text }}" />
ts
consttext=`TextView\nWith\nMultiple\nLines!`
html
<TextView[text]="text" />
ts
text =`TextView\nWith\nMultiple\nLines!`;
tsx
<textViewtext={text} />
tsx
<textviewtext={text} />
svelte
<textView{text} />
vue
<TextView :text="text" />

Examples ​

Formatting text inside a TextView ​

If you need to style parts of the text, you can use a combination of a FormattedString and Span elements.

xml
<TextView>
 <FormattedString>
 <Spantext="This text has a " />
 <Spantext="red "style="color: red" />
 <Spantext="piece of text. " />
 <Spantext="Also, this bit is italic, "fontStyle="italic" />
 <Spantext="and this bit is bold."fontWeight="bold" />
 </FormattedString>
</TextView>

Props ​

text ​

ts
text: string

Gets or sets the text of the TextView.

hint ​

ts
hint: string

Gets or sets the placeholder text for the TextView.

editable ​

ts
editable: boolean

When set to false the TextView is read-only.

Defaults to true.

keyboardType ​

ts
keyboardType: CoreTypes.KeyboardType | number // "datetime" | "email" | "integer" | "number" | "phone" | "url"

Gets or sets the keyboard type shown when editing this TextView.

On iOS, any valid UIKeyboardType number works, for example:

ts
keyboardType =8// UIKeyboardType.DecimalPad

See CoreTypes.KeyboardType, UIKeyboardType.

returnKeyType ​

ts
returnKeyType: CoreTypes.ReturnKeyType // "done" | "go" | "next" | "search" | "send"

Gets or sets the label of the return key.

See CoreTypes.ReturnKeyType.

isEnabled ​

Allows disabling the TextView. A disabled TextView does not react to user gestures or input.

Default value is true.

maxLines ​

ts
maxLines: number

Limits input to the specified number of lines.

autocorrect ​

ts
autocorrect: boolean

Enables or disables autocorrect.

isWritingToolsActive 8.9+ ​

(iOS Only) Are Apple Intelligence writing tools active.

ts
isWritingToolsActive: boolean

enableWritingToolsEvents 8.9+ ​

(iOS Only) Allow Apple Intelligence writing tools to emit text changes on each alteration instead of after the final change (default).

ts
enableWritingToolsEvents: boolean

iosWritingToolsBehavior 8.9+ ​

(iOS Only) Behavior for Apple Intelligence Writing Tools.

ts
iosWritingToolsBehavior: WritingToolsBehavior

Can be Default, Complete, Limited or None.

iosWritingToolsAllowedInput 8.9+ ​

(iOS Only) Allowed input for Apple Intelligence Writing Tools.

ts
iosWritingToolsAllowedInput: Array<WritingToolsAllowedInput>

Can be Default, List, PlainText, RichText or Table.

...Inherited ​

For additional inherited properties not shown, refer to the API Reference.

Methods ​

focus() ​

ts
focus(): boolean

Focuses the TextView and returns true if the focus was succeessful.

dismissSoftInput() ​

ts
dismissSoftInput(): void

Hides the on-screen keyboard.

Events ​

textChange ​

ts
on('textChange', (args:PropertyChangeData) => {
consttextView= args.object asTextView
 console.log('TextView text changed:', args.value)
})

Emitted when the input text changes.

Event data type: PropertyChangeData

returnPress ​

ts
on('returnPress', (args:EventData) => {
consttextView= args.object asTextView
 console.log('TextView return key pressed.')
})

Emitted when the return key is pressed.

focus ​

ts
on('focus', (args:EventData) => {
consttextView= args.object asTextView
 console.log('TextView has been focused')
})

Emitted when the TextView gains focus.

blur ​

ts
on('blur', (args:EventData) => {
consttextView= args.object asTextView
 console.log('TextView has been blured')
})

Emitted when the TextView loses focus.

Native component ​

Previous
TextField

AltStyle γ«γ‚ˆγ£γ¦ε€‰ζ›γ•γ‚ŒγŸγƒšγƒΌγ‚Έ (->γ‚ͺγƒͺγ‚ΈγƒŠγƒ«) /