{"id":18488144,"url":"https://github.com/arnnis/react-native-toast-notifications","last_synced_at":"2025-05-15T12:05:36.668Z","repository":{"id":37407787,"uuid":"293857552","full_name":"arnnis/react-native-toast-notifications","owner":"arnnis","description":"Toast component for React Native, supports Android, iOS and Web","archived":false,"fork":false,"pushed_at":"2024-08-12T12:13:09.000Z","size":2784,"stargazers_count":580,"open_issues_count":30,"forks_count":91,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-05-11T05:02:28.202Z","etag":null,"topics":["android","ios","react-native","react-native-web","swipe","toast","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/arnnis.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":["buymeacoffee.com/arnnis"]}},"created_at":"2020-09-08T15:51:18.000Z","updated_at":"2025-05-09T06:39:54.000Z","dependencies_parsed_at":"2023-01-30T00:01:27.003Z","dependency_job_id":"9a192397-39a4-43cc-92ae-a2612143b5bf","html_url":"https://github.com/arnnis/react-native-toast-notifications","commit_stats":{"total_commits":140,"total_committers":21,"mean_commits":6.666666666666667,"dds":"0.26428571428571423","last_synced_commit":"e0ed48e1098359d933c84c9c6dbaafe13810ea68"},"previous_names":["arnnis/react-native-fast-toast"],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnnis%2Freact-native-toast-notifications","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnnis%2Freact-native-toast-notifications/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnnis%2Freact-native-toast-notifications/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnnis%2Freact-native-toast-notifications/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arnnis","download_url":"https://codeload.github.com/arnnis/react-native-toast-notifications/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254337613,"owners_count":22054253,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","ios","react-native","react-native-web","swipe","toast","typescript"],"created_at":"2024-11-06T12:51:19.464Z","updated_at":"2025-05-15T12:05:36.623Z","avatar_url":"https://github.com/arnnis.png","language":"TypeScript","funding_links":["buymeacoffee.com/arnnis","https://www.buymeacoffee.com/arnnis"],"categories":["TypeScript"],"sub_categories":[],"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    \u003cToastProvider\u003e\n      \u003cRestOfYourApp /\u003e\n    \u003cToastProvider/\u003e\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 = () =\u003e {\n  const toast = useToast();\n\n  useEffect(() =\u003e {\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\u003cToastProvider\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={\u003cIcon /\u003e}\n    successIcon={\u003cSuccessIcon /\u003e}\n    dangerIcon={\u003cDangerIcon /\u003e}\n    warningIcon={\u003cWarningIcon /\u003e}\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) =\u003e JSX.Element} implement custom toast component.\n\u003e\n...\n\u003c/\u003e\n```\n\n### Custom toast types\n\nYou can implement your own custom types or overwrite the existing ones\n\n```js\n\u003cToastProvider\n    renderType={{\n      custom_type: (toast) =\u003e (\n        \u003cView style={{padding: 15, backgroundColor: 'grey'}}\u003e\n          \u003cText\u003e{toast.message}\u003c/Text\u003e\n        \u003c/View\u003e\n      )\n    }}\n\u003e\n...\n\u003c/\u003e\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 = () =\u003e {\n    const toastRef = useRef();\n    return (\n        \u003cModal\u003e\n            .....\n            \u003cToast ref={toastRef} /\u003e\n        \u003c/Modal\u003e\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\u003ca href=\"https://www.buymeacoffee.com/arnnis\" target=\"_blank\"\u003e\u003cimg src=\"https://cdn.buymeacoffee.com/buttons/default-red.png\" alt=\"Buy Me A Coffee\" height=\"50\" \u003e\u003c/a\u003e\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\u0026message=MIT\u0026color=success\u0026style=flat-square\n[license]: https://github.com/arnnis/react-native-toast-notifications/blob/master/LICENSE\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnnis%2Freact-native-toast-notifications","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farnnis%2Freact-native-toast-notifications","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnnis%2Freact-native-toast-notifications/lists"}