When adding selectedIndex on BottomNavigation first tab is frozen

[vytautas-pranskunas-]

I have BottomnNavigation and if i add [selectedIndex]="0" first tabs content is frozen. This does not apply if i add any other value then 0 - 1, 2 etc.

This also does nto applies if i add selectedIndex="0"

BottomNavigation [selectedIndex]="0" (selectedIndexChanged)="onSelectedIndexChanged($event)">
            <TabStrip isIconSizeFixed="false">...

Also some elements are not rendered at all for example some images.. You can see from attached images same tab content with and without selectedIndex - button is frozen and button is clicable

Bug https://github.com/NativeScript/nativescript-angular/issues/2144#event-3226201532 was closed without further investigation but it is 100% reproducable.

I have created playground: https://play.nativescript.org/?template=play-ng&id=J5oNhi&v=3

It is big issue for me please advice how to solve it. Once you opened it you will see that button in first tab is frozen. When you navigate to second tab and back button will become clickable. If you remove selectedIndex - button in first tab will be clickable immediatly.

If button is not frozen after you open link please change selectedIndex to 1 save it and then change it back to 0. it is 100% reproducable.

[timdoege]

It was not my impression that binding of selectedIndex is supported (based on https://www.nativescript.org/blog/tabs-and-bottomnavigation-nativescripts-two-new-components).

My approach is to subscribe to router changes for the intended selected tab index and keep track of this index manually.

Since Angular events and access to native elements are not always as you expect/wish, you need to rely on events from Page, ie.:

    public tabSelectedIndex: number; // Keeps track of the currently intended selected tab index

    @ViewChild('mainTabView', {static: false}) mainTabViewElement: ElementRef;
    private mainTabView: BottomNavigation;

and then add an event handler in the constructor:

            this.page.on('loaded', (data => {
                this.mainTabView = (<BottomNavigation>this.mainTabViewElement.nativeElement);
                this.mainTabView.selectedIndex = this.tabIndex;
            }));

Your frozen tab could also be due to this issue: https://github.com/NativeScript/nativescript-angular/issues/2075

[vytautas-pranskunas-]

@timdoege hi, thanks for your comment. It would be super cool if you update playground example and drop here a link just to make sure your approach works?

[limyandi]

Hi there @vytautas-pranskunas- , your playground is working fine for my android, but does it work for IOS? It is not properly working in my emulator IOS.

[fpaaske]

I have a similar issue, it's not that the first tab i frozen, but blank/poorly rendered. I have a playground example illustrating this:

https://play.nativescript.org/?template=play-ng&id=iR30Zh&v=2

[fpaaske]

Tracking issue: https://github.com/NativeScript/NativeScript/issues/6967