CODEWITHSUNDEEP
nativescript
John S.
John S.

Reputation: 514

How to create bottom navigation bar

I am trying to create a simple fixed bottom navigation bar in my app using the nativescript-bottom-navigation plugin - and keep getting errors. It will not build, and of the many errors displayed in that horrid EXCEPTION black screen, is "AHBottomNavigation is not a constructor".

I simply want 3 icons in the fixed nav: Home, Account, Programs

I am using pure Javascript, and the demo tutorial is in TypeScript. This may be the issue.

Steps I Followed

  1. I installed the plugin using the command line.
  2. I added my icons manually to the resources folder

My Search Page [ where the nav will be located ]

<Page
    navigatingTo="onNavigatingTo"  
    xmlns="http://schemas.nativescript.org/tns.xsd" 
    xmlns:bottomNav="nativescript-bottom-navigation"  
    class="page">

    <ActionBar class="action-bar">
        <!-- 
        Use the NavigationButton as a side-drawer button in Android
        because ActionItems are shown on the right side of the ActionBar
        -->
        <NavigationButton ios:visibility="collapsed" icon="res://menu" tap="onDrawerButtonTap"></NavigationButton>
        <!-- 
        Use the ActionItem for IOS with position set to left. Using the
        NavigationButton as a side-drawer button in iOS is not possible,
        because its function is to always navigate back in the application.
        -->
        <ActionItem icon="res://navigation/menu" 
            android:visibility="collapsed" 
            tap="onDrawerButtonTap"
            ios.position="left">
        </ActionItem>
        <Label class="action-bar-title" text="Search"></Label>
    </ActionBar>

    <GridLayout columns="*"
                rows="*, auto">
        <StackLayout row="0">
            <Label text="content"></Label>
        </StackLayout>
        <bottomNav:BottomNavigation tabs="{{ tabs }}"
                                    activeColor="green"
                                    inactiveColor="red"
                                    backgroundColor="black"
                                    keyLineColor="black"

                                    row="1"></bottomNav:BottomNavigation>
    </GridLayout>




</Page>

and here is...

search-view-model.js

const observableModule = require("tns-core-modules/data/observable");

const SelectedPageService = require("../shared/selected-page-service");
const BottomNavigation = require("nativescript-bottom-navigation").BottomNavigation;
const BottomNavigationTab = require("nativescript-bottom-navigation").BottomNavigationTab;
const OnTabSelectedEventData = require("nativescript-bottom-navigation").OnTabSelectedEventData;


function SearchViewModel() {
    SelectedPageService.getInstance().updateSelectedPage("Search");

    const viewModel = observableModule.fromObject({
        /* Add your view model properties here */
        tabs: [
            new BottomNavigationTab('First', 'ic_home'),
            new BottomNavigationTab('Second', 'ic_view_list'),
            new BottomNavigationTab('Third', 'ic_menu')
          ]
    });

    return viewModel;
}

module.exports = SearchViewModel;

I cannot understand the error screen displayed to me on my device ( I am testing on an Android device ).

Does anyone see where I am going wrong? Any pointers would be greatly appreciated.

Thank you.

Upvotes: 1

Views: 1503

Answers (1)

saibbyweb
saibbyweb

Reputation: 3264

You can use <DockLayout> to achieve the same without using any plugin.

<DockLayout height="100%">
<!-- bottom navigation buttons -->
<StackLayout dock="bottom" height="50" class="bottom-navigation" orientation="horizontal">
    <Button text="Home"/>
    <Button text="Accounts"/>
    <Button text="Programs"/>
</StackLayout>
<!-- other top content -->
<Button dock="top" text="Other Content"/>
</DockLayout>

then use CSS to normalize the layout:

.bottom-navigation {
    background-color:#54d4aa;
}
.bottom-navigation button {
    width: 33.33%;
    background-color:#54d4aa;
    border-color: transparent;
    border-width: 1;
    color:white;
}

You can replace <Button> with <StackLayout> to add icon and text.

Playground Demo

Upvotes: 1

Related Questions