Nonlinear Performance Magnification
Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

nativescript-toasty-ns-7

14.0.0 • Public • Published

NativeScript-Toasty

Build CI npm npm

Install

NativeScript 7.0+

tns plugin add nativescript-toasty

NativeScript < 7.0

tns plugin add nativescript-toasty@3.0.0-alpha.2

Usage

TypeScript

import { Toasty } from 'nativescript-toasty';
import { isIOS } from '@nativescript/core/platform';
// Toasty accepts an object for customizing its behavior/appearance. The only REQUIRED value is `text` which is the message for the toast.
const toast = new Toasty({ text: 'Toast message' });
toast.show();
 
// you can also chain the methods together and there's no need to create a reference to the Toasty instance with this approach
new Toasty({ text: 'Some Message' })
  .setToastDuration(ToastDuration.LONG)
  .setToastPosition(ToastPosition.BOTTOM)
  .setTextColor(new Color('white'))
  .setBackgroundColor('#ff9999')
  .show();
 
// or you can set the properties of the Toasty instance
const toasty = new Toasty({
  text: 'Somethign something...',
  position: ToastPosition.TOP,
  yAxisOffset: 100,
  xAxisOffset: 10,
  ios: {
    displayShadow: true,
    shadowColor: '#fff000',
    cornerRadius: 24,
  },
  anchorView: someButton.nativeView, // must be the native iOS/Android view instance (button, page, action bar, tabbar, etc.)
});
 
toasty.duration = ToastDuration.SHORT;
toasty.textColor = '#fff';
toasty.backgroundColor = new Color('purple');
toasty.show();

JavaScript

var toasty = require('nativescript-toasty').Toasty;
var toast = new toasty({ text: 'Toast message' });
toast.show();

API

 
  constructor(optsToastyOptions);
 
  positionToastPosition;
 
  durationToastDuration;
 
  textColorColor | string;
 
  backgroundColorColor | string;
 
  yAxisOffset?: Length | number;
 
  xAxisOffset?: Length | number;
 
  readonly widthnumber;
 
  readonly heightnumber;
 
 
  /**
   * Show the Toasty
   */
  show();
 
  /**
   * Cancels the Toasty
   */
  cancel();
 
/**
 * Sets the Toast position.
 */
  setToastPosition(valueToastPosition)Toasty;
 
/**
 * Sets the Toast duration.
 */
  setToastDuration(valueToastDuration)Toasty;
 
/**
  * Set the text color of the toast.
  * @param value [Color | string] - Color of the string message.
  */
  setTextColor(valueColor | string)Toasty;
 
/**
  * Set the background color of the toast.
  * @param value [Color |  string] - Color of the background.
  * On Android this currently removes the default Toast rounded borders.
  */
  setBackgroundColor(valueColor | string)Toasty;
export enum ToastDuration {
  'SHORT',
  'LONG',
}
 
export enum ToastPosition {
  'BOTTOM',
  'BOTTOM_LEFT',
  'BOTTOM_RIGHT',
  'CENTER',
  'CENTER_LEFT',
  'CENTER_RIGHT',
  'TOP',
  'TOP_LEFT',
  'TOP_RIGHT',
}
 
export interface ToastyOptions {
  /**
   * Message text of the Toast.
   */
  text: string;
 
  /**
   * Duration to show the Toast.
   */
  duration?: ToastDuration;
 
  /**
   * Position of the Toast.
   */
  position?: ToastPosition;
 
  /**
   * Text color of the Toast message.
   */
  textColor?: Color | string;
 
  /**
   * Background Color of the Toast.
   */
  backgroundColor?: Color | string;
 
  /**
   * Android specific configuration options.
   */
  android?: any;
 
  /**
   * iOS Specific configuration options.
   */
  ios?: {
    /**
     * The native iOS view to anchor the Toast to.
     */
    anchorView?: any;
 
    /**
     * The number of lines to allow for the toast message.
     */
    messageNumberOfLines?: number;
 
    /**
     * The corner radius of the Toast.
     */
    cornerRadius?: number;
 
    /**
     * True to display a shadow for the Toast.
     */
    displayShadow?: boolean;
 
    /**
     * The color of the shadow. Only visible if `displayShadow` is true.
     */
    shadowColor?: Color | string;
  };
}

Install

npm i nativescript-toasty-ns-7

DownloadsWeekly Downloads

113

Version

14.0.0

License

MIT

Unpacked Size

34.5 kB

Total Files

8

Last publish

Collaborators

  • avatar