Nativescript-vue ios gridlayout находится под строкой состояния и перемещается вниз после нажатия кнопки

Question

У меня сетка с двумя строками по 0. Первая видна, а вторая становится видимой после нажатия кнопки. В основном простая оверлейная страница.

Работает нормально на Android, однако на Ios. Строка оверлея проходит под строкой состояния, а когда вы нажимаете на страницу, она перемещается вниз.

Я потратил несколько дней, пытаясь выяснить, что это за проблема, но ничего не работает. Кто-нибудь, кто может мне помочь?

Изображение при открытии оверлейной сетки

После нажатия раскладка перемещается вниз

<template>
  <GridLayout rows="*"  columns="*">

        <GridLayout rows="auto, *, auto"  columns="*" :class="pageBackground">

              <StackLayout row="0" col="0">

                  <GridLayout rows="auto"  columns="auto, auto, auto, *, auto" class="">
                    <Label row="0" col="0" :text="FilterBtnLabelDatum" class="filter-item" :class="{'filter-item-active' : FilterBtnDatumClass }" @tap="datumFilter" />
                  </GridLayout>

              </StackLayout>

              <StackLayout v-show="!showLoading" row="1" col="0">
                  <ScrollView height="100%">
                      <ListView for="(Waarneming, index) in WaarnemingList" class="bcEEEEEE" @itemTap="BekijkwaarnemingDetails" separatorColor="#EEEEEE">

                          <v-template if="Waarneming.addBanner === false">
                            <StackLayout>
                                //some code
                            </StackLayout>
                          </v-template>

                      </ListView>
                  </ScrollView>
              </StackLayout>

        </GridLayout>



        <ios>
            <StackLayout row="0" col="0" ref="hiddenLayout" id="hiddenLayout" :translateY="translateYVal" opacity="0" height="100%" verticalAlignment="bottom">
                <ItemDateTimeRange  ref="FilterDateRange"   v-show="ShowDateRangePicker"    width="100%" height="100%" backgroundColor="#FFF"   @closeWindow="closeDateRangeWindow"/>
            </StackLayout>
        </ios>

        <android>
            <StackLayout row="0" col="0" ref="hiddenLayout" id="hiddenLayout" :translateY="translateYVal" opacity="0" height="100%" verticalAlignment="bottom" @tap="ignoreTap">
                <ItemDateTimeRange  ref="FilterDateRange"   v-show="ShowDateRangePicker"    width="100%" height="100%" backgroundColor="#FFF"   @closeWindow="closeDateRangeWindow"/>
            </StackLayout>
        </android>

  </GridLayout>
</template>

<script>

import {screen}                 from "platform";
//import firebase                 from "nativescript-plugin-firebase"
//const firebaseWebApi          = require("nativescript-plugin-firebase/app");

var enums                       = require("tns-core-modules/ui/enums");
import { mapState, mapGetters } from "vuex";

import WaarnemingDetails        from '../components/PageWaarnemingDetails';
const appSettings               = require("tns-core-modules/application-settings");

