NativeScript Angular - Footer Displayed Above Keyboard

Question

In NativeScript Angular I have a page with the following code:

<DockLayout stretchLastChild="true" height=100%>
    <Button dock="bottom" text="bottom" style="background-color: #AA0078;"></Button>
    <TextField dock="top" hint="Search" textFieldHintColor="black"></TextField>
    <Button text="fill" style="background-color: #CCFFFF;"></Button>
</DockLayout>

Which looks like this:

Image: Footer is docked to bottom of the page

But when the keyboard appears, the footer gets displayed above the keyboard as the page gets resized. Instead I would like the footer to stay where it is, underneath the keyboard out of sight.

Image: Footer appears above keyboard

I have tried setting the height to "screen.mainScreen.heightDIPs" but the value this returns is actually wrong (it is about 80 DIP higher than the actual application window height on one device).

Thanks

Answer 1

Set windowSoftInputMode to adjustPan on the NativeScriptActivity in your /App_Resources/Android/src/main/AndroidManifest.xml

<activity android:name="com.tns.NativeScriptActivity" 
          android:windowSoftInputMode="adjustPan"
          ...>

This prevents the window from being resized when while showing soft keyboard. This is something specific to Android, will not occur on iOS.