📺 "One project. One language. Three apps." Learn more in our upcoming code sharing webinar!

NativeScript Core

Text View

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

const textViewModule = require("tns-core-modules/ui/text-view");
import {TextView} from "tns-core-modules/ui/text-view";

Basics

This example shows how to bind TextView text, hint and editable properties and to change their values as well as how to handle the text change.

<Button text="{{ buttonText }}" class="btn btn-primary btn-active" tap="textViewEditStateChange"></Button>
<Button text="Show text" class="btn btn-outline btn-active" tap="showText"></Button>
<StackLayout class="input-field">
    <Label text="{{ 'Result: ' + tvResult}}" textWrap="true" />

    <Label text="Enter text:" class="label"></Label>
    <TextView loaded="onTextViewLoaded" text="{{ tvText }}" hint="{{ tvHint }}"  editable="{{ editState }}"
        class="input input-border"></TextView>
</StackLayout>
function onNavigatingTo(args) {
    const page = args.object;
    const vm = new observableModule.Observable();
    vm.set("tvHint", "Enter text");
    vm.set("tvText", "");
    vm.set("tvResult", "");
    vm.set("editState", true);
    vm.set("buttonText", "Disable TextView");
    // handling TextView text change
    vm.on(observableModule.Observable.propertyChangeEvent, (propertyChangeData) => {
        if (propertyChangeData.propertyName === "tvText") {
            vm.set("tvResult", propertyChangeData.value);
        }
    });
    page.bindingContext = vm;
}
// changing TextView editable property value on button tap
function textViewEditStateChange(args) {
    const page = args.object.page;
    const vm = page.bindingContext;

    const editState = vm.get("editState");
    vm.set("editState", !editState);
    if (editState) {
        vm.set("buttonText", "Enable TextView");
    } else {
        vm.set("buttonText", "Disable TextView");
    }
}
// displaying the TextView text in an Alert dialog
function showText(args) {
    const page = args.object.page;
    const vm = page.bindingContext;

    dialogs.alert(`Text: ${vm.get("tvText")}`)
    .then(() => {
        console.log("Dialog closed!");
    });
}
function onTextViewLoaded(args) {
    const textView = args.object;
    textView.on("textChange", (args) => {
        console.dir(args);
    });
}

exports.onNavigatingTo = onNavigatingTo;
exports.textViewEditStateChange = textViewEditStateChange;
exports.showText = showText;
exports.onTextViewLoaded = onTextViewLoaded;
export function onNavigatingTo(args) {
    const page: Page = <Page> args.object;
    const vm = new Observable();
    vm.set("tvHint", "Enter text");
    vm.set("tvText", "");
    vm.set("tvResult", "");
    vm.set("editState", true);
    vm.set("buttonText", "Disable TextView");
    // handling TextView text change
    vm.on(Observable.propertyChangeEvent, (propertyChangeData: PropertyChangeData) => {
        if (propertyChangeData.propertyName === "tvText") {
            vm.set("tvResult", propertyChangeData.value);
        }
    });
    page.bindingContext = vm;
}
// changing TextView editable property value on button tap
export function textViewEditStateChange(args) {
    const page: Page = <Page> args.object.page;
    const vm = page.bindingContext;

    const editState = vm.get("editState");
    vm.set("editState", !editState);
    if (editState) {
        vm.set("buttonText", "Enable TextView");
    } else {
        vm.set("buttonText", "Disable TextView");
    }
}
// displaying the TextView text in an Alert dialog
export function showText(args) {
    const page: Page = <Page> args.object.page;
    const vm = page.bindingContext;

    dialogs.alert(`Text: ${vm.get("tvText")}`)
    .then(() => {
        console.log("Dialog closed!");
    });
}
export function onTextViewLoaded(args) {
    const textView: TextView = <TextView>args.object;
    textView.on("textChange", (argstv) => {
        console.dir(argstv);
    });
}

Improve this document

Demo Source


Code Behind

Creating TextView via code behind and setting up hint, text and editable properties 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);
}

Improve this document

Demo Source


API Reference for the TextView Class

Native Component

Android iOS
android.widget.EditText UITextView