NativeScript Snackbar 🍭 🍫

Use the Material Design Snackbar in your {N} app, iOS uses SSSnackbar Cocoapod

Snackbar Usage

Installation

tns plugin add nativescript-snackbar

Usage

TS

import { SnackBar, SnackBarOptions } from "nativescript-snackbar";

// Create an instance of SnackBar
let snackbar = new SnackBar();

/// Show a simple snackbar with no actions (Except close on iOS, limitation of the Cocoapod)
public showSimple() {
    snackbar.simple('Snackbar').then((args) => {
         this.set('jsonResult', JSON.stringify(args));
   })
}

/// Show an Action snack bar
public showAction() {
  let options: SnackBarOptions = {
    actionText: this.get('actionText'),
    actionTextColor: '#ff4081',
    snackText: this.get('snackText'),
    hideDelay: 3500,
    textColor: '#346db2', // Optional, Android only
    backgroundColor: '#eaeaea' // Optional, Android only
  };

  snackbar.action(options).then((args) => {
    if (args.command === "Action") {
      this.set('jsonResult', JSON.stringify(args));
    } else {
      this.set('jsonResult', JSON.stringify(args));
    }
  });
}

Note: To change the "Close" text on iOS edit the info.pList

API

Show a simple SnackBar

• simple(snackText: string): Promise

Show a SnackBar with Action.

• action(options: SnackBarOptions): Promise

Manually dismiss an active SnackBar

• dismiss(): Promise

SnackBarOptions Interface

• actionText: string
• actionTextColor: string
• snackText: string
• hideDelay: number
• textColor: string
• backgroundColor: string

Contributors

• Steve McNiven-Scott @stevemcniven
• Nathanael Anderson @CongoCart
• Marc Buils MarcBuils
• Davor Peic @davorpeic