Nativescript Angular TabStrip Visibility set to collapse still take up space

Question

I have a navigation tab written as below. I wish to hide the tabStrip and setting the visibility to collapse did the job. However the hidden tabStrip still taken up white space in the area. Any ideas how i can get rid of the white space completely?

<Tabs selectedIndex="0" tabsPosition="top" >

    <TabStrip [visibility]="hideTab() ? 'visible' : 'collapse'">
        <TabStripItem class="special">
            <Label text="test"></Label>
        </TabStripItem>
    </TabStrip>

    <TabContentItem>
    </TabContentItem>
</Tabs>

Answer 1

In order to hide the TabBar on iOS, you will have adjust the frame size once the content is loaded.

onTabViewLoaded(tabView) {
    const viewController = tabView.viewController,
        tabBar = viewController.tabBar;

    tabBar.frame = CGRectMake(tabBar.frame.origin.x, tabBar.frame.origin.y, tabBar.frame.size.width, 0);
}

Playground Sample