Show/Hide views when layout=vertical in Titanium

example.js

/*
*   Snippet to solve a common problem in Titanium: 
*    hiding a view inside a vertical layout 
*   Tested with Alloy, will work on plain-vanilla Titanium too (just check underscore reference)
*/



/**
 * hides a view nested into a layout=vertical container
 * acts on top, bottom and height to simulate html-style display:none
 * @param  {Ti.View} view the view to be hidden
 */
function hideVertical(view) {
    //store previous values
    view.__originalValues = {
        top: view.top,
        bottom: view.bottom,
        height: view.height
    };

    //set new values to simulate invisibility
    view.top = 0;
    view.bottom = 0;
    view.height = 0;
    view.visible = false;
}

/**
 * shows a view nested into a layout=vertical container
 * restore from hideVertical()
 * @param  {Ti.View} view the view to be shown
 */
function showVertical(view) {
    //restore previous values
    view = _.extend(view, view.__originalValues || {});

    view.visible = true;
}

Was having problems with this for a while and finally figured out today what was causing it. If any of the hide methods are called multiple times the __originalValues gets overwritten with 0s. Adding some logic to check if the view is already hidden would easily prevent this. Hope this helps someone else.

^ Thanks for tip, @ShawnCBerg

Great tip @ShawnCBerg. How about using applyProperties() on the view in the hide function to reduce the over-the-bridge calls?

applyProperties isn't necessarily optimal apparently...
https://shockoe.com/development/profiling-titanium