{"id":26904235,"url":"https://github.com/gstj/react-native-magic-toast","last_synced_at":"2025-04-01T10:52:55.200Z","repository":{"id":53205999,"uuid":"462443312","full_name":"GSTJ/react-native-magic-toast","owner":"GSTJ","description":"🦄 A beautiful imperative toast you can call from anywhere!","archived":false,"fork":false,"pushed_at":"2024-06-08T19:47:39.000Z","size":759,"stargazers_count":12,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-29T12:57:18.312Z","etag":null,"topics":["modal","react-native","toast"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/GSTJ.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"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}},"created_at":"2022-02-22T19:24:13.000Z","updated_at":"2024-08-24T08:54:29.000Z","dependencies_parsed_at":"2024-06-08T20:46:45.502Z","dependency_job_id":"4fefba30-42ec-4daa-8702-32986de1f6ed","html_url":"https://github.com/GSTJ/react-native-magic-toast","commit_stats":{"total_commits":24,"total_committers":1,"mean_commits":24.0,"dds":0.0,"last_synced_commit":"a5bd0630af16acadea7dd0949b7a29a8ba9e31cd"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GSTJ%2Freact-native-magic-toast","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GSTJ%2Freact-native-magic-toast/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GSTJ%2Freact-native-magic-toast/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GSTJ%2Freact-native-magic-toast/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GSTJ","download_url":"https://codeload.github.com/GSTJ/react-native-magic-toast/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246628338,"owners_count":20808106,"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":["modal","react-native","toast"],"created_at":"2025-04-01T10:52:54.631Z","updated_at":"2025-04-01T10:52:55.193Z","avatar_url":"https://github.com/GSTJ.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![React Native Magic Toast Cover](https://user-images.githubusercontent.com/50031755/182908210-860f7e09-a644-4a74-8000-46f7f5bbf01e.png)\n\n# React Native Magic Toast 🦄\n\nA beautiful Toast library that can be called imperatively from anywhere!\n\n| IOS                                                                                                                           | Android                                                                                                                       |\n| ----------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |\n| \u003cimg src=\"https://github.com/GSTJ/react-native-magic-toast/assets/50031755/a9fb45ca-b199-4dcb-9c91-3b5564fbb1af\" height=600/\u003e | \u003cimg src=\"https://user-images.githubusercontent.com/50031755/155205325-d5f4c239-90b6-432b-9753-afe19d64695c.gif\" height=600/\u003e |\n\n## Installation\n\n```sh\nyarn add react-native-magic-toast react-native-magic-modal react-native-safe-area-context\n```\n\nThis toast uses [react-native-magic-modal](https://github.com/GSTJ/react-native-magic-modal) as a base for displaying it anywhere. [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context) is here to prevent the modal message from being underneath safe areas.\n\n## Usage\n\nInsert a SafeAreaProvider encapsulating your app and a MagicModalPortal right beneath it\n\n```js\nimport { SafeAreaProvider } from 'react-native-safe-area-context';\nimport { MagicModalPortal } from 'react-native-magic-modal';\n\nexport default function App() {\n  return (\n    \u003cSafeAreaProvider\u003e\n      \u003cMagicModalPortal /\u003e\n      // \u003cRouter /\u003e\n    \u003c/SafeAreaProvider\u003e\n  );\n}\n```\n\nThen, you are free to use the magicToast as shown from anywhere you want.\n\n```js\nimport { magicToast } from 'react-native-magic-toast';\n\n// ...\n\nmagicToast.alert('Oops! Something went wrong 😬');\nmagicToast.success('Hurray! Saved successfully');\n\n// You can also use the show method to render a custom toast\nmagicToast.show(() =\u003e (\n  /**\n   * Toast.Container is obligatory as it handles the duration, but you are free\n   * to customize the View as you wish. You can change the default background color,\n   * padding, everything! The rest of the components are optional and just help you\n   * to build a toast faster.\n   */\n  \u003cToast.Container duration={1000}\u003e\n    \u003cMyCustomIcon /\u003e\n    \u003cToast.Message\u003eMy custom toast\u003c/Toast.Message\u003e\n  \u003c/Toast.Container\u003e\n));\n```\n\n## Contributing\n\nSee the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.\n\n## License\n\n[MIT](LICENSE.md)\n\nMade with 💖 by [Gabriel Taveira](https://github.com/GSTJ)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgstj%2Freact-native-magic-toast","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgstj%2Freact-native-magic-toast","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgstj%2Freact-native-magic-toast/lists"}