A picker in Titanium that animates in from the bottom

picker_from_bottom.js

var window = Ti.UI.createWindow({
    backgroundColor: '#fff'
});

var picker = Ti.UI.createPicker({
    bottom: -300,
    height: 300,
    zIndex: 10,
    width: Ti.UI.FILL
});

var overlay = Ti.UI.createView({
    height: Ti.UI.FILL,
    width: Ti.UI.FILL,
    backgroundColor: "#000",
    opacity: 0,
    zIndex: 9
});

var label = Ti.UI.createLabel({
    text: "Pick Option"
});

window.add(label);

label.addEventListener('click', showPicker);

var rows = [];
for (var i = 0; i < 10; i++) {
    rows.push(Ti.UI.createPickerRow({title: i}));
}

picker.add(rows);
window.add(picker);

picker.addEventListener('change', function(e){
    
    label.text = e.row.title
});

function showPicker(){
    window.add(overlay);
    overlay.animate({
        opacity: 0.5
    });
    picker.animate({
        bottom: 0,
        duration: 500
    });
    
}

overlay.addEventListener('click', hidePicker);

function hidePicker(){
    overlay.animate(Ti.UI.createAnimation({
        opacity: 0,
        duration: 500
    }), function(){
        window.remove(overlay);
    });

    picker.animate({
        bottom: -300,
        duration: 500
    });
}

window.open();