This is the first of a (possible) series of posts concerning appcelerator’s Titanium Mobile.

Sometimes you’ll need to replace one view of a ScrollableView, which, as far as I can tell by the rather incomplete documentation, is not supported out-of-the-box. Don’t worry, it is possible though and I wrote a function for it:

/**
 * Replace (update) one view of a ScrollablView with a new one
 *
 * @param   object  The scrollableView
 * @param   object  The old view to be replaced
 * @param   object  The new view to replace the old one
 * @return  void
 */
function replaceView(scrollableView, oldView, newView)
{
  // loop all the views in the scrollable view
  for (var i = 0, newViews = [], l = scrollableView.views.length; i < l; i++)
  {
    // replace the old view with the new one
    if (i == scrollableView.currentPage)
      newViews.push(newView);
    // leave the other views unchanged
    else
      newViews.push(scrollableView.views[i]);
  }

  // update the scrollableView's views array with the new one
  scrollableView.views = newViews;
}

It’s pretty straightforward, we loop the existing Views of the ScrollableView and copy each View, replacing the one to be change, to a new array. Then we tell the ScrollableView to use our new Views-array for it’s Views.
I hope this helps someone.