https://github.com/cawfree/react-native-buttered-toast
A customizable toast notification for React Native.
https://github.com/cawfree/react-native-buttered-toast
native notification popup react react-native toast
Last synced: about 1 year ago
JSON representation
A customizable toast notification for React Native.
- Host: GitHub
- URL: https://github.com/cawfree/react-native-buttered-toast
- Owner: cawfree
- License: mit
- Created: 2019-08-27T22:48:19.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T09:21:53.000Z (over 3 years ago)
- Last Synced: 2025-03-18T13:11:21.085Z (over 1 year ago)
- Topics: native, notification, popup, react, react-native, toast
- Language: JavaScript
- Size: 3.54 MB
- Stars: 8
- Watchers: 1
- Forks: 4
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🍞 react-native-buttered-toast
An utterly, butterly, customizable toast notification for React Native. Display any React `` as a Toast notification.
Supports Android, iOS and Web.
## 🚀 Getting Started
Using [`npm`]():
```sh
npm install --save react-native-buttered-toast
```
Using [`yarn`]():
```sh
yarn add react-native-buttered-toast
```
## ✍️ Example
There are a couple of prerequisites to be aware of before using this library:
- You must use a `` at the graphical root of your application.
- `react-native-buttered-toast` does not render using a ``, so any other elements higher in the hierarchy have the potential to render over the top of your notifications.
- Any component you'd wish to have the ability to generate a toast will need to be wrapped with the `withButter` higher-order component (HOC).
```javascript
import React, { useEffect } from 'react';
import { View, Text, Easing, StyleSheet } from 'react-native';
import ButteredToastProvider, { withButter } from 'react-native-buttered-toast';
const styles = StyleSheet
.create(
{
container: {
alignItems: 'center',
justifyContent: 'center',
},
},
);
// XXX: The `withButter` HOC supplies the `makeToast` and `consumeToast` props, used to show and dismiss toasts respectively.
const App = ({ makeToast, consumeToast }) => {
useEffect(
() => {
makeToast(
({ ...extraProps }) => (
),
{
// XXX: Allow swipe to dismiss.
dismissable: true,
// XXX: Automatically kill after two seconds.
lifespan: 2000,
// XXX: When the toast pops up, make it to bounce!
easing: Easing.bounce,
},
);
},
);
return (
);
};
export default ({ ...extraProps }) => {
const ButteryApp = withButter(
App,
);
return (
);
};
```
## 📌 Props
### `ButteredToastProvider`
Property | Type | Required | Default value | Description
:--- | :--- | :--- | :--- | :---
paddingBottom|number|no|30| Spacing to apply to the bottom of the toasts.
paddingRight|number|no|10| Spacing to apply to the right of the toasts.
paddingBetween|number|no|10| Spacing to apply between successive toasts.
duration|number|no|500| Default amount of time to automatically consume (hide) a toast.
easing|func|no|Easing.bounce| Easing function when automatically consuming a toast.
-----
### `makeToast` Options
The `makeToast` prop injected by the `ButteredToastProvider` accepts a React Element as the first argument, and an `options` argument as the last. These options default to:
```javascript
{
containerStyle: styles.containerStyle, // An empty styles object.
duration: 1200,
easing: Easing.bounce,
lifespan: -1, // Must be dismissed.
dismissable: true,
}
```
## ✌️ License
[MIT](https://opensource.org/licenses/MIT)
