# react-native-advanced-toast

> It is a simple javascript-only toast component for React Native.

Latest version **0.2.1** (published 2018-04-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-advanced-toast
pnpm add react-native-advanced-toast
yarn add react-native-advanced-toast
bun add react-native-advanced-toast
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.1 |
| Published | 2018-04-25 |
| First published | 2018-04-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 715.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | denisbeklarov |

## Links

- npm: https://www.npmjs.com/package/react-native-advanced-toast
- Homepage: https://github.com/denisbeklarov/react-native-advanced-toast
- npm.io page: https://npm.io/package/react-native-advanced-toast

## Dependencies (1)

- [react-native-root-siblings](https://npm.io/package/react-native-root-siblings.md) ^3.1.0

## Recent versions

- 0.2.1 (latest) — 2018-04-25
- 0.2.0 — 2018-04-23
- 0.1.3 — 2018-04-23
- 0.1.2 — 2018-04-23
- 0.1.1 — 2018-04-22
- 0.1.0 — 2018-04-21

## README

# React Native Advanced Toast

It is a simple javascript-only toast component for React Native.

Features:
* Queued toast notifications
* Multiple types of notifications
* Easy configuration

## Installation
```
npm install react-native-advanced-toast
```

## Import 
```
import Toast from 'react-native-advanced-toast';
```

## Configuration

```
Toast.configure({
 	  animationTime?: number;
    renderInfoIcon?: () => JSX.Element;
    renderSuccessIcon?: () => JSX.Element;
    renderWarningIcon?: () => JSX.Element;
    renderErrorIcon?: () => JSX.Element;
    renderActivityIndicator?: () => JSX.Element;
    textStyle?: TextStyle;
    containerStyle?: ViewStyle;
    actionButtonStyle?: ViewStyle;
    actionButtonTextStyle?: TextStyle;
    actionButtonTextCapitalize?: boolean;
});
```

## Usage

```
Toast.showInfo('My toast message');
Toast.showWarning('My toast message');
Toast.showSuccess('My toast message');
Toast.showError('My toast message');
Toast.showProgress('My toast message');
```

## Advanced usage

```
Toast.showInfo('My toast message', {...options}, 'customId');
```
Possible options:
```
 	  duration?: number;
    closable?: boolean;
    textProps?: TextStyle;
    containerStyle?: ViewStyle;
    actionButtonText?: string;
    actionButtonStyle?: ViewStyle;
    actionButtonTextStyle?: TextStyle;
    actionButtonOnPress?: () => any;
    renderCustomIcon?: () => JSX.Element;
```

## Hide toast manually
```
Toast.hide(toast)
```
or 
```
Toast.hideById(toastId)
```

Example:
```
const toast = Toast.showInfo('My toast message');
Toast.hide(toast);
const toast2 = Toast.showSuccess('My toast message', {duration: 5000}, 'myAwesomeToast');
Toast.hideById('myAwesomeToast');
```

Thank you for using it!

Feel free to submit PRs.

---
_Source: https://npm.io/package/react-native-advanced-toast · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._