Tabs

The Tabs 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 Tabs is a mid level navigation. 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 Tabs component roundup

Semantic: Mid Level Navigation
Usage: Unlimited Tabs with common function
Transitions: Slide Transition indicating the relative position to each other
Gestures: Swipe Gesture
Preloading: At least 1 to the sides (because of the swipe gesture)

Usage

The Tabs 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.

<Tabs 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>

</Tabs>

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

Improve this document

Demo Source

Theming

Note: - The integration with nativescript-theme and the support for custom CSS is currently under development and is on its way.

Tabs.tabs {
    background-color: orangered;
    color: gold;
}

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

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

TabContentItem.first-tabcontent {
    color: olive;
}

TabContentItem.second-tabcontent {
    color: aquamarine;
}

TabContentItem.third-tabcontent {
    color: antiquewhite;
}

Improve this document

Demo Source

Properties

items: Array<TabContentItem>; - Gets or sets the items of the BottomNavigation.
tabStrip: TabStrip; - Gets or sets the tab strip of the BottomNavigation.
selectedIndex: number; - Gets or sets the selectedIndex of the BottomNavigation.
swipeEnabled: boolean; - Gets or sets the swipe enabled state of the Tabs.
offscreenTabLimit: number; - Gets or sets the number of offscreen preloaded tabs of the Tabs.

Example:
- Let's assume that the TabContentItem[1] is selected (selectedIndex = 1) and offscreenTabLimit is set to 1.
  
  Result: The content for TabContentItem[0] and TabContentItem[2] will be pre-loaded.
- Select TabContentItem2.
  
  Result: TabContentItem[0] will be unloaded and TabContentItem[3] will be pre-loaded.
tabsPosition: "top" | "bottom"; - Gets or sets the position state of the Tabs.
android: any /* android.view.View */; - Gets the native android widget that represents the user interface for this component. Valid only when running on Android OS.
ios: any /* UIPageViewController */; - Gets the native iOS UIPageViewController that represents the user interface for this component. Valid only when running on iOS.

const TabStrip = require("tns-core-modules/ui/tabs").TabStrip;
const TabStripItem = require("tns-core-modules/ui/tabs").TabStripItem;
const TabContentItem = require("tns-core-modules/ui/tabs").TabContentItem;

exports.onTabsLoaded = (args) => {
    // Tabs
    const tabs = args.object;
    /*
        Using the items property to assign array of TabContentItem components (with content)
        Note: The number of TabContentItem components should be equal to the number of TabStripItem components
    */
    const tabContentItemsArray = createTabsContentArray();
    tabs.items = tabContentItemsArray;

    /*
        Using the tabStrip property to createa a TabStrip with multiple TabStripItems (tabs)
        Note: The number of TabStripItem components should be equal to the number of TabContentItem components
    */
    const tabStrip = createTabStrip();
    tabs.tabStrip = tabStrip;

    /*
        Using the Tabs properties
    */
    tabs.selectedIndex = 1;
    tabs.swipeEnabled = true;

    /*
        offscreenTabLimit:  Sets the number of TabContentItem to be preloaded.
    */
    tabs.offscreenTabLimit = 1;
    tabs.tabsPosition = "top"; //  Suppported values: 'top' or 'bottom'

    /*
        Using the nativeView property (correspnding to tabs.ios or tabs.android depending on the used platform)
    */
    console.log("tabs.nativeView: ", tabs.nativeView);
};

import { EventData } from "tns-core-modules/data/observable";
import { Tabs, TabStrip, TabStripItem, TabContentItem } from "tns-core-modules/ui/tabs";

export function onTabsLoaded(args: EventData) {
    const tabs = args.object as Tabs;

    /*
        Using the items property to assign array of TabContentItem componentns
        Note: The number of TabContentItem components should be equal to the number of TabStripItem components
    */
    const tabContentItemsArray: Array<TabContentItem> = createTabsContentArray();
    tabs.items = tabContentItemsArray;

    /*
        Using the tabStrip property to createa a TabStrip with multiple TabStripItems (tabs)
        Note: The number of TabStripItem components should be equal to the number of TabContentItem components
    */
    const tabStrip = createTabStrip();
    tabs.tabStrip = tabStrip;

    /*
        Using the Tabs properties
    */
    tabs.selectedIndex = 1;
    tabs.swipeEnabled = true;
    tabs.offscreenTabLimit = 1;
    tabs.tabsPosition = "top";

    console.log(tabs.nativeView);
}

Improve this document

Demo Source

Events

selectedIndexChanged - Event used to track the tabs interaction though the change of selectedIndex property of Tabs component. The event data is of type SelectedIndexChangedEventData extends EventData with two new properties:
- oldIndex - Provides the old selected index.
- newIndwex - Provides the new selected index.

exports.onTabsLoaded = (args) => {
    // Using the loaded event to ger a reference to the Tabs
    const tabs = args.object;

    // Using selectedIndexChanged
    tabs.on("selectedIndexChanged", (args) => {
        // args is of type SelectedIndexChangedEventData
        const oldIndex = args.oldIndex;
        const newIndex = args.newIndex;
        console.log(`oldIndex: ${oldIndex}; newIndex: ${newIndex}`);

        args.object.page.bindingContext.set("selectedIndex", newIndex);
    });
};

import { EventData, fromObject } from "tns-core-modules/data/observable";
import { Tabs, SelectedIndexChangedEventData } from "tns-core-modules/ui/tabs";
export function onTabsLoaded(args: EventData) {
    // Using the loaded event to ger a reference to the Tabs
    const tabs = args.object as Tabs;

    // Using selectedIndexChanged
    tabs.on(Tabs.selectedIndexChangedEvent, (data: SelectedIndexChangedEventData) => {
        const oldIndex: number = data.oldIndex;
        const newIndex: number = data.newIndex;
        console.log(`oldIndex: ${oldIndex}; newIndex: ${newIndex}`);

        (<any>args.object).page.bindingContext.set("selectedIndex", newIndex);
    });
}

Improve this document

Demo Source

Tips And Tricks

Icon Fonts in Tabs

Using icon fonts to customize the UI of your TabStripItem components is possible through the font:// prefix for the iconSource property.

<Tabs selectedIndex="1" class="fas font-size">
    <!-- Using icon fonts for each TabStripItem -->
    <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>
        <TabStripItem class="special">
            <Label text="Search"></Label>
            <Image src="font://&#xf00e;" class="fas"></Image>
        </TabStripItem>
    </TabStrip>

    <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>

</Tabs>

Improve this document

Demo Source

API Reference for the Tabs Class

Native Component

Android	iOS
ViewPager	UIPageViewController

NativeScript Core

Tabs

Usage

Theming

Properties

Events

Tips And Tricks

Icon Fonts in Tabs