CODEWITHSUNDEEP
javascriptnativescript
qqruza
qqruza

Reputation: 1417

Problem with building dynamic BottomNavigation NS 6.5

NS 6.5 has been released and there is a new feature: Dynamic Creation of Tabs and Bottom Navigation...

I followed their example but it seems not working, see my code below in a playground:

https://play.nativescript.org/?template=play-js&id=SoGnxo&v=6

Please help to fix if I am doing anything wrong.

Many thanks in advance.

Upvotes: 0

Views: 73

Answers (1)

Nick Iliev
Nick Iliev

Reputation: 9670

There are multiple issues with your code. Here are all of them explained:

1.You have wrong imports. For example, there is a missing StackLayout import and also a wrong import for the BottomNavigation class.

const Color = require("tns-core-modules/color").Color;
const Label = require("tns-core-modules/ui/label").Label;
const StackLayout = require("tns-core-modules/ui/layouts/stack-layout").StackLayout;
const BottomNavigation = require("tns-core-modules/ui/bottom-navigation").BottomNavigation;
const TabStrip = require("tns-core-modules/ui/bottom-navigation").TabStrip;
const TabStripItem = require("tns-core-modules/ui/bottom-navigation").TabStripItem;
const TabContentItem = require("tns-core-modules/ui/bottom-navigation").TabContentItem;

2.You are creating an "empty" BottomNavigaiton within the XML. That is not needed and could cause trouble (as there are no tabStrip and content items initialized). Remove the BottomNavigation tag from the XML and create it dynamically via the code-behind logic.

3,You are creating bottom navigation via code-behind, but there is no code that actually adds this newly created component anywhere on the page. You could use the content property of the current page.

  var bottomNavigaiton = new BottomNavigation();

  /* TabStrip creating and adding to BottomNavigation.tabStrip */
  let myTabStrip = new TabStrip();
  let tabStripItem1 = new TabStripItem();
  tabStripItem1.title = "Tab 1";

  // To use icon font, you need to have a fonts folder with FontAwesome added in the project
  // tabStripItem1.iconSource = `font://${String.fromCharCode(0xf053)}`;
  // tabStripItem1.iconClass = "fas"; // e.g., Font Awesome
  let tabStripItem2 = new TabStripItem();
  tabStripItem2.title = "Tab 2";
  // To use icon font, you need to have a fonts folder with FontAwesome added in the project
  // tabStripItem2.iconSource = `font://${String.fromCharCode(0xf070)}`;
  // tabStripItem2.iconClass = "fas"; // e.g., Font Awesome
  myTabStrip.items = [tabStripItem1, tabStripItem2];
  bottomNavigaiton.tabStrip = myTabStrip;

  /* TabContent items creating and adding to BottomNavigation.items */
  let tabContentItem1 = new TabContentItem();
  tabContentItem1.content = createContent(1);
  let tabContentItem2 = new TabContentItem();
  tabContentItem2.content = createContent(2);
  let contentItems = [tabContentItem1, tabContentItem2];
  bottomNavigaiton.items = contentItems;

  /* 
    Adding the created bottom navigation to the Page content
  */
  page.content = bottomNavigaiton;
  1. You don't have a fonts folder that contains the icon fonts (FontAwesome).

See the whole revised example here https://play.nativescript.org/?template=play-js&id=SoGnxo&v=16

Upvotes: 1

Related Questions