How do I use this with Frame navigating pages?

[kspearrin]

When using a TabView in NativeScript Core, you do something like this:

<TabView androidTabsPosition="bottom">
    <TabViewItem title="Home" iconSource="res://ic_heart">
        <Frame defaultPage="home/home-page"></Frame>
    </TabViewItem>

    <TabViewItem title="Home 2" iconSource="res://ic_heart">
        <Frame defaultPage="home-page2"></Frame>
    </TabViewItem>

    <TabViewItem title="Home 3" iconSource="res://ic_heart">
        <Frame defaultPage="home-page3"></Frame>
    </TabViewItem>
</TabView>

Frames are create for each tab item. and the defined page for each tab is navigated to.

How would I achieve the same with this plugin? All the examples just seem to show how to display the bottom bar and then just capture the loaded and item selected events.

[rhanb]

Hello @kspearrin ,

This how you should do it:

XML

<GridLayout rows="*, auto" class="page">
        <StackLayout row="0" orientation="vertical">
            <Frame id="root" defaultPage="featured-page"></Frame>
        </StackLayout>
        <ui:BottomBar row="1"
            automationText="bottomBar"
            loaded="{{ bottomBarLoaded($event) }}"
            tabSelected="{{ bottomBarItemSelected($event) }}">
            <ui:BottomBarItem badgeBackgroundColor="green" badge="1" icon="res://ic_home_outline" title="Home 1" checkedIcon="res://ic_home_filled"></ui:BottomBarItem>
            <ui:BottomBarItem icon="res://ic_home_outline" badge="2" title="Home 2" checkedIcon="res://ic_home_filled"></ui:BottomBarItem>
            <ui:BottomBarItem icon="res://ic_home_outline" badge="3" title="Home 3" checkedIcon="res://ic_home_filled"></ui:BottomBarItem>
        </ui:BottomBar>
    </GridLayout>

TypeScript

bottomBarItemSelected(event: TabSelectedEventData) {
    switch (event.newIndex) {
         case 0:
            navigateToRootPage('page-name');
             break;
         .
         .
         .
    }
 }

navigateToRootPage(pageName: string) {
     const featuredFrame = getFrameById("root");
    featuredFrame.navigate({
        moduleName: pageName,
        clearHistory: true
    });
}

[kspearrin]

Thanks!