Nativescript IQKeyboardManager breaks layout with TextView at the Bottom

Question

I am having an issue with the nativescript-IQKeyboardManager plugin in iOS (android works fine), tried different approaches changing layout but nothing seems to do the trick. Any help is greatly appreciated!

I tried different layouts (Stacklayout, wrapping with ScrollView) but have had no luck making it work as expected.

The template is the following (using nativescript-vue):

<template>
  <Page class="page">
      <GridLayout rows="auto, *, auto" class="m-y-10 m-x-10" height="100%">
        <GridLayout row="0" columns="*, auto">
          <Label col="0" class="h3 heading" textWrap="true" :text="'XXXX" fontWeight="bold"></Label>
          <Label col="1" class="p-t-5" text="Close" @tap="onCancelTap" />
        </GridLayout>
        <ListView row="1" for="msg in messages" ref="listView" @itemLoading="onItemLoading">
          <v-template>
            <GridLayout columns="*" rows="auto, auto" class="msg p-10">
              .....
            </GridLayout>
          </v-template>
        </ListView>
        <StackLayout row="2">
            <GridLayout columns="*, auto" class="m-10 form">
                <TextField class="text-input p-x-5" col="0" v-model="message" />
                <Button class="btn-primary p-10 m-x-10" col="1" text="Enviar" @tap="chat(message)"></Button>
            </GridLayout>
        </StackLayout>
      </GridLayout>
  </Page>
</template>

Can you share a Playground sample where the issue can be reproduced. — Manoj
I just built one: play.nativescript.org/?template=play-vue&id=sYRDBo&v=11 ... but it is working correctly on my iPhone but my emulator has the behaviour shown in the gif above. Any idea why could this be happening? Thanks! — Hans
Just realized that the issue only arises when I'm using a form inside a modal. I just tested using the chat without a modal and it works fine. — Hans

Hans Hans · Accepted Answer · 2019-09-11T12:43:48

The issue only arises when using the form inside a modal with a ListView in the Layout. There's an open ticket for the plugin at https://github.com/tjvantoll/nativescript-IQKeyboardManager/issues/42

Nativescript IQKeyboardManager breaks layout with TextView at the Bottom

1 Answers