Tab View

Important: With version 6 of NativeScript the TabView component is deprecated. Consider using BottomNavigation or Tabs components instead as these components are providing much greater control and functionalities.

The TabView component provides a simple way to navigate between different views by tapping on some of the tabs or by swiping between the views. By default the TabView will load the view of the first tab, however it's possible to load alternative tabs when the app starts by setting the component’s selectedIndex property.

Usage

Using a TabView inside an Angular app requires some special attention about how to provide title, iconSource and content (view) of the TabViewItem. In a pure NativeScript application TabView has an items property which could be set via XML to an array of TabViewItems (basically, an array of objects with title, view and iconSource properties). However, NativeScript-Angular does not support nested properties in its HTML template, so adding TabViewItem to TabView is a little bit different. NativeScript-Angular provides a custom Angular directive that simplifies the way native TabView should be used. The following example shows how to add a TabView to your page (with some clarifications later):

<TabView selectedIndex="0" (selectedIndexChanged)="onSelectedIndexchanged($event)">
    <StackLayout *tabItem="{title: 'First Tab', iconSource: 'res://icon'}">
        <StackLayout>
            <Label text="First Tab" textWrap="true" class="m-15 h2 text-left" color="blue"></Label>
        </StackLayout>
    </StackLayout>
    <StackLayout *tabItem="{title: 'Second Tab', iconSource: 'res://icon'}">
        <StackLayout>
            <Label text="Second Tab" textWrap="true" class="m-15 h2 text-left" color="blue"></Label>
        </StackLayout>
    </StackLayout>
</TabView>

• tabItem: This directive uses a JSON object to transfer properties to the native object. Actually, TabViewItem is a pretty simple object with just title, iconSource and view properties. Since title and iconSource are usually represented as text, TabView directive uses a small JSON object ({title: 'Profile', iconSource: '~/icon.png'}) to define these properties easily in HTML. The view however, is not so simple, therefore the directive uses the tag where tabItem attribute is set as view. Currently, the directive also holds the property textTransform which controls the capitalization of the tab title text. See the Styling section for more information.

Note: If you have set the iconSource property on a TabViewItem, but are not seeing any icons next to the title, this might be because the icon is not present in your App_Resources folder. See the Working with Images article for information on how to add and reference your resource images.

Improve this document

Demo Source

Styling

The TabView component provides several unique styling properties as shown in the example below.

<TabView selectedTabTextColor="white" 
         tabBackgroundColor="orangered"
         tabTextFontSize="16"
         androidSelectedTabHighlightColor="green">
    <StackLayout *tabItem="{title: 'First Tab', iconSource: 'res://icon', textTransform: 'lowercase'}" >
        <Label text="First Tab" textWrap="true" class="m-15 h2 text-left" color="blue"></Label>
    </StackLayout>
    <StackLayout *tabItem="{title: 'Second Tab', iconSource: 'res://icon', textTransform: 'lowercase'}">
        <Label text="Second Tab" textWrap="true" class="m-15 h2 text-left" color="blue"></Label>
    </StackLayout>
</TabView>

Improve this document

Demo Source

Tips And Tricks

TabView General Tips

The general behavior of the TabView component is to load its items on demand. This means that every TabViewItem view will be loaded when it is shown and will be unloaded when it disappears. Respectively, the loaded and unloaded events will be fired when navigating between views. However, there are some specifics for each platform (iOS and Android), which are described in the notes below.

Note (iOS specific): The iOS implementation uses UITabBarController. This means that only one TabViewItem can be shown at a given time and only one needs to be loaded. When the user selects a new TabViewItem, we load the new item and unload the previous one.

Note (Android specific): The Android implementation uses a ViewPager control, which allows using the swipe gesture to navigate to the next or previous tab. This means that only one TabViewItem can be shown, but multiple TabViewItems need to be loaded to the side. If this is not done, you will not be able to see the next TabViewItem contents during the swipe. By default, the ViewPager control will pre-load one TabViewItem on the left and on on the right. Regarding that, if one of the items is already pre-loaded, it will not be loaded again. In NativeScript, we have exposed a property called androidOffscreenTabLimit, which allows specifying how many components should be pre-loaded to the sides (if you are setting up androidOffscreenTabLimit to 0, the Android behavior will match to the iOS behavior).

The iOS and Android UX guidelines regarding the Tab controls differ greatly. The difference is described in the below points:

• The iOS tabs have their tab bar, which will be displayed always on the bottom and does not allow swipe gesture for changing tabs.
• The Android tabs are on top and will enable the swipe navigation between the tabs.
• For Android we have androidTabsPosition property which has two options top(default value) and bottom. Setting up this property to bottom allows mimicking Bottom Tab Navigation control(provided by android support library v25 release). Setting the Tabs at the bottom will disable the swipe navigation and the items preloading functionality.

Setting TabView Position

Use the androidTabsPosition property to change the position of the tabs - works only for Android. The default value is top.

  <TabView>
    <StackLayout *tabItem="{title: 'First Tab', iconSource: 'res://icon'}">
        <Label text="First Tab" textWrap="true" class="m-15 h2 text-left" color="blue"></Label>
    </StackLayout>
    <StackLayout *tabItem="{title: 'Second Tab', iconSource: 'res://icon'}">
        <Label text="Second Tab" textWrap="true" class="m-15 h2 text-left" color="blue"></Label>
    </StackLayout>
</TabView>

Note: Consider using BottomNavigation component to create the same UI for both iOS and Android while having greater control over the funcionalities.

Improve this document

Demo Source

Properties

TabView Properties

TabViewItem Properties

Events

TabView Events

API References

Native Component