[ui-material-bottomnavigationbar] What is the better way to implement the loaded page ?

[kefahB]

Hi @farfromrefug,

What is the better way to implement the ui-material-bottomnavigationbar ? I mean we can simply hide the old page/frame and show the new with the visibility property or rather use the Frame.Builder to load/unload the views within the first child of the GridLayout ?

[farfromrefug]

@kefahB i never used it :D. But yes either that or you should be able to plug it on a TabView or even a BottomNavigation. Just dont set a tapStrip and plug the events.

[kefahB]

It is a very good idea my dear ;)

I'ill put the code here for other people, maybe the demo and the readme can be more explicit on this one ;)

it is very important to wrap the mdt:BottomNavigation into a GridLayout then you can set a marginBottom=0. if you dont not so, the mdt:BottomNavigation will expand the safe area and it will be under the mdc:BottomNavigationBar Tabs

<!-- main-page..xml -->
<Page 
xmlns="http://www.nativescript.org/tns.xsd" 
xmlns:mdc="@nativescript-community/ui-material-bottomnavigationbar" 
xmlns:mdt="@nativescript-community/ui-material-bottom-navigation" 
loaded="onLoaded" navigating="onNavigatedTo">

<GridLayout rows="*, auto" loaded="onLoaded">
    <GridLayout  row="0" columns="" marginBottom="0">
        <mdt:BottomNavigation id="bottomNavigation" loaded="onBottomNavigationLoaded" selectedIndex="{{ bottomNavigationSelectedIndex ? bottomNavigationSelectedIndex : 0}}">
            <mdt:TabContentItem>
                <Frame id="home" defaultPage="views/home/home"></Frame>
            </mdt:TabContentItem>
            <mdt:TabContentItem>
                <Frame id="transactions" defaultPage="views/transaction/transactionsList/transactions"></Frame>
            </mdt:TabContentItem>
            <mdt:TabContentItem>
                <Frame id="menuManager" defaultPage="views/menuManager/menuManager"></Frame>
            </mdt:TabContentItem>
            <mdt:TabContentItem>
                <Frame id="currentDay" defaultPage="views/bookingManager/currentDay/currentDay"></Frame>
            </mdt:TabContentItem>
    </mdt:BottomNavigation>
    </GridLayout>

    <mdc:BottomNavigationBar
        backgroundColor="white"
        tabSelected="onBottomNavigationTabSelected"
        loaded="onbottomNavigationBarLoaded"
        activeColor="#000000"
        inactiveColor="gray"
        row="1"
        selectedTabIndex="1"
    >
        <mdc:BottomNavigationTab title="Home" icon="res://ic_home" />
        <mdc:BottomNavigationTab title="Transactions" icon="res://ic_list" />
        <mdc:BottomNavigationTab title="Menu" icon="res://ic_menu" />
        <mdc:BottomNavigationTab title="Bookings" icon="res://ic_bookings" />
    </mdc:BottomNavigationBar>
</GridLayout>    
</Page>

To plug the event from mdc:BottomNavigationBar to mdt:BottomNavigation simply bind the context from mdc:BottomNavigationBar tabSelected event with the newIndex to the mdt:BottomNavigation selectedIndex="{{ bottomNavigationSelectedIndex ? bottomNavigationSelectedIndex : 0}}"

//main-page.ts
export function onBottomNavigationTabSelected(args: TabSelectedEventData): void {
    console.log('onBottomNavigationTabSelected');
    console.log(`old tab index:  ${args.oldIndex}`);
    console.log(`selected tab index:  ${args.newIndex}`);   
    const newIndex = args.newIndex;
    const oldIndex = args.oldIndex;

    let view = args.object as View;
    let page: Page = view.page as Page;

    page.bindingContext = new Observable();
    page.bindingContext = {
        "bottomNavigationSelectedIndex": newIndex
    }
}

[farfromrefug]

@kefahB in case you need it i added a few releases back a iosCustomPositioning property just to handle that kind of cases