0

I have a NativeScript 8.1 JavaScript project that uses the tabs template, so that the app-root.xml file looks like this:

<TabView tabTextFontSize="16" androidOffscreenTabLimit="0" androidTabsPosition="bottom" 
  id="tabview" class="ns-light" loaded="onLoaded" >

  <TabViewItem title="Riders" iconSource="res://biking_solid" >
    <Frame id="main" defaultPage="views/main-page" />
  </TabViewItem>

  <TabViewItem title="Volunteers" iconSource="res://hands_helping_solid" >
    <Frame id="vol" defaultPage="views/volunteers-page" />
  </TabViewItem>

  <TabViewItem title="Director" iconSource="res://user_ninja_solid" >
    <Frame id="director" defaultPage="views/director-page" />
  </TabViewItem>
  
</TabView>

The catch here is that the third tab needs to be conditional and only visible if the user is authorized. I've tried pop'ing the TabView's item's array. I've tried creating a new TabViewItem and pushing it onto the items array. I've tried using the visibility property, and none of these work.

I'll know at startup time whether the third tab should be displayed, so handling this in app-root.js is fine. I'm OK with creating all of the tabs dynamically but I can't get that to work either. I could live with disabling the third tab but the enabled property on TabViewItem is ignored.

In short, I've tried everything I can think of and I'm unable to change the TabViewItem's in any way. I realize the underlying implementations are likely imposing some restrictions, but still, is there any way I can control whether the third tab is visible?

David
  • 578
  • 3
  • 16
  • 1) Why not to create two separated components and only show one of them? 2) Did you tried a simple *NgIf="" on the third tab? I think i used it in a similar situation – oded bartov Mar 03 '22 at 10:17
  • @odedbartov - yes, that *could* work, but this is not an angular project. I found an approach that will work, if indirectly. See my answer below. – David Mar 04 '22 at 02:24

1 Answers1

0

This doesn't really answer the question, but it does solve my problem. I can have two separate app-root files, say app-root2 and app-root3, then in app.js I can apply logic and start the appropriate one:

if (<condition>) 
  application.run({ moduleName: "app-root2" });
else 
  application.run({ moduleName: "app-root3" });

Edit 4/10/2022: I ended up switching to the BottomNavigation component and dealt with the same issue. That, and the accompanying solution, is described in this post.

David
  • 578
  • 3
  • 16