React NativeScript

React NativeScript

  • Docs

›ELEMENTS: COMPONENTS

INTRODUCTION

  • Introduction

GETTING STARTED

  • Quick Start
  • Environment Setup
  • Using React Devtools

CORE CONCEPTS

  • Native Access
  • Navigation
  • Node Roles
  • Modals
  • Plugins
  • Styling

SAMPLES

  • Apps

ELEMENTS: LAYOUT

  • AbsoluteLayout
  • DockLayout
  • FlexboxLayout
  • GridLayout
  • StackLayout
  • WrapLayout

ELEMENTS: COMPONENTS

  • ActivityIndicator
  • ActionBar
  • ActionItem
  • Button
  • DatePicker
  • Frame
  • HtmlView
  • Image
  • Label
  • ListView
  • ListPicker
  • NavigationButton
  • Page
  • Placeholder
  • Progress
  • ScrollView
  • SearchBar
  • SegmentedBar
  • Slider
  • Switch
  • TabView
  • TabViewItem
  • TextField
  • TextView
  • TimePicker
  • WebView

LICENCES

  • Licences
Edit

TextView

<textView> is a UI component that shows an editable or a read-only multi-line text container. You can use it to let users type large text in your app or to show longer, multi-line text on the screen.

<textView> extends TextBase and EditableTextBase which provide additional properties and events.

See also:

  • Official top-level documentation
  • Detailed API specification

<textView text={"Multi\nLine\nText"} />

Displaying multi-style text

To apply multiple styles to the text in your <textView>, you can use <formattedString>:

import * as React from "react";

<textView editable={false}>
  <formattedString>
    <span text="You can use text attributes such as " />
    <span text="bold, " fontWeight="bold" />
    <span text="italic " fontStyle="italic" />
    <span text="and " />
    <span text="underline." textDecoration="underline" />
    <!-- To set text on the <span> element, please do use the `text` prop; it can't safely take text nodes as children! -->
  </formattedString>
</textView>

Props

NameTypeDescription
textstringSets the value of the component.
hintstringSets the placeholder text when the component is editable.
editablebooleanWhen true, indicates that the user can edit the contents of the container.
maxLengthnumberSets the maximum number of characters that can be entered in the container.
keyboardTypeKeyboardTypeShows a custom keyboard for easier text input.
Valid values: datetime, phone, number, url, or email.
returnKeyTypeReturnKeyTypeSets the label of the return key.
Valid values: done, next, go, search, or send.
autocorrectbooleanEnables or disables autocorrect.
onBlur(args:EventData) => voidEmitted when the text view loses focus.
onFocus(args:EventData) => voidEmitted when the text view gains focus.
onTextChange(args:EventData) => voidEmitted when the text changes.

Native component

AndroidiOS
android.widget.EditTextUITextView
Last updated by Jamie Birch
← TextFieldTimePicker →
  • Props
  • Native component
React NativeScript
Docs
Getting StartedUI Components Reference
Community
Stack OverflowChat on Slack in #reactTwitter
More
GitHub – React NativeScriptGitHub – Docs Site
Copyright © 2021 Jamie Birch