App crashes only on iOS 9 when changing Tabs using *ngIf and binding to SelectedIndex

[NickIliev]

From @smartsanja2013 on December 16, 2017 3:18

Which platform(s) does your issue occur on?

iOS (only on ios 9.x)

Please provide the following version numbers that your issue occurs with:

tns version 3.3.1
package.json version 3.3.0
ios version on package.json 3.0.0

Please tell us how to recreate the issue in as much detail as possible.

I have tab bar app.
There are 3 tabs
I am changing the action bar buttons based on the current selected tab index.
App crashes only on iOS 9.x (both simulator and real device) due to array out of bound index error.
Crash happens when selecting the tabs (eg: tap on 2nd tab and then try to select 1st tab, app crash)
Please see the code snippets and xCode error bellow

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

Tabs.component.html

<ActionBar [title]="title" class="action-bar" actionBarHidden="false" backgroundColor="#f33" >
    <NavigationButton visibility="collapsed"></NavigationButton>
    <ActionItem *ngIf="tabIndex!=1" (tap)="searchBtnTapped()" android.systemIcon="ic_menu_search" ios.systemIcon="12" ios.position="right"></ActionItem>
    <ActionItem *ngIf="tabIndex==2" (tap)="plusBtnTapped()" android.systemIcon="ic_input_add" ios.systemIcon="4" ios.position="right"></ActionItem>
    <ActionItem *ngIf="tabIndex==1" (tap)="deleteBtnTapped()" ios.systemIcon="16" android.systemIcon="ic_delete" ios.position="right"></ActionItem>
    <ActionItem (tap)="userBtnTapped()" android.systemIcon="ic_input_add" ios.systemIcon="4" ios.position="left"></ActionItem>
</ActionBar>

Tabs.component.ts

onSelectedIndexChanged(args: SelectedIndexChangedEventData) {
        const tabView = <TabView>args.object;
        const selectedTabViewItem = tabView.items[args.newIndex];

        this.title = selectedTabViewItem.title;
        this.tabIndex = tabView.selectedIndex;
    }

Xcode error

Copied from original issue: NativeScript/NativeScript#5178

[NickIliev]

@smartsanja2013 confirming this as a bug on iOS 9.x.

As a temporary workaround, we can use visibility instead of an Angular structural directive.

For example:

<ActionBar title="My Title" class="action-bar" actionBarHidden="false" backgroundColor="#f33" >
    <NavigationButton visibility="collapsed"></NavigationButton>
    <ActionItem [visibility]="tabIndex!=1 ? 'visible' : 'collapsed'" ios.systemIcon="12" ios.position="right"></ActionItem>
    <ActionItem [visibility]="tabIndex==2 ? 'visible' : 'collapsed'" ios.systemIcon="4" ios.position="right"></ActionItem>
    <ActionItem [visibility]="tabIndex==1 ? 'visible' : 'collapsed'" ios.systemIcon="16" ios.position="right"></ActionItem>
    <ActionItem ios.systemIcon="4" ios.position="left"></ActionItem>
</ActionBar>

[smartsanja2013]

@NickIliev Thanks for the answer. I have tried the suggested method. But still crashing. Strange thing I have noticed is, I have used the suggested code in the "basic-tab-view" in "nativescript-sdk-example-ng" project. It is working fine and no crash.
But same code in my project (which is created using "tns-template-tab-navigation-ng") is crashing. Does this means the issue is due to nativescript tab-navigation template?

[NickIliev]

@smartsanja2013 I have used this test project with your snippets and when switching to visibility everything seems to work as expected

[smartsanja2013]

This project you created NOT using tns-template-tab-navigation-ng right? I have used tns-template-tab-navigation-ng to create the project. Will it be the issue?

[NickIliev]

@smartsanja2013 I have also re-tested with the tabs navigation template and it is working as expected (when using visibility) - here is the test project

Note: try resetting your platforms folder to be sure that the changes are applied.

[smartsanja2013]

@NickIliev I have created a new app using the template. Still crash on ios 9.x simulator. ios 10 and 11 no issue. Have attach the app folder. Please let me know whats wrong.
tns version 3.3.1
xcode 9.2
app.zip