nativescript-nbmaterial-bottomnav

Nativescript implementation of the Material Bottom Navigation

The module implement Bottom Navigation Layout on both iOS and Android.
You can add a shit animation to nav items by adding "shifted" class to the component. Icon and Title extends nativescript Label. You can use a font library like material-icons or font-awesome.

If you want to use it as a root navigator your app.ts must looks like:

import "./bundle-config";
import {startWithMenu} from 'nativescript-nbmaterial-bottomnav';
 
startWithMenu({ moduleName: 'home/home-page' }, "menu/menu-page");

"moduleName" is your first screen.

And menu-page looks like:

<Page xmlns="http://schemas.nativescript.org/tns.xsd" 
xmlns:bnav="nativescript-nbmaterial-bottomnav">
    <bnav:BottomNavigation autoselect="false" select="selectNav" id="bottomnav" class="shifted">
        <bnav:BottomNavigationItem>
            <bnav:Icon text="dashboard"  />
            <bnav:Title text="Home"/>
        </bnav:BottomNavigationItem>
        <bnav:BottomNavigationItem>
            <bnav:Icon text="add"/>
            <bnav:Title text="Ajouter" />
        </bnav:BottomNavigationItem>
        <bnav:BottomNavigationItem>
            <bnav:Icon text="favorite"/>
            <bnav:Title text="Consulter" />
        </bnav:BottomNavigationItem> 
    </bnav:BottomNavigation>  
</Page>
 
}

See all modules here