title: How to create bottom navigation bar
body: <p>I am trying to create a simple fixed bottom navigation bar in my app using the <a href="https://www.npmjs.com/package/nativescript-bottom-navigation#usage" rel="nofollow noreferrer">nativescript-bottom-navigation plugin</a> - 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".</p>
  
  <p>I simply want 3 icons in the fixed nav: Home, Account, Programs</p>
  
  <p>I am using pure Javascript, and the demo tutorial is in TypeScript. This may be the issue.</p>
  
  <p><strong>Steps I Followed</strong></p>
  
  <ol>
  <li>I installed the plugin using the command line.</li>
  <li>I added my icons manually to the resources folder</li>
  </ol>
  
  <p><strong>My Search Page [ where the nav will be located ]</strong></p>
  
  <pre><code>&lt;Page
      navigatingTo="onNavigatingTo"  
      xmlns="http://schemas.nativescript.org/tns.xsd" 
      xmlns:bottomNav="nativescript-bottom-navigation"  
      class="page"&gt;
  
      &lt;ActionBar class="action-bar"&gt;
          &lt;!-- 
          Use the NavigationButton as a side-drawer button in Android
          because ActionItems are shown on the right side of the ActionBar
          --&gt;
          &lt;NavigationButton ios:visibility="collapsed" icon="res://menu" tap="onDrawerButtonTap"&gt;&lt;/NavigationButton&gt;
          &lt;!-- 
          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.
          --&gt;
          &lt;ActionItem icon="res://navigation/menu" 
              android:visibility="collapsed" 
              tap="onDrawerButtonTap"
              ios.position="left"&gt;
          &lt;/ActionItem&gt;
          &lt;Label class="action-bar-title" text="Search"&gt;&lt;/Label&gt;
      &lt;/ActionBar&gt;
  
      &lt;GridLayout columns="*"
                  rows="*, auto"&gt;
          &lt;StackLayout row="0"&gt;
              &lt;Label text="content"&gt;&lt;/Label&gt;
          &lt;/StackLayout&gt;
          &lt;bottomNav:BottomNavigation tabs="{{ tabs }}"
                                      activeColor="green"
                                      inactiveColor="red"
                                      backgroundColor="black"
                                      keyLineColor="black"
  
                                      row="1"&gt;&lt;/bottomNav:BottomNavigation&gt;
      &lt;/GridLayout&gt;
  
  
  
  
  &lt;/Page&gt;
  </code></pre>
  
  <p>and here is...</p>
  
  <p><strong>search-view-model.js</strong></p>
  
  <pre><code>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;
  
  
  </code></pre>
  
  <p>I cannot understand the error screen displayed to me on my device ( I am testing on an Android device ).</p>
  
  <p>Does anyone see where I am going wrong? Any pointers would be greatly appreciated.</p>
  
  <p>Thank you.</p>