# rn-toaster-stack

> Toaster provider and tools for react native app

Latest version **1.1.1** (published 2024-12-03) · ISC license · 0 weekly downloads

## Install

```sh
npm install rn-toaster-stack
pnpm add rn-toaster-stack
yarn add rn-toaster-stack
bun add rn-toaster-stack
```

## Health

**Score 25/100 (F)** — status: maintenance-mode.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.1 |
| Published | 2024-12-03 |
| First published | 2023-03-07 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 18.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | basil.collette |
| Maintainers | basilcollette |
| Keywords | react-native, toaster, stack, context |

## Links

- npm: https://www.npmjs.com/package/rn-toaster-stack
- Repository: https://github.com/Basouli/rn-toaster-stack
- Homepage: https://github.com/Basouli/rn-toaster-stack#readme
- Issues: https://github.com/Basouli/rn-toaster-stack/issues
- npm.io page: https://npm.io/package/rn-toaster-stack

## Dependencies (4)

- [react](https://npm.io/package/react.md) 18.2.0
- [react-native](https://npm.io/package/react-native.md) ^0.74.3
- [react-native-svg](https://npm.io/package/react-native-svg.md) ^15.2.0
- [react-native-restart](https://npm.io/package/react-native-restart.md) ^0.0.27

## Alternatives

- [gamedig](https://npm.io/package/gamedig.md) — 29.3K weekly downloads
- [join-monster](https://npm.io/package/join-monster.md) — 12.8K weekly downloads
- [masked](https://npm.io/package/masked.md) — 5.5K weekly downloads
- [@comunica/actor-query-process-explain-logical](https://npm.io/package/@comunica/actor-query-process-explain-logical.md) — 4.7K weekly downloads
- [@veracity/vui](https://npm.io/package/@veracity/vui.md) — 4.6K weekly downloads

## Recent versions

- 1.1.1 (latest) — 2024-12-03
- 1.1.0 — 2024-10-28
- 1.0.11 — 2024-10-28
- 1.0.9 — 2024-10-17
- 1.0.8 — 2024-10-17
- 1.0.7 — 2024-10-04
- 1.0.6 — 2024-10-03
- 1.0.5 — 2024-07-19
- 1.0.4 — 2024-07-19
- 1.0.3 — 2024-07-19
- 1.0.2 — 2024-03-03
- 1.0.1 — 2024-03-03
- 1.0.0 — 2023-03-07

## README

# ReactNative Toaster Skack
Toaster provider and tools for react native app

Git: https://github.com/Basouli/react-native-toaster
My Portoflio: [www.basilcollette.com](https://www.basilcollette.com)

# Installation
npm install --save rn-toaster-skack

# Imports
Here the list of the modules that could be imported on your react components:

ToastProvider: Provider that handle a toast stack, showing them on screen.

ToastContext: Context that return a function sending a Toast.

Toast: The Toast Class, composing of a type and a message.

ToastTypeEnum: Object containing enum of toast types.

setAnimationDuration: function to set the duration of the toast animation, sliding from the top of the screen.

setDurationToast: function to set the duration of the toast's visibility on screen.

setMaxToastCount: function to set the size of the toast stack.

setToastTemplate: function to set the template of the toast.

setFallback: function to set the function called when max Toast count is reached.

setZIndex: function to set the zIndex of the toast.

setVerticalVisiblePosition: function to set the absolute y position of the toast when visible.

getVerticalVisiblePosition: function to get the absolute y position of the toast when visible.

# Usage

First import the package on your app entry:
```js
import { ToastProvider } from 'rn-toaster-skack';
```

Add the ToastProvider tag inside the return of your app entry. It should be enclosing the app jsx to insure a good style management:
```js
return (
    <ToastProvider>
        ...
    </ToastProvider>
);
```

Minimal module imports needed on a react component:
```js
import { Toast, ToastContext } from 'rn-toaster-skack';
```

Initialise the context function (Need useContext that could be imported with 'react'):
```js
const addToast = useContext(ToastContext);
```
In this exemple, the const is named "addToast" because the only value given by the provider is a function, that give the toast to the provider.

Use addToast function whenever inside your component with a parameter Toast object that need a toast type and a message:
```js
addToast(new Toast(ToastTypeEnum.success, 'succeed!'));
```
The Toast will be sent to provider that will stack it. Provider automatically handle the stack by unstacking and showing toast in order of receipt.

# Exemples

Fully exemple of app entry:
```js
import Home from './home.component.jsx';
import { ToastProvider } from 'rn-toaster-skack';
import Constants from 'expo-constants';

export default function App() {

    return (
        <SafeAreaView style={{ flex: 1, backgroundColor: "#232328", paddingTop: Constants.statusBarHeight }}>
            <StatusBar backgroundColor="#fff" animated={true} />

            <View style={{ flex: 1 }}>
                <ToastProvider>
                    <Home/>
                </ToastProvider>
            </View>
        </SafeAreaView>
    );
}
```

Fully exemple of a component named 'Home' using Toast:
```js
import { useEffect, useContext } from 'react';
import { Toast, ToastContext, ToastTypeEnum } from 'rn-toaster-skack';

export default function Home(props) {

    const addToast = useContext(ToastContext);

    useEffect(() => {
        addToast(new Toast(ToastTypeEnum.info, 'Welcome!'));
    }, []);

    return (
        <View>
            <Text>Home Page With A Welcome Toast</Text>
        </View>
    );
}
```

# Details of package

ToastTypeEnum:
```js
ToastTypeEnum = {
    success: "success",
    info: "info",
    error: "error"
}
```

Toast:
```js
/**
 * @param {string} type the type of toast, if null set to 'info'.
 * @param {string} message the message showed in toast.
 */
constructor(type, message){
    ...
}
```
it is advisable to use ToastTypeEnum properties for the first parameter 'type' as bellow :
```js
new Toast(ToastTypeEnum.info, 'my info message')
```
Default template will apply a special style color to the toast, depending of type value:
info: #3BCBEB
success: #46C843
error: #CC5656

setAnimationDuration:
```js
/**
 * @param {number} milliseconds : the ammount of milliseconds toast take to slide on screen. Default value 500
 */
setAnimationDuration(milliseconds) {...}
```

setDurationToast:
```js
/**
 * @param {number} seconds : the ammount of seconds toast is showed. Must be an interger. Default value 3
 */
setDurationToast(seconds) {...}
```

setMaxToastCount:
```js
/**
 * @param {number} toastAmount : the amount of toast that could be stack at the same time, before calling function fallback(). Default value 10
 */
setMaxToastCount(toastAmount) {...}
```

setToastTemplate:
```js
/**
 * @param {React element} template : the template used for toast
 */
const template: React.FC<{type: ToastTypeEnum, message: string, translateValue: number}> = (props) => {
    return <Animated.View style={[ToastStyle.toastWrapper, {transform: [{ translateY: props.translateValue }]} ]}>
        <View style={ToastStyle.toast}>
            <Text style={ToastStyle.toastMessage}>{props.message}</Text>
        </View>
    </Animated.View>
};

setToastTemplate(template);
```

setFallback:
```js
/**
 * @param {function} fallBack : function called when max amout of toast that could be staked is reached
 */
setFallback(fallBack) {...}
```

setZIndex:
```js
/**
 * @param {number} value : the new value of Toasts zIndex
 */
setZIndex(value) {...}
```

setVerticalVisiblePosition:
```js
/**
 * @param {number} y : absolute y position of the toast when visible
 */
const setVerticalVisiblePosition = (y) => {
    if (isNaN(y)) {
        throw new Error("setVerticalVisiblePosition: value must be a number");
    }
    TOAST_ENUMS = {
        ...TOAST_ENUMS,
        VERTICAL_VISIBLE_POS: y
    }
}
```

getVerticalVisiblePosition:
```js
const getVerticalVisiblePosition = () => TOAST_ENUMS.VERTICAL_VISIBLE_POS;
```

---
_Source: https://npm.io/package/rn-toaster-stack · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._