Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rnheroes/react-native-toastable
🍞 Blazingly fast and fully customizable Toaster component for React Native
https://github.com/rnheroes/react-native-toastable
react react-native react-native-toast toastable toaster
Last synced: 4 days ago
JSON representation
🍞 Blazingly fast and fully customizable Toaster component for React Native
- Host: GitHub
- URL: https://github.com/rnheroes/react-native-toastable
- Owner: rnheroes
- License: mit
- Created: 2023-04-06T12:14:30.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-07-04T10:01:53.000Z (6 months ago)
- Last Synced: 2024-12-14T15:05:50.529Z (11 days ago)
- Topics: react, react-native, react-native-toast, toastable, toaster
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-native-toastable
- Size: 9.58 MB
- Stars: 100
- Watchers: 1
- Forks: 5
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# react-native-toastable
[](https://www.npmjs.com/package/react-native-toastable)
[](http://hits.dwyl.com/rnheroes/react-native-toastable)
🍞 Blazingly fast and fully customizable Toaster component for React Native
- Supports queuinge, so you can display multiple toasts in succession without having to worry about them overlapping or interfering with each other
- Fully typed, using TypeScript
- Supports swipe to dismiss multiple directions (left, right, up)
- Performant, using native animations and avoiding unnecessary re-renders
- Zero external dependencies
- Highly customizable, allowing you to tailor it to fit your specific needs
https://user-images.githubusercontent.com/43743872/230865010-6c1c7890-2eec-47c1-bbe4-44c6c6379037.mp4
## Installation
```sh
yarn add react-native-toastable
```
or
```sh
npm install react-native-toastable
```
## Usage
Place `Toastable` component at the root of your app, and import `showToastable` function anywhere in your app to show or `hideToastable` to hide toast.
Note: **If you need to use top inset of the device, Toastable must be child of `SafeAreaProvider`, otherwise you can use any value for `offset` prop, default is `56`.**
```js
import { View } from 'react-native';
import { useSafeAreaInsets, SafeAreaProvider } from 'react-native-safe-area-context';
import Toastable from 'react-native-toastable';
export default function App() {
return (
);
}
export default function RootNavigation() {
const { top } = useSafeAreaInsets();
return (
);
}
import { View, Button } from 'react-native';
import { hideToastable, showToastable } from 'react-native-toastable';
export default function HomeScreen() {
return (
showToastable({ message: 'React Native Heroes is awesome! 🚀', status:'success' })}
/>
hideToastable()}
/>
);
}
```
## Props
Inherit all other props from `ToastableBodyParams` interface. Except `backgroundColor`, `status`, `message`, `onPress`, `contentStyle` props.
| Property | Type | Description | Default |
|---------------------|----------------------|---------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------|
| statusMap | `StatusMap` | Status map, used to determine background color based on status | `success: '#00BFA6', danger: '#FF5252', warning: '#FFD600', info: '#2962FF'` |
| onToastableHide | `Func` | Callback when toast is dismissed | `undefined` |
| containerStyle | `ViewProps['style']` | Container style for toast container | `undefined` |
position | `'top' \| 'center'` | Toast position. | `'top'` |
offset | `number` | Toast offset. | `56` |
## ToastableBodyParams
| Params | Type | Description | Default |
| ---------------- | --------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | --------- |
| renderContent | `(props: ToastableBodyParams) => React.ReactNode` | Render custom content, if this is set, message will be ignored. | `undefined` |
| contentStyle | `ViewProps['style']` | Custom content style. | `undefined` |
| backgroundColor | `ColorValue` | Custom background color, if this is set, status will be ignored. | `undefined` |
| status | `ToastableMessageStatus` | Message status, this will be used to determine background color based on `statusMap` prop. | `'info'` |
| message | `TextProps['children']` | Message to be displayed. | `undefined` |
| onPress | `Func` | On press callback. | `undefined` |
| duration | `number` | Duration in milliseconds. | `3000` |
| alwaysVisible | `boolean` | Make toast always visible, even when there is a new toast. | `false` |
| animationOutTiming | `number` | Animation timing for toast out in milliseconds. | `300` |
| animationInTiming | `number` | Animation timing for toast in in milliseconds. | `300` |
| swipeDirection | `'up' \| 'left' \| 'right' \| Array<'up' \| 'left' \| 'right'>` | Swipe direction to dismiss toast. | `'up'` |
titleColor | `ColorValue` | Custom title color, if this is set. | `'#FFFFFF'` |
| messageColor | `ColorValue` | Custom message color, if this is set. | `'#FFFFFF'` |
titleStyle | `TextStyle` | Custom title style. | `undefined` |
messageStyle | `TextStyle` | Custom message style. | `undefined` |
position | `'top' \| 'bottom'\| 'center'` | Toast position. | `'top'` |
offset | `number` | Toast offset. | `56` |
## Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## Roadmap
- Add more examples
- Support animationIn and animationOut props
- Support stackable toasts
- Support custom animations
- Add custom status support
## Inspiration
- [react-native-modal](https://github.com/react-native-modal/react-native-modal)
## License
MIT
---
Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)