Make NativeScript ScrollView and TextView inside GridLayout work together (only iOS)

Question

I have tried to create an NativeScript page that take the entire screen but let user scroll it if device has small screen.

I have tried with both code above, but on doing it, TextView auto height size got limited.

The first code is the desired layout (but there is no scrollview when keyboard is open):

<Page class="page" 
    xmlns="http://www.nativescript.org/tns.xsd" loaded="onLoaded" navigatedTo="onNavigatingTo">
    <GridLayout rows="auto,*, auto, *,auto, *, auto" height="100%" columns="*, *" width="100%" height="100%">
        <Label class="label-bold" class='primeiros' row="0" col="0" text="O que foi positivo?" textWrap="true"></Label>
        <Label class="label-bold" class='primeiros' row="0" col="1" text="O que foi positivo?" textWrap="true"></Label>
        <TextView row="1" col="0" backgroundColor='gold' class='primeiros' returnPress="adicionar" textWrap="true" class="input" text="{{ lista.positivo }}"></TextView>
        <TextView row="1" col="1" backgroundColor='gold' class='primeiros' returnPress="adicionar" textWrap="true" class="input" text="{{ lista.negativo }}"></TextView>
        <Label class="label-bold" row="2" colSpan="2" text="Minhas ações a respeito:" textWrap="true"></Label>
        <TextView returnPress="adicionar" row="3" colSpan="2" text="{{ lista.acoes }}"></TextView>
        <Label class="label-bold" row="4" colSpan="2" text="Minha oração sobre esse dia:" textWrap="true"></Label>
        <TextView returnPress="adicionar" row="5" colSpan="2" text="{{ lista.oracao }}"></TextView>
        <Button text="Concluir Este Dia" row="6" colSpan="2" class="btn btn-primary" tap="concluirDia" />
    </GridLayout>
</Page>

On this second code I tried to GridLayout and ScrollView work together, but I had no success. Layout has usability issues.

<Page class="page" 
    xmlns="http://www.nativescript.org/tns.xsd" navigatedTo="onNavigatingTo">
    <GridLayout row="*">
        <StackLayout row="0" height="100%">
            <ScrollView>
                <GridLayout rows="auto,*, auto, *,auto, *, auto" height="100%" columns="*, *" width="100%" height="100%">
                    <Label class="label-bold" class='primeiros' row="0" col="0" text="O que foi positivo?" textWrap="true"></Label>
                    <Label class="label-bold" class='primeiros' row="0" col="1" text="O que foi positivo?" textWrap="true"></Label>
                    <TextView row="1" col="0" backgroundColor='gold' class='primeiros' returnPress="adicionar" textWrap="true" class="input" text="{{ lista.positivo }}"></TextView>
                    <TextView row="1" col="1" backgroundColor='gold' class='primeiros' returnPress="adicionar" textWrap="true" class="input" text="{{ lista.negativo }}"></TextView>
                    <Label class="label-bold" row="2" colSpan="2" text="Minhas ações a respeito:" textWrap="true"></Label>
                    <TextView returnPress="adicionar" row="3" colSpan="2" text="{{ lista.acoes }}"></TextView>
                    <Label class="label-bold" row="4" colSpan="2" text="Minha oração sobre esse dia:" textWrap="true"></Label>
                    <TextView returnPress="adicionar" row="5" colSpan="2" text="{{ lista.oracao }}"></TextView>
                    <Button text="Concluir Este Dia" row="6" colSpan="2" class="btn btn-primary" tap="concluirDia" />
                </GridLayout>
            </ScrollView>
     </StackLayout>
</GridLayout>

The real problem on ios is that when keyboard is open, there is no scroll. So I need the scrollview so user can handle all TextView on screen.

Answer 1

That happens because the keyboard overlaps on your page content. What you can do is add another element like a StackLayout with an initial height of 0 below the GridLayout, and assign the height of the keyboard when you open it. This link explains how to get the height of the keyboard on iOS. And for your page code, I would do something like this:

<Page class="page" xmlns="http://www.nativescript.org/tns.xsd" navigatedTo="onNavigatingTo">
<ScrollView>
  <GridLayout rows="auto,*, auto, *,auto, *, auto" height="100%" columns="*, *" width="100%">
    <Label class="label-bold" class='primeiros' row="0" col="0" text="O que foi positivo?" textWrap="true"></Label>
    <Label class="label-bold" class='primeiros' row="0" col="1" text="O que foi positivo?" textWrap="true"></Label>
    <TextView row="1" col="0" backgroundColor='gold' class='primeiros' returnPress="adicionar" textWrap="true" class="input"
      text="{{ lista.positivo }}"></TextView>
    <TextView row="1" col="1" backgroundColor='gold' class='primeiros' returnPress="adicionar" textWrap="true" class="input"
      text="{{ lista.negativo }}"></TextView>
    <Label class="label-bold" row="2" colSpan="2" text="Minhas ações a respeito:" textWrap="true"></Label>
    <TextView returnPress="adicionar" row="3" colSpan="2" text="{{ lista.acoes }}"></TextView>
    <Label class="label-bold" row="4" colSpan="2" text="Minha oração sobre esse dia:" textWrap="true"></Label>
    <TextView returnPress="adicionar" row="5" colSpan="2" text="{{ lista.oracao }}"></TextView>
    <Button text="Concluir Este Dia" row="6" colSpan="2" class="btn btn-primary" tap="concluirDia" />
  </GridLayout>
  <StackLayout [height]="keyboardHeight" width="100%"></StackLayout>
</ScrollView>

Let us know if you have more questions