rhanb/nativescript-bottombar

BottomBar LABEL_VISIBILITY.SELECTED not working

Opened this issue · 7 comments

  • If the demo apps cannot help and there is no issue for your problem, tell us about it
    Hi! As mentioned in the tile, if I select in the bottom bar a BottomBarItem, the route works, BUT, the home (in my app, the dashboard) gets always selected. Here is my code:

`import { Component, OnInit } from "@angular/core";
import { RadSideDrawer } from "nativescript-ui-sidedrawer";
import * as app from "tns-core-modules/application";
import {
BottomBar,
LABEL_VISIBILITY,
TabSelectedEventData
} from "nativescript-bottombar";
import { Router } from "@angular/router";

@component({
moduleId: module.id,
selector: "aktuelle-module",
templateUrl: "./aktuelle-module.component.html"
})
export class AktuelleModuleComponent implements OnInit {
globalVariables: any = global;
private bottomBar: BottomBar;
labelVisibility: LABEL_VISIBILITY;
actualModules: any[];

constructor(private router: Router) {
    this.labelVisibility = LABEL_VISIBILITY.SELECTED;
    this.actualModules = this.globalVariables.actualModules;
}

ngOnInit() {}

onDrawerButtonTap() {
    const sideDrawer = <RadSideDrawer>app.getRootView();
    sideDrawer.showDrawer();
}

async tabSelected(event: TabSelectedEventData) {
    const tabbedIcon = event.newIndex;
    if (tabbedIcon === 0) {
        await this.router.navigate(["/dashboard"]);
    }
    if (tabbedIcon === 1) {
        await this.router.navigate(["/aktuelle-module"]);
    }
    if (tabbedIcon === 2) {
        await this.router.navigate(["/credits"]);
    }
    if (tabbedIcon === 3) {
        await this.router.navigate(["/info"]);
    }
}

barLoaded(event) {
    this.bottomBar = event.object;
}

}
`

So when i click to 'aktuelle-module' the routing works, but the dashboard gets selected.
Also, here the template of 'aktuelle-module'

`

<ScrollView height="90%">
  <StackLayout class="form">
    <StackLayout *ngFor="let currentModule of actualModules; index as i">
      <GirdLayout rows="auto, auto" columns="auto" class="gridActualModules">
          <GridLayout *ngIf="currentModule['Code'] !== ''" row="0" rows="auto" columns="4*, 6*">
            <Label fontWeight="bold" textWrap="true" row="0" col="0" text="Code"></Label>
            <Label row="0" col="1" [text]="currentModule['Code']"></Label>
          </GridLayout>
          <GridLayout *ngIf="currentModule['Course'] !== ''" row="1" rows="auto" columns="4*, 6*">
            <Label fontWeight="bold" textWrap="true" row="0" col="0" text="Modulname"></Label>
            <Label textWrap="true" row="0" col="1" [text]="currentModule['Course']"></Label>
          </GridLayout>
        </GirdLayout>
      <StackLayout class="hr-light"></StackLayout>
    </StackLayout>
  </StackLayout>
</ScrollView>

<BottomBar (tabSelected)="tabSelected($event)" [androidLabelVisibility]="labelVisibility" (loaded)="barLoaded($event)">
  <BottomBarItem icon="res://home" title="Dashboard" checkedIcon="res://home"></BottomBarItem>
  <BottomBarItem icon="res://document" title="Aktuelle Module" checkedIcon="res://document"></BottomBarItem>
  <BottomBarItem icon="res://credits" title="Credits" checkedIcon="res://credits"></BottomBarItem>
  <BottomBarItem icon="res://info" title="Info" checkedIcon="res://info"></BottomBarItem>
</BottomBar>

`

  • Which platform(s) does your issue occur on?
    Android
    emulator AND device. NEXUS ONE API 27

I'd Appreciate any help!
If there are more infos necessary, please tell me!

rhanb commented

Hi @MGalatioto ,

Thanks for reporting this issue, could you provide a simple repo to reproduce the issue? it would be a great help for me to reproduce the issue and fix it 👍

Thanks

Hi @rhanb

appreciate your answer!
I have only a private repo, since this is a project for an employer - Would be a playground helpful for you as well (if thats even possible in a playground..)?

Thank you already in advance for your answer!

BR, Marco

Hi @rhanb
Here is a zip where the error occurs - i'd appreciate your help really much.
Best regards - marco
NSAPP-master.zip

Hi again, @rhanb

I honestly did not find the "bug", I searched for it but unfortunately I could not find any :-(

Did you get time to get an eye on it? (zip file above in the comment)

Really would appreciate it!

Thanks in advance.

BR, Marco

Hi @rhanb
Could you take a look at this? (I attached the code in the .zip file above).
Thank you.

rhanb commented

Hi @MGalatioto , sorry for taking so long to answer,
Understand that it's hard for me to find time to work on this repo with my current work.

The best would be to have a github repo (can be private, it's free).

Otherwise from what I see from your html template I don't see any router-outlet nor page-router-outlet

routing can't work without one of those

Hi @rhanb

Yes, I completley understand.

Thank you for checking it.

I do have a page-router-outlet in my app.component.html ...