# @smak021/react-native-toast

> A react native toast message viewer

Latest version **1.0.7** (published 2024-04-29) · ISC license · 0 weekly downloads

## Install

```sh
npm install @smak021/react-native-toast
pnpm add @smak021/react-native-toast
yarn add @smak021/react-native-toast
bun add @smak021/react-native-toast
```

## Health

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

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

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.7 |
| Published | 2024-04-29 |
| First published | 2023-10-15 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 38 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | SMAK |
| Maintainers | smak021 |
| Keywords | toast, message, react-native, toast, message |

## Links

- npm: https://www.npmjs.com/package/@smak021/react-native-toast
- Repository: https://github.com/smak021/react-native-toast
- Homepage: https://github.com/smak021/react-native-toast#readme
- Issues: https://github.com/smak021/react-native-toast/issues
- npm.io page: https://npm.io/package/@smak021/react-native-toast

## Alternatives

- [update-check](https://npm.io/package/update-check.md) — 4.0M weekly downloads
- [react-native-onesignal](https://npm.io/package/react-native-onesignal.md) — 134.5K weekly downloads
- [react-redux-toastr](https://npm.io/package/react-redux-toastr.md) — 33.7K weekly downloads
- [@nocobase/plugin-notification-manager](https://npm.io/package/@nocobase/plugin-notification-manager.md) — 2.0K weekly downloads
- [react-simple-toasts](https://npm.io/package/react-simple-toasts.md) — 1.9K weekly downloads

## Recent versions

- 1.0.7 (latest) — 2024-04-29
- 1.0.6 — 2024-04-26
- 1.0.5 — 2024-04-26
- 1.0.4 — 2024-04-26
- 1.0.3 — 2024-04-26
- 1.0.2 — 2024-04-26
- 1.0.1 — 2023-10-15
- 1.0.0 — 2023-10-15

## README

# React Native Toast

[![runs with expo](https://img.shields.io/badge/Runs%20with%20Expo-4630EB.svg?style=flat-square&logo=EXPO&labelColor=f3f3f3&logoColor=000)](https://expo.io/)

A react native custom toast message viewer .

| With logo | Large message |
|---|---|
|![Toast with icon](./preview.gif) | ![Large toast message](./preview2.gif) |



## Usage

```javascript
import Toast,{ ToastProvider } from '@smak021/react-native-toast'

function App(){
    return(
        <ToastProvider>
        // ...Your code goes here
            <Toast duration={3000}  backgroundColor={'#33333'}/>
        </ToastProvider>
    )
}
```


 Set toast message in other components using the useToast() hook:

```javascript
import { useToast } from '@smak021/react-native-toast'

function Component(){

    const { setToastMessage } = useToast()

    const handleError=()=>{
        setToastMessage('Your Toast Message')
    }

    return(
        //..UI
    )
}

```

#### Props

| Property                              | Description                                                                                                   | Default Value    |
| --------------------------------------| --------------------------------------------------------------------------------------------------------------| -----------------|
| `duration (in milliseconds)`          | The amount of time the toast component is visible                                                             | 2000             |
| `type`                                | Compact or modern                                                                                             | modern           |
| `toastIcon`                           | *(only for modern)* Custom icon used in the toast                                                             | null             |
| `marqueeDuration  (in milliseconds)`  | *(only for modern)* The amount of time required for the text message to complete the marquee animation        | 3500             |
| `marqueeDelay  (in milliseconds)`     | *(only for modern)* The delay between each text animation                                                     | 500              |
| `backgroundColor`                     | Toast background color                                                                                        | #333333          |
| `showButton`                          | *(only for compact)* Shows a button next to message                                                           | -                |
| `onPress`                             | *(only for compact)* Function for managing the button press                                                   | -                |
| `buttonDisabled`                      | *(only for compact)* Disables the button                                                                      | false            |
| `buttonText`                          | *(only for compact)* Text rendered on the button                                                              | OK               |
| `showButton`                          | *(only for compact)* For activating the button                                                                | false            |
| `textLeft`                            | *(only for compact)* Align text to the left                                                                   | false            |
| `onAnimationEnd`                      | Function, which execute after toast is closed                                                                 | -                |

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