title: Custom Tab Bar in Appcelerator - How to return to root window?
body: <p>I've got a bug which needs fixing in my iOS app developed on Appcelerator Titanium.</p>
  
  <p>I've been using customTabBar (<a href="https://github.com/netsells/customTabBar" rel="nofollow">available on GitHub</a>) to create a bespoke tabBar and it works great!</p>
  
  <p>The only small issue is that it removes the option to tab on the icons and return to the root window (like a proper native tabBar would do in iOS).</p>
  
  <p>So if I drill down 3 or 4 windows in my app, tapping the tab icon does nothing, I have to navigate back to the beginning by tapping back multiple times.</p>
  
  <p>Here is the full customTabBar.js script I am using:</p>
  
  <pre><code>CustomTabBar = function(settings) {
  var tabBarItems = [];
  var tabCurrent = 2;
  
  var resetTabs = function() {
      for(var i = 0; i &lt; tabBarItems.length; i++) {
          // Clear all the images to make sure only
          // one is shown as selected
          tabBarItems[i].image = tabBarItems[i].backgroundImage;
      }
  };
  
  var assignClick = function(tabItem) {
      tabItem.addEventListener('click', function(e) {
          // Just fetching the 'i' variable from the loop
          var pos = e.source.pos;
  
          if (tabCurrent == pos) {
              // TODO
              // Change back to root window, like the native tab action.
  
              // code must go in here
  
  
  
              return false;
          }       
  
          // Switch to the tab associated with the image pressed
          settings.tabBar.tabs[pos].active = true;
          tabCurrent = pos;
  
  
          // Reset all the tab images
          resetTabs();
  
          // Set the current tab as selected
          tabBarItems[pos].image = settings.imagePath + settings.items[pos].selected;     
      });
  };
  
  // Create the container for our tab items
  var customTabBar = Ti.UI.createWindow({
      height: 48,
      backgroundImage:'images/tabbarbackground.png',
      bottom: 0
  });
  
  
  for(var i = 0; i &lt; settings.items.length; i++) {
      // Go through each item and create an imageView
      tabBarItems[i] = Titanium.UI.createImageView({
          // background is the default image
          backgroundImage: settings.imagePath + settings.items[i].image,
  
          width: settings.width,
          height: settings.height,
          left: settings.width * i
      });
  
      // Pass the item number (used later for changing tabs)
      tabBarItems[i].pos = i;
      assignClick(tabBarItems[i]);
  
      // Add to the container window
      customTabBar.add(tabBarItems[i]);
  }
  
  // Display the container and it's items
  customTabBar.open();
  
  // Set the first item as current :)
  resetTabs();
  //tabBarItems[0].image = settings.imagePath + settings.items[0].selected;
  tabBarItems[2].image = settings.imagePath + settings.items[2].selected;
  
  return {
      hide: function() { customTabBar.hide(); },
      show: function() { customTabBar.show(); }
  };
  };
  </code></pre>
  
  <p>The function that contains the bit I need adding is already marked up, but is just empty. Here it is:</p>
  
  <pre><code>var assignClick = function(tabItem) {
      tabItem.addEventListener('click', function(e) {
          // Just fetching the 'i' variable from the loop
          var pos = e.source.pos;
  
          if (tabCurrent == pos) {
              // TODO
              // Change back to root window, like the native tab action.
  
              // code must go in here
  
  
  
              return false;
          }       
  
          // Switch to the tab associated with the image pressed
          settings.tabBar.tabs[pos].active = true;
          tabCurrent = pos;
  
  
          // Reset all the tab images
          resetTabs();
  
          // Set the current tab as selected
          tabBarItems[pos].image = settings.imagePath + settings.items[pos].selected;     
      });
  };
  </code></pre>