Unable to optionally remove TabStripItem on Android

[dlcole]

I have a scenario where I have three Bottom Navigation tabs and need to remove the third tab if the user is not authorized to access. This works fine on iOS; I can simply pop the items array and everything works as desired. On Android, however, the tab remains visible but becomes disabled (at least, it's not tappable).

I've spent two days trying everything I can think of:

• popping the items array and setting the visibility of the TabStripItem to "collapsed" : no different results
• creating a copy of the items array, popping it, and re-assigning via setItems() : no different results
• excluding the TabStripItem and adding it when needed by pushing a new TabStrip Item to items : this adds the tab but excludes some processing; the font icon is sans serif, even though iconClass is specified, and there is no highlighting when tapped

My question: is it possible to optionally add or remove a tab on Android? Mine is a JavaScript project, so ngIf isn't an option here. I've created a related SO post, but with few views and no responses. I have reviewed every issue in this repository.

Environment:

OS: macOS 12.2.1
CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
Shell: /bin/bash
node: 16.13.0
npm: 8.1.0
nativescript: 8.1.5

# android
java: 11.0.13
ndk: Not Found
apis: Not Found
build_tools: Not Found
system_images: Not Found

# ios
xcode: 13.3/13E113
cocoapods: 1.8.4
python: 2.7.18
python3: 3.9.5
ruby: 2.6.8
platforms: 
  - DriverKit 21.4
  - iOS 15.4
  - macOS 12.3
  - tvOS 15.4
  - watchOS 8.5

Dependencies

"dependencies": {
  "@bradmartin/nativescript-urlhandler": "^2.0.1",
  "@kefah/nativescript-google-maps": "^1.0.7",
  "@master.technology/permissions": "^2.0.1",
  "@nativescript-community/ui-material-bottom-navigation": "^7.0.2",
  "@nativescript/appversion": "^2.0.0",
  "@nativescript/contacts": "^2.0.4",
  "@nativescript/core": "^8.2.1",
  "@nativescript/email": "^2.0.5",
  "@nativescript/firebase": "^11.1.3",
  "@nativescript/geolocation": "^8.0.2",
  "@nativescript/iqkeyboardmanager": "^2.0.0",
  "@nativescript/theme": "^3.0.2",
  "@triniwiz/nativescript-toasty": "^4.1.3",
  "base-64": "^1.0.0",
  "deep-object-diff": "^1.1.7",
  "nativescript-bitmap-factory": "^1.8.1",
  "nativescript-clipboard": "^2.1.1",
  "nativescript-danem-google-maps-utils": "^1.0.18",
  "nativescript-drop-down": "^6.0.1",
  "nativescript-pdf-view": "^3.0.0-1",
  "nativescript-phone": "^3.0.3",
  "nativescript-screenshot": "^0.0.2",
  "nativescript-sqlite": "^2.8.6",
  "nativescript-ui-listview": "^10.0.2",
  "nativescript-ui-sidedrawer": "^10.0.2",
  "patch-package": "^6.4.7"
},
"devDependencies": {
  "@nativescript/android": "8.1.1",
  "@nativescript/ios": "8.2.3",
  "@nativescript/webpack": "^5.0.6"
}

[dlcole]

After further investigation I found I could make this work be popping both the TabContentItems array and the TabStripItems array, specifically,

let btmnav = page.getViewById("btmnav");
if (isAndroid && btmnav.tabStrip.items.length == 3 && !viewModel.isDirector) {
    btmnav.items.pop(); // remove TabContentItems
    btmnav.tabStrip.items.pop(); // Remove TabStripItems 
}

I'll close this issue and hope this helps others looking to do the same thing.