NativeScript Core

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

<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

<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