title: appcelerator orientationchange navbar image hide / show
body: <p>I'm building an app with some tabs for the iPhone.
  rephrased the question in the appcelerator website <a href="http://developer.appcelerator.com/question/120038/on-orientationchange-navbar-image-is-streched-when-switching-tabs" rel="nofollow noreferrer">here</a></p>
  
  <p>When i change from portrait to landscape i want to hide the navbar.</p>
  
  <p>it works fine if i don't switch to another tab. 
  But when i view 1 tab in portrait, 
   switch to another tab, change to landscape view, 
   switch back to the first tab, 
   and then change to back portrait 
  the navbar (window.barImage) is all stretched out ( to the size of a landscape navBar )</p>
  
  <p>Also when i remove all my code for hiding the navbar the same problem occurs.</p>
  
  <p>I've tried setting the barImage again on orientationchange but that does not help either.</p>
  
  <p>a site note: I'm using the same image on every tab for the navBar could that be the problem?<img src="https://i.stack.imgur.com/WJSeb.png" alt="portrait view of the app showing my problem"></p>
  
  <p>I marked in green the navbar image, the blue part is where the image normally should be.</p>
  
  <p>Also note that the image is the right size for a portrait view of the navbar. </p>
  
  <p>code:</p>
  
  <pre><code>var windowWidth = Ti.Platform.displayCaps.platformWidth;
  
  var catWin = Ti.UI.createWindow({
      title:'',
      barImage: 'images/barImage.png',
      url:'vacancies/categories.js',
      width: windowWidth
  });
  
  catWin.orientationModes = [
      Titanium.UI.PORTRAIT,
      Titanium.UI.LANDSCAPE_LEFT,
      Titanium.UI.LANDSCAPE_RIGHT
  ];
  
  Titanium.Gesture.addEventListener('orientationchange', function(e) {
      if(e.orientation == Titanium.UI.LANDSCAPE_RIGHT){
          catWin.hideNavBar();
      } else if(e.orientation == Titanium.UI.LANDSCAPE_LEFT){
          catWin.hideNavBar();
      } else if(e.orientation == Titanium.UI.PORTRAIT){
          catWin.showNavBar();
      }
  });
  </code></pre>