Question

Does anyone know of a hack to allow for a left->right swipe on a tableviewrow. The default swipe action opens a delete button however I require additional buttons but want to maintain the same UX but the “swipe” event listener doesn’t seem to fire on rows.

myTblRow.addEventListener('swipe', function(e){

     Titanium.API.info("huzzah, a row was swiped");

});

The above == no dice.

Answer 1

It does require a bit of a hack.. remove the editable property on the tableView declaration.

The hack is to apply a view that covers the tableRow:

var row1 = Titanium.UI.createView({
        width: Titanium.Platform.displayCaps.platformWidth,
        height: 145,
        zIndex: 100,
        opacity: 0.1
    });
    row.add(row1);

Notice the zIndex, the opacity makes it exist but be totally transparent.

You now need to create a ‘swipe’ event listener:

tableView.addEventListener('swipe', function(e){
   tableView.updateRow(e.index, createUpdateRow(e.source.myProperty), {
       animationStyle: Titanium.UI.iPhone.RowAnimationStyle.LEFT
    });
});

When the event fires, createUpdateRow() is called, which returns a tableRow. This tableRow you add all of your custom buttons to, you can change the height of the row, anything. The animation style property will mean if you swipe from the right > left, the new row will animate in from the left, which is an effect I like..

Hope this helps, anyone else.. The extra View (row1) is what got me for ages!