1// toast in react
2// create toast.js component
3
4import { toast } from 'react-toastify';
5import 'react-toastify/dist/ReactToastify.css';
6
7toast.configure()
8
9const options = {
10 autoClose: 2000,
11 className: '',
12 position: toast.POSITION.TOP_RIGHT,
13};
14
15export const toastSuccess = message => {
16 console.log("Hello0 success toast")
17 toast.success(message, options);
18}
19
20export const toastError = message => {
21 toast.error(message, options);
22}
23
24export const toastWarning = message => {
25 toast.warn(message, options);
26}
27
28export const toastInformation = message => {
29 toast.info(message, options);
30}
31
32export const toastDark = message => {
33 toast.dark(message, options);
34}
35
36export const toastDefault = message => {
37 toast(message, options);
38}
39
40// wherever in need that toast use like this
41
42import { toastError, toastSuccess } from "./Toast";
43toastSuccess("User successfully registered");
44toastError("User is not created try again");
45
1import { ToastProvider } from 'react-toast-notifications';
2import { Snack } from '../snackbar';
3
4const App = () => (
5 <ToastProvider
6 autoDismiss
7 autoDismissTimeout={6000}
8 components={{ Toast: Snack }}
9 placement="bottom-center"
10 appearance: 'success',
11 autoDismiss: true,
12 >
13 ...
14 </ToastProvider>
15);
16
1npm install react-native-simple-toast --save
2react-native link react-native-simple-toast // only RN < 0.60
3cd ios && pod install
1<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
2<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.3/toastr.min.css">
3