toast react

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