{"_id":"@dtrongphuc/react-native-toast-notifications","name":"@dtrongphuc/react-native-toast-notifications","dist-tags":{"latest":"3.4.0"},"versions":{"3.4.0":{"name":"@dtrongphuc/react-native-toast-notifications","version":"3.4.0","main":"lib/commonjs/index.js","module":"lib/module/index.js","types":"lib/typescript/index.d.ts","react-native":"src/index.ts","license":"MIT","author":{"name":"dtrongphuc","email":"dtrongphucdv@gmail.com"},"homepage":"https://github.com/dtrongphuc/react-native-toast-notifications#readme","peerDependencies":{"react":"*","react-native":"*"},"devDependencies":{"@react-native-community/bob":"^0.16.2","@types/react":"^16.9.49","@types/react-native":"^0.63.52","typescript":"^4.0.3"},"scripts":{"prepare":"bob build"},"keywords":["react-native-component","react-component","react-native","ios","android","windows","toast","animated","animation","message"],"@react-native-community/bob":{"source":"src","output":"lib","targets":[["commonjs",{"copyFlow":true}],"module","typescript"]},"gitHead":"515d0f19d52cb2c82a3dccefd30552bcd56907f0","description":"[![Version][version-badge]][package] [![MIT License][license-badge]][license]","_id":"@dtrongphuc/react-native-toast-notifications@3.4.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-k19QLpsXOe7/Ew9ahubfy009FtoCPeWoiCaKzUjq25Q4HLMwtmk84Joo4My+oxPdekCvjWFqvUt2EyDhXJ7EQw==","shasum":"863f5dadc22496a56a3c40e54307d14cea4a4bbe","tarball":"https://registry.npmjs.org/@dtrongphuc/react-native-toast-notifications/-/react-native-toast-notifications-3.4.0.tgz","fileCount":52,"unpackedSize":155779,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDeJa+3A2sx7ycy90gdowuGCsHrmwDmxX/gYeCah+mwPgIgNORSvDI3xJ45GxJR26yS+rv8gofwUbLfz29Zcu1xgfo="}]},"_npmUser":{"name":"dtrongphuc","email":"dtrongphucdv@gmail.com"},"directories":{},"maintainers":[{"name":"dtrongphuc","email":"dtrongphucdv@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-toast-notifications_3.4.0_1715152663339_0.6999455575411742"},"_hasShrinkwrap":false}},"time":{"created":"2024-05-08T07:17:43.218Z","3.4.0":"2024-05-08T07:17:43.568Z","modified":"2024-05-08T07:17:43.860Z"},"maintainers":[{"name":"dtrongphuc","email":"dtrongphucdv@gmail.com"}],"description":"[![Version][version-badge]][package] [![MIT License][license-badge]][license]","homepage":"https://github.com/dtrongphuc/react-native-toast-notifications#readme","keywords":["react-native-component","react-component","react-native","ios","android","windows","toast","animated","animation","message"],"author":{"name":"dtrongphuc","email":"dtrongphucdv@gmail.com"},"license":"MIT","readme":"# react-native-toast-notifications\n\n[![Version][version-badge]][package]\n[![MIT License][license-badge]][license]\n\nToast component for React Native, supports Android, IOS and Web\n\n## Features\n\n- Fully Customizable\n- Swipe to close support\n- Smooth animation\n- Fully typed with TypeScript\n\n## Demo\n\n![](https://user-images.githubusercontent.com/61647712/124135853-72742d80-da99-11eb-95f8-893281862e96.gif)\n\n[react-native-web Demo](https://arnnis.github.io/react-native-toast-notifications/)\n\n## Install\n\nOpen a Terminal in the project root and run:\n\n```sh\nyarn add react-native-toast-notifications\n```\n\n## Usage\n\nWrap your app in the `ToastProvider`, which provides context for the Toast hook.\n\n```js\nimport { ToastProvider } from 'react-native-toast-notifications'\n\nexport default function App() {\n  return (\n    <ToastProvider>\n      <RestOfYourApp />\n    <ToastProvider/>\n  );\n}\n```\n\nThen use hook like this everywhere in your app:\n\n```js\nimport { useToast } from \"react-native-toast-notifications\";\n\nconst Component = () => {\n  const toast = useToast();\n\n  useEffect(() => {\n    toast.show(\"Hello World\");\n  }, []);\n};\n```\n\n## Methods\n\n### show()\n\n```js\ntoast.show(\"Task finished successfully\", {\n  type: \"normal | success | warning | danger | custom\",\n  placement: \"top | bottom\",\n  duration: 4000,\n  offset: 30,\n  animationType: \"slide-in | zoom-in\",\n});\n```\n\n### update()\n\n```js\nlet id = toast.show(\"Loading...\");\ntoast.update(id, \"Loading completed\", {type: \"success\"});\n```\n\n### hide()\n\n```js\nlet id = toast.show(\"Loading...\");\ntoast.hide(id);\n// or\ntoast.hideAll();\n```\n\n## Customization\n\n### `ToastProvider` props\n\nThere are lots of props to customize your toast or your can use renderToast to implement your own component.\n\n```js\n<ToastProvider\n    placement=\"bottom | top\"\n    duration={5000}\n    animationType='slide-in | zoom-in'\n    animationDuration={250}\n    successColor=\"green\"\n    dangerColor=\"red\"\n    dangerColor=\"red\"\n    warningColor=\"orange\"\n    normalColor=\"gray\"\n    icon={<Icon />}\n    successIcon={<SuccessIcon />}\n    dangerIcon={<DangerIcon />}\n    warningIcon={<WarningIcon />}\n    textStyle={{ fontSize: 20 }}\n    offset={50} // offset for both top and bottom toasts\n    offsetTop={30}\n    offsetBottom={40}\n    swipeEnabled={true}\n    renderToast={(toastOptions) => JSX.Element} implement custom toast component.\n>\n...\n</>\n```\n\n### Custom toast types\n\nYou can implement your own custom types or overwrite the existing ones\n\n```js\n<ToastProvider\n    renderType={{\n      custom_type: (toast) => (\n        <View style={{padding: 15, backgroundColor: 'grey'}}>\n          <Text>{toast.message}</Text>\n        </View>\n      )\n    }}\n>\n...\n</>\n\n// You can pass other data to your custom toast using data property in show method.\ntoast.show(\"Show custom toast\", {data: { title: 'Toast title' }})\n```\n\n## FAQ\n\n### - How to call toast outside React components?\n\nTo 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.\n\n```js\nimport {Toast} from \"react-native-toast-notifications\";\n\n// you can call this everywhere\nToast.show('toast message')\n```\n\n\n### - How to show toast inside a Modal?\n\nThe 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.\n\nAs a workaround you can put toast inside modal like this:\n\n```\nimport Toast from \"react-native-toast-notifications\";\n\nexport Component = () => {\n    const toastRef = useRef();\n    return (\n        <Modal>\n            .....\n            <Toast ref={toastRef} />\n        </Modal>\n\n}\n```\n\n## Contributing\n\nPull request are welcome.\n\nWhile developing, you can run the [example app](/example) to test your changes.\n\n## Donation\n\nIf this project helped you reduce time to develop, you can buy me a cup of coffee :)\n\n<a href=\"https://www.buymeacoffee.com/arnnis\" target=\"_blank\"><img src=\"https://cdn.buymeacoffee.com/buttons/default-red.png\" alt=\"Buy Me A Coffee\" height=\"50\" ></a>\n\n## Hire\n\nLooking for a React/React-Native Expert? Email at alirezarzna@gmail.com\n\n## License\n\nMIT\n\n[version-badge]: https://img.shields.io/npm/v/react-native-toast-notifications.svg?style=flat-square\n[package]: https://www.npmjs.com/package/react-native-toast-notifications\n[license-badge]: https://img.shields.io/static/v1?label=License&message=MIT&color=success&style=flat-square\n[license]: https://github.com/arnnis/react-native-toast-notifications/blob/master/LICENSE\n","readmeFilename":"README.md"}