Nativescript databound multiline TextView

Question

I am using Nativescript 6.2.0 Core on a Windows 10 machine. Testing on a Node 9 Android physical device.

I have a TextView that is bound to a field in a model. When the screen is first loaded the value of the field is an empty string. When the user starts typing, I was expecting the TextView to wrap the text to a new line if it becomes too long. Instead, the text continues to the right on the same line.

Here is my XML code:

<TextView hint="Enter some text" text="{{ model.text}}" textChange="enableButton" editable="true" returnKeyType="done" keyboardType="email" />

The same happens if I initialize model.text with some long text. The text stays on one line.

I have a feeling that this behavior has something to do with the databinding, but I am not sure how to fix it.

I tried setting the height to a larger value (e.g. 100). I also tried using android:minLines="2" in the markup. None of those helped.

Here is a playground that illustrates the problem: https://play.nativescript.org/?template=play-tsc&id=h1UV5p&v=2

Any ideas? Thanks.

Can you share a Playground sample where the issue can be reproduced? — Manoj

Manoj Manoj · Accepted Answer · 2019-11-21T17:08:34

In your code keyboardType="email" is stopping text wrap. Looks like when keyboard type is email, you may not able to wrap the text.

A workaround is to set the input type natively along with multi line flag.

export function onLoaded(args) {
    if (args.object.android) {
        args.object.android.setInputType(android.text.InputType.TYPE_CLASS_TEXT | android.text.InputType.TYPE_TEXT_VARIATION_EMAIL_ADDRESS | android.text.InputType.TYPE_TEXT_FLAG_MULTI_LINE);
    }
}

Playground Sample

Nativescript databound multiline TextView

1 Answers