Home

Awesome

<h1 align="center">** DEPRECATION NOTICE **</h1>

Package has been deprecated as of July 12th, 2019.

Please use the version published by nStudio.

Installation:

tns plugin add @nstudio/nativescript-snackbar

<hr> <a align="center" href="https://www.npmjs.com/package/nativescript-snackbar"> <h2 align="center">NativeScript-Snackbar 🍭 🍫 🍦</h2> </a> <h4 align="center">NativeScript plugin for Material Design SnackBar component.</h4>

Demo

Snackbar

Installation

NativeScript 5.4 and older

tns plugin add nativescript-snackbar

Changelog

Usage

TS

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

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

/// Show a simple snackbar with no actions
public showSimple() {
    snackbar.simple('Snackbar', 'red', '#fff', 3, false).then((args) => {
         this.set('jsonResult', JSON.stringify(args));
   })
}

/// Show an Action snack bar
public showAction() {
  const options: SnackBarOptions = {
    actionText: this.get('actionText'),
    actionTextColor: '#ff4081', // Optional, Android only
    snackText: this.get('snackText'),
    textColor: '#346db2', // Optional, Android only
    hideDelay: 3500,
    backgroundColor: '#eaeaea', // Optional, Android only
    maxLines: 3, // Optional, Android Only
    isRTL: false, // Optional, Android Only
    view: <View>someView // Optional, Android Only, default to topmost().currentPage
  };

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

API

Show a simple SnackBar (color args will only work on Android)

Show a SnackBar with Action.

Manually dismiss an active SnackBar

SnackBarOptions Interface