[BUG] Displaying the content of each tab.

[alexisconsuegra]

Hello Henry, I can't find how to display the content of each tab. Based on the sample all it is displayed in the label text "content" for all tabs. I have the content of each tab on three separate xml pages. I am sure I am missing something. Could you clarify for me? Thanks. Here is the code.

<Page xmlns="http://schemas.nativescript.org/tns.xsd"
  xmlns:mdc="nativescript-bottom-navigation"
  loaded="pageLoaded"
  class="page">
<GridLayout rows="*, auto">
    <StackLayout row="0">
        <Label text="content"></Label>
    </StackLayout>
    <mdc:BottomNavigationBar
      activeColor="green"
      inactiveColor="red"
      backgroundColor="black"
      tabSelected="tabSelected"
      row="1">
      <mdc:BottomNavigationTab title="Home" icon="res://home" />
      <mdc:BottomNavigationTab title="Search" icon="res://search" />
      <mdc:BottomNavigationTab title="Profile" icon="res://user" />
    </mdc:BottomNavigationBar>
</GridLayout>

[henrychavez]

Hi @alexisconsuegra

you can use a nested frame to accomplish this, here in the link u can find more information https://docs.nativescript.org/core-concepts/nested-navigation

[alexisconsuegra]

Thanks @henrychavez

[eugenefvdm]

@alexisconsuegra did you figure this out? I've read and reread the documentation and googled to death but I simply don't understand how to display content in the selected tab.

The "official" NativeScript element has a XML tag TabContentItem but no such luck here.

And although I greatly appreciate the link from @henrychavez that page explains a bunch of abstract concepts that doesn't help me.

[henrychavez]

@eugenevdm sorry I need to update the demo but this code will help u

<GridLayout rows="*, auto">
  <GridLayout>
    <BottomNavigation #bottomNavigation>
      <TabContentItem>
        <HomeScreen></HomeScreen>
      </TabContentItem>

      <TabContentItem>
        <StackLayout>
          <label text="Bottom Nav Content 2!" class="h1 text-center p-t-20"></label>
        </StackLayout>
      </TabContentItem>

      <TabContentItem>
        <StackLayout>
          <label text="Bottom Nav Content 3!" class="h1 text-center p-t-20"></label>
        </StackLayout>
      </TabContentItem>

      <TabContentItem>
        <StackLayout>
          <label text="Bottom Nav Content 4" class="h1 text-center p-t-20"></label>
        </StackLayout>
      </TabContentItem>
    </BottomNavigation>
  </GridLayout>

  <BottomNavigationBar
    row="1"
    [tabs]="navigationBarTabs"
    (tabSelected)="onTabSelected($event)"
  ></BottomNavigationBar>
</GridLayout>

[henrychavez]

Basically with the new BottomNavigation component u can use a custom bottom navigation bar, so that's what I'm doing in the code I let you.

Now if you want nested navigation on each tab that btw I don't recommend u will need to follow the article about nested frames, but the code that I shared with you is an example of how you can use a custom bottom bar with the new component from nativescript to display different content for each tab, that is better approach that the one I recommended long time ago

[eugenefvdm]

Hi @henrychavez thanks I eventually realised why I am so confused. I'm using Vue and the Vue sample lacked any of the Tab Content Item stuff. In it's place were commented Angular code. I managed to get a basic Vue sample working by introducing a reactive currentTab variable:

<StackLayout class="page" row="0">
        <GridLayout class="p-20" v-if="currentTab === 0"> -->
          <Label class="h1 text-center" text="First tab" textWrap="true"></Label>
        </GridLayout> -->
        <GridLayout class="p-20" v-if="currentTab === 2">
          <Label class="h1 text-center" text="Third tab" textWrap="true"></Label>
        </GridLayout>
      </StackLayout>

data() {
        return {
            ...
            currentTab: 0
        };
    },

onBottomNavigationTabSelected(args: TabSelectedEventData): void {
      ...
      ...
      this.currentTab = args.newIndex
    },

I also created a pull request to include this in the Vue.js example.

[henrychavez]

GReat that should do the work but, I recommend you to use the new bottom navigation component and this bottom navigation bar so you can remove those v-if, basically the example code I left you is for angular but follow the same format for vue