Hiding Tab Navigation

app.css

.title {
    font-size: 30;
    horizontal-align: center;
    margin:20;
}

main-page.js

var observable = require("data/observable");
var utils = require("utils/utils");

var density = utils.layout.getDisplayDensity();
var HEIGHT = 54;

var items = [];
for (var i = 1; i <= 100; i++) {
    items.push(i);
}
var pageData = new observable.Observable();
pageData.set("items", items)

function pageLoaded(args) {
    var page = args.object;
    page.bindingContext = pageData;

    var tabView = page.getViewById("tabView");
    var userList = page.getViewById("list");
    var content = page.getViewById("content");

    userList.on("pan", function (args) {
        var delta = args.deltaY / density;
        console.log("deltaY: " + delta);

        var newValue = content.paddingTop + delta;
        newValue = Math.min(newValue, HEIGHT);
        newValue = Math.max(newValue, 0);
        content.paddingTop = newValue;
        
        tabView.translateY = newValue - HEIGHT;
    })
}
exports.pageLoaded = pageLoaded;

main-page.xml

<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="pageLoaded">
  <GridLayout>
    <SegmentedBar id="tabView" selectedIndex="{{ selectedScreen }}">
      <SegmentedBar.items>
        <SegmentedBarItem title="First Tab" />
        <SegmentedBarItem title="Second Tab" />
      </SegmentedBar.items>
    </SegmentedBar>
    
    <GridLayout id="content" paddingTop="55">
      <ListView items="{{ items }}" id="list" 
        visibility="{{ selectedScreen ===1 ? 'collapsed' : 'visible'  }}"/>
      
      <Label class="title" text="Second Page"
        visibility="{{ selectedScreen ===1 ? 'visible' : 'collapsed' }}"/>
    </GridLayout>
  </GridLayout>
</Page>