Nativescript-Snackbar v1.0.1 with iOS support and promises

When I first wrote about using the native Material Design Snackbar component in a NativeScript app, I didn’t know if any developers would care to try it out. I posted it on the NativeScript forums and Steve McNiven-Scott @stevemcniven suggested making it into a plugin, so I thought about it and kept things really simple just abstracting the native android code into a simple plugin for devs to use.

Thankfully Steve was very supportive of the plugin and he contributed a lot of code to the update. Steve is responsible for adding iOS support with a nice cocoapod – SSSnackbar, ES6 promise support, and callbacks. Steve and I ran into an issue with the android-runtime and Nathanael Anderson @CongoCart provided some insight into resolving the promises.

With all of that said, go get the updated plugin:

npm update nativescript-snackbar

Now lets look at a quick example using the .action() method.

var snackbar = require("nativescript-snackbar");

function showActionSnack() {
    var options = {
        snackText: 'Emails Deleted',
        actionText: 'UNDO',
        actionTextColor: '#FFF000' //OPTIONAL
    };
    snackbar.action(options).then(function(args) {
        if (args.command === "Action") {
            // don't delete the emails
            return;
        } else {
            // Delete the emails here.
        }
    });
}

The sample above is the perfect use case for a snackbar. Suppose a user does a destructive action such as deleting emails. Once the user triggers the delete, show the snackbar and provide an actionText for the user to STOP the delete from completing and if the user doesn’t interact with the snackbar, the developer can then complete the delete. It’s a very nice way to provide users with the option to prevent something from happening.

The source code is available here https://github.com/bradmartin/nativescript-snackbar. If you have any questions or want to contribute then pull requests are always welcome.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s