export default {
    name: "Home-tab",
    data() {
        return {
            pageBackground          : '',
            animateVisible          : false,
            translateYVal           : 3000,
            ShowDateRangePicker     : false,
            ShowAfstandPicker       : false,
            ShowAdvPicker           : false,
            ShowsortOrder           : false,
            ShowsInviteWindow       : false,
            showLoading             : true,

            //posts                   : [],
            ZoekenLabel             : "zoeken",
            FilterZoeken            : '',
            FilterBtnLabelDatum     : "datum",
            FilterBtnDatumClass     : false,
            FilterBtnLabelAftand    : "afstand",
            FilterBtnAfstandClass   : false,
            FilterBtnLabelAdv      : "adv",
            FilterBtnAdvClass      : false,
            FilterBtnAlarmLabel     : 'Alarm',
            FilterBtnAlarmClass     : false,
            FilterSortOrderLabel    : "Sorteer op Datum",
            WaarnemingList          : [],
            WaarnemingenFB          : {},
            SortOptieArr            : [],


        };
    },
    async mounted(){
        console.log("--- mounted PAGE: PageHome --");
        if (this.$appData.isLocalVersion() === true) {
            this.pageBackground = 'localVersion';
        }

        this.SortOptieArr           = this.$appData.getSortOptieArr();
        this.FilterSortOrderLabel   = this.SortOptieArr[this.Filters.SortOptie].Label;

        this.LoadHomePageFilters();
        this.GetWaarnemingsDataDelayed(100);
    },
    created(){},
    computed: {
        ...mapGetters(["WaarnemingenChanged"])
    },
    watch: {
        WaarnemingenChanged(WaarneemChanged) {
            console.log("Waarneeming Changed!!");
            this.GetWaarnemingsDataDelayed(500);
        }
    },
    methods: {

        datumFilter(){
            //console.log("Datum Filter tapped");
            this.ShowDateRangePicker    = true;
            this.ShowsortOrder          = false;
            this.ShowAfstandPicker      = false;
            this.ShowsInviteWindow      = false;
            this.ShowAdvPicker          = false;
            this.animateInUp();
        },

        async animateInUp(){
            this.animateVisible = true;
            this.translateYVal = Math.max(screen.mainScreen.heightDIPs, screen.mainScreen.widthDIPs);
            //console.log("Screen size:", this.translateYVal);

            this.$refs.hiddenLayout.nativeView.animate({
                //target: this.$refs.hiddenLayout.nativeView,
                duration: 100,
                opacity: 1,
                curve: enums.AnimationCurve.easeOut,
                translate: {
                    x: 0,
                    y: 0
                }
            }).then(() => {
                //this.state = 'main'
            })
        },
        async animageOutUp(){
            this.animateVisible = false;
            this.translateYVal = Math.max(screen.mainScreen.heightDIPs, screen.mainScreen.widthDIPs);
            //console.log("Screen size:", this.translateYVal);

            this.$refs.hiddenLayout.nativeView.animate({
                //target: this.$refs.hiddenLayout.nativeView,
                duration: 100,
                opacity: 0,
                curve: enums.AnimationCurve.easeIn,
                translate: {
                    x: 0,
                    y: this.translateYVal
                }
            }).then(() => {
                //this.state = 'main'
            })
        },


        async closeDateRangeWindow(arg){
            this.calcDatumFilters(arg);

            this.filterWaarnemingen();

            this.animageOutUp();
            this.animateVisible = false;
            await this.SaveHomePageFilters();

            if (this.FilterBtnAlarmClass === true) {
                this.UpdateNotifyAlarm();
            }
        },
        ignoreTap(){
          if (this.$appData.get_IsAndroid() === true) {
            console.log("Ignoring tap");
            return false;
          }
        },
    },
}
</script>

<style scoped>

    .filter-item{
    font-size:15;
    margin-left:8;
    margin-top:8;
    padding:6;
    border-radius:8;
    color:#484848;
    border-width:1;
    border-color:#EEEEEE;
    }


    .filter-item-active{
    color:#FFFFFF;
    background-color: #f37c82;
    border-width:1;
    border-color:#f37c82;
    }


    .item-datum{
        font-size: 16;
        color:#f37c82;
        margin-right:8;
    }

    .item-titel{
        margin-bottom:8;
        font-size: 16;
        text-align: left;
        color: #484848;
        margin-right:8;
    }

    .item-price{
        font-size: 16;
        color: #9E9E9E;
        margin-left:4;
    }

    .item-detail{
        font-size: 14;
        color: #9E9E9E;
        margin-right:4;
    }
    .fw300{
        font-weight: 300;
    }
    .fw400{
        font-weight: 400;
    }
    .fw600{
        font-weight: 600;
    }

    .localVersion{
        background-color: orange;
    }



</style>