NativeScript Core

Bottom Navigation

The BottomNavigation component provides a simple way to navigate between different views while providing common UI for both iOS and Android platforms. The recommended scenario suitable for BottomNavigation is a high level navigation with 3 to 5 tabs each with separate function. For additional information and details about bottom navigation refer to the Material Design guidelines.

Note: NativeScript 6 introduced two new UI components called BottomNavigation and Tabs. The idea behind them is to provide more control when building tab based UI, while powering the CSS styling, the icon font support and other specific functionalities. Prior to NativeScript 6, we had the TabView component which had top and bottom implementations with different behavoirs for the different platofrms and some styling limitations. With BottomNavigaiton and Tabs coomponents available, the TabView can be considered obsolete.

The BottomNavigation component roundup:

Component Primary Objectives:

  • Used for High Level navigation.
  • Good for UX structure with 3 to 5 different options.
  • Greater control over styling (copared to TabVIew).

Limitations

  • No navigation transitions.
  • No navigation gestures (e.g., swipe to navigate).
  • No content preloading.

Usage

The BottomNavigation component contains two sub-components:

  • The TabStrip which defines and rendres the bottom bar and its TabStripItem components.
  • Multiple TabContentItem components which total number should be equal to the number of the tabs (TabStripItem components). Each TabContentItem acts as a container for your tab content.
<BottomNavigation selectedIndex="1">

    <!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
    <TabStrip>
        <TabStripItem>
            <Label text="Home"></Label>
            <Image src="font://&#xf015;" class="fas"></Image>
        </TabStripItem>

        <TabStripItem class="special">
            <Label text="Account"></Label>
            <Image src="font://&#xf007;" class="fas"></Image>
        </TabStripItem>

        <!-- 
            The below two conventions (shorthand vs exteded syntax) are identical in UI outcome but the second one will provide you with greater control over your TabStripItem UI.
            When using the first shorthand syntax then your Icon Font CSS class should be set on the BottomNavigation element.
         -->
        <!-- <TabStripItem title="Search" iconSource="font://&#xf00e;"></TabStripItem> -->
        <TabStripItem class="special">
            <Label text="Search"></Label>
            <Image src="font://&#xf00e;" class="fas"></Image>
        </TabStripItem>
    </TabStrip>

    <!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
    <TabContentItem>
        <GridLayout>
            <Label text="Home Page" class="h2 text-center"></Label>
        </GridLayout>
    </TabContentItem>
    <TabContentItem>
        <GridLayout>
            <Label text="Account Page" class="h2 text-center"></Label>
        </GridLayout>
    </TabContentItem>
    <TabContentItem>
        <GridLayout>
            <Label text="Search Page" class="h2 text-center"></Label>
        </GridLayout>
    </TabContentItem>

</BottomNavigation>

Note: The number of TabStripItem components must be equal to the number of tabContentItem components.

Improve this document

Demo Source


Styling

<!-- BottomNavigation supports the CSS properties `background-color` and `color` -->
<BottomNavigation selectedIndex="1" class="bottom-nav">

    <!-- TabStripItem supports the CSS pseudo selector :active (see theming-page.css) -->
    <TabStrip>
        <TabStripItem class="tabstripitem">
            <Label text="Home"></Label>
            <Image src="font://&#xf015;" class="fas t-36"></Image>
        </TabStripItem>
        <TabStripItem class="tabstripitem">
            <Label text="Account"></Label>
            <Image src="font://&#xf007;" class="fas t-36"></Image>
        </TabStripItem>
        <TabStripItem class="tabstripitem">
            <Label text="Search"></Label>
            <Image src="font://&#xf00e;" class="fas t-36"></Image>
        </TabStripItem>
    </TabStrip>

    <TabContentItem class="first-tabcontent">
        <GridLayout>
            <Label text="Home Page" horizontalAlignment="center" verticalAlignment="middle"/>
        </GridLayout>
    </TabContentItem>
    <TabContentItem class="second-tabcontent">
        <GridLayout>
            <Label text="Account Page" horizontalAlignment="center" verticalAlignment="middle"/>
        </GridLayout>
    </TabContentItem>
    <TabContentItem class="third-tabcontent">
        <GridLayout>
            <Label text="Search Page" horizontalAlignment="center" verticalAlignment="middle"/>
        </GridLayout>
    </TabContentItem>

</BottomNavigation>
TabStripItem.tabstripitem {
    background-color: teal;
}

TabStripItem.tabstripitem:active {
    background-color: yellowgreen;
} 

TabContentItem.first-tabcontent {
    background-color: seashell;
    color: olive;
}
TabContentItem.second-tabcontent {
    background-color: slategray;
    color: aquamarine;
}
TabContentItem.third-tabcontent {
    background-color: blueviolet;
    color: antiquewhite;
}

.fas {
    font-family: "Font Awesome 5 Free", "fa-solid-900";
    font-weight: 900;
}

.t-36 {
    font-size: 36;
}

Improve this document

Demo Source


Properties

BottomNavigation Properties

Name Type Description
items Array<TabContentItem> Gets or sets the items of the BottomNavigation.
selectedIndex number Gets or sets the selectedIndex of the BottomNavigation.
tabStrip TabStrip Gets or sets the tab strip of the BottomNavigation.

TabStrip Properties

Name Type Description
iosIconRenderingMode "automatic", "alwaysOriginal", "alwaysTemplate" Gets or sets the icon rendering mode on iOS.
isIconSizeFixed boolean When set to true the icon will have fixed size following the platform-specific design guidelines. Default value: true.
items Array<TabStripItem> Gets or sets an array of strip items of the TabStrip.

TabStripItem Properties

Name Type Description
title string Gets or sets the title of the tab strip entry.
iconSource string Gets or sets the icon source of the tab strip entry. Supports local image paths (~), resource images (res://) and icon fonts (font://)
image Image Gets or sets the image of the tab strip entry.
label Label Gets or sets the label of the tab strip entry.

Events

BottomNavigation Events

Name Description
selectedIndexChanged Emitted when the selectedIndex property is changed.
loaded Emitted when the view is loaded.
unloaded Emitted when the view is unloaded.
layoutChanged Emitted when the layout bounds of a view changes due to layout processing.

TabStrip Events

Name Description
itemTap Emitted when a TabStripItem is tapped.

TabStripItem Events

Name Description
tap Emitted when a TabStripItem is tapped.

API References

Name Type
BottomNavigation Class
TabStrip Class
TabStripItem Class
TabContentItem Class

Native Component

Android iOS
FrameLayout UITabViewController