Search code examples
androidtextviewnativescriptangular2-nativescript

dynamic size textview nativescript when you are writing a message


I make a messagerie service like whatsapp in nativescript with angular2 and i have a issue with the size(height) of the textview when you are writing a message in the android platform. i want the height increase when you add an other line (like whatsapp or facebook, etc).

In IOS, it's simple. click on the link

dynamic size of a textview in IOS

my html template is (just the bottom of the screen) :

<StackLayout class="message-box-container">
            <GridLayout columns="auto, *, auto"
                        class="message-box">
                <Label col="0"
                       class="fa link"
                       [text]="'fa-link' | fonticon">
                </Label>
                <GridLayout columns="auto, *"
                            col="1"
                            class="message-box-field">
                    <TextView #newMessage
                              col="0"
                              editable="true"
                              hint="Write a message..."
                              textWrap="true"
                              [(ngModel)]="newMessage.text"
                              (ngModelChange)="textChanged()"
                              [style.height]="textHeight"
                              class="write-message-field"></TextView>
                    <Label (tap)="sendMessage()"
                           col="1"
                           class="fa arrow"
                           [text]="'fa-arrow-circle-up' | fonticon">
                    </Label>
                </GridLayout>
            </GridLayout>
        </StackLayout>

for changing, the size of a textview when you are typing in IOS:

 textChanged() {
        if (isIOS) {
            this.textHeight = this.newMessage.ios.contentSize.height;
        } else{//ANDROID TODO}

Solution

  • It's much more easier than you think, just don't set a height to TextView / set it to auto so it grows till as much height is requires.