Creating a "Pull to Refresh" mechanism in iOS

What if you want the user to be able to refresh the feed data in your table? You could create a regular button, or possibly check for new data after arbitrary time intervals. Alternatively, you can implement a cool "pull and refresh" mechanism, which has become the de facto standard refresh method in iOS.

In this recipe for our recipe finder app, we'll implement this very type of refresh mechanism for our recipes' feed using the built-in, native refresh control.

How to do it...

Open your recipes.js file and type the following under the creation of tblRecipes:

if (Ti.Platform.name === "iPhone OS") {
        var p2r = Ti.UI.createRefreshControl({
            tintColor: '#000'
        });

        tblRecipes.refreshControl = p2r;

        p2r.addEventListener('refreshstart', function(e) {

            refresh(function() {
                p2r.endRefreshing();
            });

        });
} else if (Ti.Platform.name === "android") {
        win.addEventListener("focus", refresh);
     }

Next, we need to modify the refresh function to support a callback that will run when the refresh is completed. Change the function definition to this:

function refresh(callback) {

Finally, add the following code before the closing of the function and after you set the table data:

if (typeof callback === 'function'){
              callback();
            }

Now launch the app and pull the recipe table down. You'll see the refresh spinner working, and the table will refresh!

How it works...

What we're doing here is using the built-in iOS refresh control and attach this to a table, and then telling the control what to do when it's pulled. We made our job easier by creating a refresh function, which can be passed to a callback function. So, when the refresh method is called, it refreshes the table and then calls the callback function, which in this case tells the refresh control to hide.

The last part of our code block checks for Android, intercepts the focus event of the window (which fires whenever the window is shown), and then calls the refresh function.