NativeScript Material Bottom navigation

Material Design's Bottom navigation component for NativeScript.

Contents

1. Installation
2. Changelog
3. FAQ
4. Usage
   • Plain NativeScript
   • Angular
   • Vue
   • React
5. API

Installation

ns plugin add @nativescript-community/ui-material-bottom-navigation

Be sure to run a new build after adding plugins to avoid any issues.

Changelog

FAQ

Usage

Plain NativeScript

IMPORTANT: Make sure you include xmlns:mds="@nativescript-community/ui-material-bottom-navigation" on the Page element.

XML

    
            
            
                
                    <img class="fal">
                    <label></label>
                
                
                    <label></label>
                    <img class="fal">
                
                
                    <label></label>
                    <img class="fal">
                
                
                    <label></label>
                    <img id="tab-inbox-icon-fal" class="fal">
                
            

            
            
                
                    <label class="h2 text-center"></label>
                
            
            
                
                    <label class="h2 text-center"></label>
                
            
            
                
                    <label class="h2 text-center"></label>
                
            
            
                
                    <label class="h2 text-center"></label>
                
            
        

CSS

BottomNavigation.bottom-nav {
    background-color: orangered;
    color: gold;
    font-size: 18;
}

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

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

MDTabContentItem.first-tabcontent {
    background-color: seashell;
    color: olive;
}
MDTabContentItem.second-tabcontent {
    background-color: slategray;
    color: aquamarine;
}
MDTabContentItem.third-tabcontent {
    background-color: blueviolet;
    color: antiquewhite;
}
BottomNavigation TabStrip {
    highlight-color: red;
}

NativeScript + Angular

import { NativeScriptMaterialTabsModule } from "@nativescript-community/ui-material-bottom-navigation/angular";

@NgModule({
    imports: [
        NativeScriptMaterialBottomNavigationModule,
        ...
    ],
    ...
})

    
        
        
            
                <label></label>
                <img class="fas">
            
            
                <label></label>
                <img class="fas">
            
            
                <label></label>
                <img class="fas">
            
        

        
        
            
                <label class="h2 text-center"></label>
            
        
        
            
                <label class="h2 text-center"></label>
            
        
        
            
                <label class="h2 text-center"></label>
            
        
    

NativeScript + Vue

import BottomNavigation from '@nativescript-community/ui-material-bottom-navigation/vue';

Vue.use(BottomNavigation);

        
        
            
                <label></label>
                <img class="fas">
            
            
                <label></label>
                <img class="fas">
            
            
                <label></label>
                <img class="fas">
            
        

        
        
            
                <label class="h2 text-center"></label>
            
        
        
            
                <label class="h2 text-center"></label>
            
        
        
            
                <label class="h2 text-center"></label>
            
        
    

NativeScript + React

First, register the component before any of your React NativeScript app renders. A good place to put this code is in your entrypoint file (which may be called src/app.ts or similar), before the ReactNativeScript.start function is called. Here's how to install it:

import { registerTabNavigationBase } from '@nativescript-community/ui-material-core/tab-navigation-base/react';
import { registerBottomNavigation } from '@nativescript-community/ui-material-bottom-navigation/react';

registerTabNavigationBase();
registerBottomNavigation();

When available (I've not implemented it at the time of writing, but intend to in time), it would be best to use this component via the bottomNavigationNavigatorFactory() API exported by React NativeScript Navigation, as it makes nested navigation easy, but here's how to use it directly:

import * as React from 'react';

export function BottomNavigation() {
    const [selectedIndex, setSelectedIndex] = React.useState(0);

    return (
         {
                setSelectedIndex(args.newIndex);
            }}
            style={{ backgroundColor: 'orange' }}
        >
            {/* The bottomTab UI is created via tabStrip (the container) and tabStripItem (for each tab) */}
            
                
                    <label>Home</label>
                    <img>
                
                
                    <label>Account</label>
                    <img>
                
                
                    <label>Search</label>
                    <img>
                
            

            {/* The number of tabContentItem components should corespond to the number of TabStripItem components */}
            
                
                    <label style="{{">Home Page</label>
                
            
            
                
                    <label style="{{">Account Page</label>
                
            
            
                
                    <label style="{{">Search Page</label>
                
            
        
    );
}

Troubleshooting

If you see an error like this when writing e.g. `` into your JSX:

> Property 'bottomNavigation' does not exist on type 'JSX.IntrinsicElements'.ts(2339)

Make sure that you have:

1. Installed the react-nativescript npm module.
2. Installed the @types/react npm module, strictly with the exact version provided in the React NativeScript starter template.
3. Run the postinstall script that comes with the React NativeScript template – npm run postinstall – to patch @types/react.
4. Registered the component as described above (i.e. import and run the registerTabNavigationBase() and registerBottomNavigation() methods).
5. If using Visual Studio Code, option-click the import @nativescript-community/ui-material-bottom-navigation/react to jump to the file; opening the file will force it to load its provided typings.

API

Attributes

Events