https://github.com/arnnis/react-native-toast-notifications
Toast component for React Native, supports Android, iOS and Web
https://github.com/arnnis/react-native-toast-notifications
android ios react-native react-native-web swipe toast typescript
Last synced: 5 months ago
JSON representation
Toast component for React Native, supports Android, iOS and Web
- Host: GitHub
- URL: https://github.com/arnnis/react-native-toast-notifications
- Owner: arnnis
- Created: 2020-09-08T15:51:18.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2024-08-12T12:13:09.000Z (about 1 year ago)
- Last Synced: 2025-05-11T05:02:28.202Z (5 months ago)
- Topics: android, ios, react-native, react-native-web, swipe, toast, typescript
- Language: TypeScript
- Homepage:
- Size: 2.66 MB
- Stars: 580
- Watchers: 5
- Forks: 91
- Open Issues: 30
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# react-native-toast-notifications
[![Version][version-badge]][package]
[![MIT License][license-badge]][license]
Toast component for React Native, supports Android, IOS and Web
## Features
- Fully Customizable
- Swipe to close support
- Smooth animation
- Fully typed with TypeScript
## Demo
[react-native-web Demo](https://arnnis.github.io/react-native-toast-notifications/)
## Install
Open a Terminal in the project root and run:
```sh
yarn add react-native-toast-notifications
```
## Usage
Wrap your app in the `ToastProvider`, which provides context for the Toast hook.
```js
import { ToastProvider } from 'react-native-toast-notifications'
export default function App() {
return (
);
}
```
Then use hook like this everywhere in your app:
```js
import { useToast } from "react-native-toast-notifications";
const Component = () => {
const toast = useToast();
useEffect(() => {
toast.show("Hello World");
}, []);
};
```
## Methods
### show()
```js
toast.show("Task finished successfully", {
type: "normal | success | warning | danger | custom",
placement: "top | bottom",
duration: 4000,
offset: 30,
animationType: "slide-in | zoom-in",
});
```
### update()
```js
let id = toast.show("Loading...");
toast.update(id, "Loading completed", {type: "success"});
```
### hide()
```js
let id = toast.show("Loading...");
toast.hide(id);
// or
toast.hideAll();
```
## Customization
### `ToastProvider` props
There are lots of props to customize your toast or your can use renderToast to implement your own component.
```js
}
successIcon={}
dangerIcon={}
warningIcon={}
textStyle={{ fontSize: 20 }}
offset={50} // offset for both top and bottom toasts
offsetTop={30}
offsetBottom={40}
swipeEnabled={true}
renderToast={(toastOptions) => JSX.Element} implement custom toast component.
>
...
>
```
### Custom toast types
You can implement your own custom types or overwrite the existing ones
```js
(
{toast.message}
)
}}
>
...
>
// You can pass other data to your custom toast using data property in show method.
toast.show("Show custom toast", {data: { title: 'Toast title' }})
```
## FAQ
### - How to call toast outside React components?
To call toasts everywhere (even outside of React components like in redux actions), After you wrapped your app in `ToastProvider`, You can use the `Toast` import to call toasts everywhre.
```js
import {Toast} from "react-native-toast-notifications";
// you can call this everywhere
Toast.show('toast message')
```
### - How to show toast inside a Modal?
The Modal component is a native view that sits on top of the rest of react-native application. The only way to put something above it is to put something in the modal itself, or alternately to use a JS only implementation of a Modal.
As a workaround you can put toast inside modal like this:
```
import Toast from "react-native-toast-notifications";
export Component = () => {
const toastRef = useRef();
return (
.....
}
```
## Contributing
Pull request are welcome.
While developing, you can run the [example app](/example) to test your changes.
## Donation
If this project helped you reduce time to develop, you can buy me a cup of coffee :)
## Hire
Looking for a React/React-Native Expert? Email at alirezarzna@gmail.com
## License
MIT
[version-badge]: https://img.shields.io/npm/v/react-native-toast-notifications.svg?style=flat-square
[package]: https://www.npmjs.com/package/react-native-toast-notifications
[license-badge]: https://img.shields.io/static/v1?label=License&message=MIT&color=success&style=flat-square
[license]: https://github.com/arnnis/react-native-toast-notifications/blob/master/LICENSE