Nativescript Vue: How to change frame height to account for space from other content?

Question

I have in my main App.vue a component, called BottomNavigationBar that is always on screen. Above that, I have a separate Frame that loads up CountryListComponent, which navigates to different parts of that component. The only issue is that some of the content being loaded in the separate Frame is being hidden behind the persistent BottomNavigationBar. I assume I have to adjust the height of the new Frame to lower the height to account for the BottomNavigationBar. I added an @loaded event that called adjustFrameHeight to the Frame but not sure what to run inside of it to adjust the height. What's the best way to do this?

<template>
    <Page actionBarHidden="true">
        <DockLayout height="100%">

            <Frame @loaded="adjustFrameHeight" id="main-frame" height="90%" v-show="this.selectedTab =='1'">
                <CountryListComponent dock="top" @handleItemTap="handleItemTap" :movies="this.movies"/>
            </Frame>

            <BottomNavigationBar 
                        dock="bottom" 
                        activeColor="red"
                        inactiveColor="yellow"
                        backgroundColor="blue"
                        @tabSelected="this.changeTab"
                        verticalAlignment="bottom"
                        row="1">
                <BottomNavigationTab title="First" icon="icon-29.png" />
                <BottomNavigationTab title="Second" icon="icon-29.png" />
                <BottomNavigationTab title="Third" icon="icon-29.png" />
            </BottomNavigationBar>

        </DockLayout>
    </Page>
</template>

Answer 1

You can try to use a GridLayout instead of the DockLayout. * will take up the available space on the screen and auto will take up the maximum height of the child component in that row.

<template>
    <Page actionBarHidden="true">
        <GridLayout rows="*, auto" height="100%">

            <Frame row="0" @loaded="adjustFrameHeight" id="main-frame" height="100%" v-show="this.selectedTab =='1'">
                <CountryListComponent @handleItemTap="handleItemTap" :movies="this.movies"/>
            </Frame>

            <BottomNavigationBar 
                        row="1"
                        activeColor="red"
                        inactiveColor="yellow"
                        backgroundColor="blue"
                        @tabSelected="this.changeTab"
                        verticalAlignment="bottom">
                <BottomNavigationTab title="First" icon="icon-29.png" />
                <BottomNavigationTab title="Second" icon="icon-29.png" />
                <BottomNavigationTab title="Third" icon="icon-29.png" />
            </BottomNavigationBar>

        </GridLayout>
    </Page>
</template>

Answer 2

So, it seems like Frame takes 100% of the height of its direct parent. Just add StackLayout as the parent of the frame

    <Page actionBarHidden="true">
        <GridLayout rows="*, auto" height="100%">
            <StackLayout>
               <Frame row="0" @loaded="adjustFrameHeight" id="main-frame" height="100%" v-show="this.selectedTab =='1'">
                  <CountryListComponent @handleItemTap="handleItemTap" :movies="this.movies"/>
               </Frame>
            </StackLayout>

            <BottomNavigationBar 
                        row="1"
                        activeColor="red"
                        inactiveColor="yellow"
                        backgroundColor="blue"
                        @tabSelected="this.changeTab"
                        verticalAlignment="bottom">
                <BottomNavigationTab title="First" icon="icon-29.png" />
                <BottomNavigationTab title="Second" icon="icon-29.png" />
                <BottomNavigationTab title="Third" icon="icon-29.png" />
            </BottomNavigationBar>

        </GridLayout>
    </Page>
</template>