{"id":29784791,"url":"https://github.com/pakenfit/toast-it","last_synced_at":"2026-05-08T04:07:38.580Z","repository":{"id":176649427,"uuid":"658022664","full_name":"pakenfit/toast-it","owner":"pakenfit","description":"Let's toast to the health of your app 🔥","archived":false,"fork":false,"pushed_at":"2023-09-30T13:32:02.000Z","size":5515,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-08-09T12:28:38.149Z","etag":null,"topics":["expo","react-native","react-native-reanimated","toast","toast-notifications"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@pakenfit/toast-it","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/pakenfit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-06-24T14:24:08.000Z","updated_at":"2023-07-12T08:51:03.000Z","dependencies_parsed_at":"2023-09-27T02:09:27.324Z","dependency_job_id":null,"html_url":"https://github.com/pakenfit/toast-it","commit_stats":null,"previous_names":["pakenfit/toast-it"],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/pakenfit/toast-it","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pakenfit%2Ftoast-it","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pakenfit%2Ftoast-it/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pakenfit%2Ftoast-it/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pakenfit%2Ftoast-it/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pakenfit","download_url":"https://codeload.github.com/pakenfit/toast-it/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pakenfit%2Ftoast-it/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267384431,"owners_count":24078578,"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","status":"online","status_checked_at":"2025-07-27T02:00:11.917Z","response_time":82,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["expo","react-native","react-native-reanimated","toast","toast-notifications"],"created_at":"2025-07-27T16:13:08.212Z","updated_at":"2026-05-08T04:07:33.522Z","avatar_url":"https://github.com/pakenfit.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @pakenfit/toast-it\n\nLet's toast to the health of your application\n\n\u003cp align='center' style=\"display: flex\"\u003e\n  \u003cimg src='./screenshots/demo_ios.gif' width=\"300\"\u003e\n  \u003cimg src='./screenshots/demo_android.gif' width=\"300\"\u003e\n\u003c/p\u003e\n\n\u003cp\u003eWith animation type spring and backdrop for loading\u003c/p\u003e\n\u003cp align='center' style=\"display: flex\"\u003e\n  \u003cimg src='./screenshots/demo_ios_spring_backdrop.gif' width=\"300\"\u003e\n  \u003cimg src='./screenshots/demo_android_spring_backdrop.gif' width=\"300\"\u003e\n\u003c/p\u003e\n\n\n## Installation\n\n```sh\nnpm install @pakenfit/toast-it --save\n```\n\n\u003cp align=\"center\"\u003eOr\u003c/p\u003e\n\n```sh\nyarn add @pakenfit/toast-it\n```\n\n#### Dependencies\nThis library needs these dependencies to be installed in your project before you can use it:\n\n```sh\nnpm install react-native-gesture-handler react-native-reanimated react-native-safe-area-context react-native-svg --save\n```\n\u003cp align=\"center\"\u003eOr\u003c/p\u003e\n\n```sh\nyarn add react-native-gesture-handler react-native-reanimated react-native-safe-area-context react-native-svg\n```\n\n## Features\n\n- Fully customizable\n- Works on `Android` and `iOS` (not tested on `web` should work as well)\n- Compatible with Expo Go\n- Written in Typescript\n\n\n## Usage\n\n```js\nimport { ToastProvider, useToast } from '@pakenfit/toast-it';\n\nconst ToastComponent = () =\u003e {\n  const { show, hide } = useToast();\n\n  return (\n    \u003cView\u003e\n      \u003cButton\n        label='Show Toast'\n        onPress={() =\u003e\n          show({\n            type: 'success',\n            message: 'This is a success Toast🤙🏽',\n          })\n        }\n      /\u003e\n    \u003c/View\u003e\n  )\n}\n\nexport default function App() {\n\n  return (\n    \u003cSafeAreaProvider\u003e\n        \u003cToastProvider\n          defaultConfig={{\n            textNumberOfLines: 2,\n            bgColor: 'white',\n            textColor: 'black',\n          }}\n        /\u003e\n        \u003cToastComponent/\u003e\n    \u003c/SafeAreaProvider\u003e\n  )\n}\n\n\n```\n\n## Configuration\nThe toast component accepts the following configuration options:\n\n- `type (optional)`: The type of the toast message. Possible values are `'success'`, `'error'`, `'warning'`, `'info'`, or `'loading'`. Default is `'info'`.\n- `message`: The text message to be displayed in the toast.\n- `duration (optional)`: The duration of the toast message in milliseconds. Use `'infinite'` for an indefinite duration. Default is `3000` milliseconds.\n- `textColor (optional)`: The text color of the toast message. Default is `black`.\n- `iconColor (optional)`: The color of the toast icon. Default is undefined (uses default color for each type).\n- `iconSize (optional)`: The size of the toast icon. Default is undefined (uses default size for each type).\n- `textNumberOfLines (optional)`: The number of lines to display for the toast message. Default is `1`.\n- `withBackdrop (optional, only for type loading)`: If true a backdrop is set when loading. Default is `false`.\n-  `backdropColor (optional, only for type loading)`: Set the backdrop color.\n-  `backdropOpacity (optional, only for type loading)`: Set the backdrop opacity.\n-  `animationType (optional)`: The toast enter animation type. Possible values are `'timing'` and `'spring'`. Default is `'timing'`.\n-  `containerStyle (optional)`: The toast container style.\n\n\n\n## API\nThe Toast component provides the following methods through the toastRef:\n\n- `show(config: ToastConfig)`: Displays a toast message with the specified configuration.\n- `hide()`: Hides the currently displayed toast message.\n- `isVisible()`: Returns a boolean indicating whether a toast message is currently visible.\n\n## Types\n\n### ToastRef\nThe `ToastRef` type represents the reference to the Toast component, allowing access to its methods. It has the following methods:\n\n- `show`: Shows the toast with the specified configuration.\n- `hide`: Hides the toast.\n- `isVisible`: Returns a boolean indicating whether the toast is currently visible.\n\n### ToastConfig\nThe `ToastConfig` type represents the configuration options for the toast component. It has the following properties:\n\n```\ntype ToastConfig = {\n  type?: toastType;\n  message: string;\n  duration?: number | 'infinite';\n  textColor?: string;\n  iconColor?: string;\n  iconSize?: number;\n  textNumberOfLines?: number;\n  withBackdrop?: boolean;\n  backdropColor?: string;\n  backdropOpacity?: number;\n  animationType?: 'timing' | 'spring',\n  containerStyle?: ViewStyle\n}\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## Development\n\nYou can launch the example app to test your feature or bug:\n\n```sh\nyarn example ios\n\nor\n\nyarn example android\n```\n\nRun tests\n\n```\nyarn test\n```\n\n## License\n\nMIT\n\n---\n\nMade with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)\n\nInspired by [react-hot-toast](https://github.com/timolins/react-hot-toast)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpakenfit%2Ftoast-it","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpakenfit%2Ftoast-it","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpakenfit%2Ftoast-it/lists"}