How to show Tabs dynamically with Appcelerator/Titanium?

Question

I make a tab based app and would like to show/hide either the login or the user profile tab depending on whether the user is logged in or not. How can I do that? I tried setting the visible property of the tab, but this does not work and both tabs are visible.

If setting two tabs conditionally does not work well, is there a way to dynamically change the loading of the src files? I don't want to put the profile and login/register functions in one file.

index.xml:

<Alloy>
<TabGroup id="root">
    <Tab id="profile" visible="false" title="Profile" icon="KS_nav_views.png">
        <Require type="view" src="profile" />
    </Tab>
    <Tab id="login" title="Login" icon="KS_nav_views.png">
        <Require type="view" src="modalLogin" />
</TabGroup>
</Alloy>

index.js ()

// open TabGroup
$.root.open();
var userStatus = "loggedin";
showProfile(userStatus);
function showProfile(user){
  if (user == "loggedin") {
    $.login.visible = false;
    $.profile.visible = true;
    console.log("user is logged in");
  } else {
    $.profile.visible = false;
    $.login.visible = true;
    console.log("user is not logged in");
  }
}

Answer 1

According to the Titanium.UI.TabGroup docs:

...Tabs cannot be removed from the tab group once added, and tabs cannot be reordered.

From my experience, the TabGroup component is really restricted and mostly replaced by custom-made components by the devs. Maybe that's your case as well!

As for the dynamic Require source file, I would suggest creating/removing the View element programatically according to your needs, instead of inserting it on the XML. Once again, my experience with dramatically changing view elements on the fly is not the best: wild bugs appear when I try to do it.

So, I prefer destroying an element completely and inserting another one 'by hand'.

But hey, experiment with it! You may come across a better solution =) Just for reference, here is the iffy documentation on the Require tag.