Nativescript-vue: How to build a chat template

Question

I want to build a small chat as we all know from WhatsApp. Currently I am able to display messages within a ListView.

<template>
  <Page>
    <ListView separatorColor="transparent" for="item in messages">
      <v-template>
        <GridLayout>
          <TextView
            height="auto"
            editable="false"
            :text="item.message"
          />
        </GridLayout>
      </v-template>
    </ListView>
  </Page>
</template>

My next step is to add a TextView with a Button at the end of the page. But here are coming my problems:

Which Layout component should I choose to position a TextView at the bottom of the page.
If I tab into my editable TextView the virtual keyboard overlaps my current page. Instead it should resize the whole page. How can I do this?

This is my current playground project: https://play.nativescript.org/?template=play-vue&id=F8lXkO

EDIT: I found a way which works on Android using DockLayout: https://play.nativescript.org/?template=play-vue&id=F8lXkO&v=3

Unfortunately this works only in the playground. Using the latest nativescript version on android is not working. If I tab on the TextView the layout breaks => https://github.com/sowinski/nativescript-vue-chat

kan101 kan101 · Accepted Answer · 2021-06-24T11:46:43

Use GridLayout for the entire view. You can use this as a guide - https://github.com/Especializa/nativescript-whatsapp-template Use this to better understand Nativescript layouts - https://www.nslayouts.com/

Nativescript-vue: How to build a chat template

1 Answers