Text View

The TextView component can be used to type larger text content in your app. The component can also be used show any content by setting the editable property to false.

Usage

XML
JavaScript
TypeScript

<TextView loaded="onTextViewLoaded" hint="Enter Date" text="{{ viewDate }}" secure="false" keyboardType="datetime" returnKeyType="done" autocorrect="false" maxLength="10">
</TextView>

const observableModule = require("tns-core-modules/data/observable");
function onNavigatingTo(args) {
    const page = args.object;
    const vm = new observableModule.Observable();
    vm.set("viewDate", "");

    page.bindingContext = vm;
}
function onTextViewLoaded(argsloaded) {
    const textView = argsloaded.object;
    textView.on("focus", (args) => {
        const view = args.object;
        console.log("On TextView focus");
    });
    textView.on("blur", (args) => {
        const view = args.object;
        console.log("On TextView blur");
    });
}
exports.onNavigatingTo = onNavigatingTo;
exports.onTextViewLoaded = onTextViewLoaded;

import {Observable} from "tns-core-modules/data/observable";
import {Page} from "tns-core-modules/ui/page";
import {TextView} from "tns-core-modules/ui/text-view";

export function onNavigatingTo(args) {
    const page: Page = <Page> args.object;
    const vm = new Observable();
    vm.set("viewDate", "");
    page.bindingContext = vm;
}
export function onTextViewLoaded(argsloaded) {
    let textView: TextView = <TextView> argsloaded.object;
    textView.on("focus", (args) => {
        let view: TextView = <TextView> args.object;
        console.log("On TextView focus");
    });
    textView.on("blur", (args) => {
        let view: TextView = <TextView> args.object;
        console.log("On TextView blur");
    });
}

Improve this document

Demo Source

Creating TextView component via Code-Behind

XML
JavaScript
TypeScript

<StackLayout id="stackLayoutId">
    <Button text="Disable third TextView" tap="{{ onTap }}" />

</StackLayout>

function onNavigatingTo(args) {
    const page = args.object;
    const vm = new observableModule.Observable();
    // changing TextView editable property value on button tap
    vm.set("onTap", (btargs) => {
        const button = btargs.object;
        const thirdTextview = btargs.object.page.getViewById("thirdTextViewId");
        thirdTextview.editable = !thirdTextview.editable;
        if (thirdTextview.editable) {
            button.text = "Disable third TextView";
        } else {
            button.text = "Enable third TextView";
        }
    });
    page.bindingContext = vm;
}

function onPageLoaded(args) {
    const page = args.object;
    const vm = page.bindingContext;
    const stackLayout = page.getViewById("stackLayoutId");
    // creating new TextView and changing the hint
    const firstTextview = new textViewModule.TextView();
    firstTextview.hint = "Enter text";
    // creating new TextView and binding the text property
    const secondTextview = new textViewModule.TextView();
    const options = {
        sourceProperty: "text",
        targetProperty: "secondTextProperty"
    };
    secondTextview.bind(options, vm);
    vm.set("secondTextProperty", "Sample TextView text");
    // creating new TextView and changing the text
    const thirdTextview = new textViewModule.TextView();
    thirdTextview.id = "thirdTextViewId";
    thirdTextview.text = "Third TextView";
    // adding the newly created TextViews in a StackLayout
    stackLayout.addChild(firstTextview);
    stackLayout.addChild(secondTextview);
    stackLayout.addChild(thirdTextview);
}

exports.onNavigatingTo = onNavigatingTo;
exports.onPageLoaded = onPageLoaded;

export function onNavigatingTo(args) {
    const page: Page = <Page> args.object;
    const vm = new Observable();
    // changing TextView editable property value on button tap
    vm.set("onTap", (btargs) => {
        const button: Button = <Button> btargs.object;
        const thirdTextview = (<TextView>button.page.getViewById("thirdTextViewId"));
        thirdTextview.editable = !thirdTextview.editable;
        if (thirdTextview.editable) {
            button.text = "Disable third TextView";
        } else {
            button.text = "Enable third TextView";
        }
    });
    page.bindingContext = vm;
}

export function onPageLoaded(args) {
    const page: Page = <Page> args.object;
    const vm = page.bindingContext;
    const stackLayout: StackLayout = <StackLayout> page.getViewById("stackLayoutId");
    // creating new TextView and changing the hint
    const firstTextview = new TextView();
    firstTextview.hint = "Enter text";
    // creating new TextView and binding the text property
    const secondTextview = new TextView();
    const options = {
        sourceProperty: "text",
        targetProperty: "secondTextProperty"
    };
    secondTextview.bind(options, vm);
    vm.set("secondTextProperty", "Sample TextView text");
    // creating new TextView and changing the text
    const thirdTextview = new TextView();
    thirdTextview.id = "thirdTextViewId";
    thirdTextview.text = "Third TextView";
    // adding the newly created TextViews in a StackLayout
    stackLayout.addChild(firstTextview);
    stackLayout.addChild(secondTextview);
    stackLayout.addChild(thirdTextview);
}

Properties

Name	Type	Description
`autocapitalizationType`	`AutocapitalizationType`	Gets or sets the autocapitalization type.
`autocorrect`	`boolean`	Enables or disables autocorrection.
`keyboardType`	`KeyboardType`	Gets or sets the soft keyboard type
`letterSpacing`	`number`	Gets or sets letter space style property.
`lineHiehgt`	`number`	Gets or sets line height style property.
`maxLength`	`number`	Gets or sets the max number of symbols allowed as input.
`returnKeyType`	`ReturnKeyType`	Gets or sets the soft keyboard return key flavor.
`secure`	`string`	Gets or sets if a text field is for password entry.
`text`	`string`	Gets or sets the text.
`textAlignment`	`TextAlignment`	Gets or sets the text alignment.
`textDecoration`	`TextDecoration`	Gets or sets the text decoration.
`textTransform`	`TextTransform`	Gets or sets the text transform.
`whiteSpace`	`WhiteSpace`	Gets or sets white space style property.

Methods

Name	Description
`focus`	Tries to focus the view. Returns a value indicating whether this view or one of its descendants actually took focus. Returns `boolean`.
`dismissSoftInput`	Hides the soft input method, ususally a soft keyboard.

Events

Name	Description
`blur`	Emitted when the text field is unfocused.
`focus`	Emitted when the text field is focused.
`textChange`	Emitted when there is a new text input.

API References

Name	Type
tns-core-modules/ui/text-view	`Module`
TextView	`Class`

Native Component

Android	iOS
android.widget.EditText	UITextView

NativeScript Core