{"id":50103144,"url":"https://github.com/NitrogenZLab/ting","last_synced_at":"2026-06-09T00:00:48.771Z","repository":{"id":179868832,"uuid":"657936007","full_name":"NitrogenZLab/ting","owner":"NitrogenZLab","description":"🍞 Flexible and customizable React Native toast/alert notifications with support for positioning, custom rendering, click handlers, and duration control. Written in Swift and Kotlin","archived":false,"fork":false,"pushed_at":"2024-11-10T17:41:12.000Z","size":2472,"stargazers_count":358,"open_issues_count":17,"forks_count":27,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-08-09T07:35:55.711Z","etag":null,"topics":["alert","android","ios","native-module","new-architecture","react-native","toast","toast-notifications"],"latest_commit_sha":null,"homepage":"","language":"Swift","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/NitrogenZLab.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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},"funding":{"github":"baronha","patreon":"baronha","open_collective":null,"ko_fi":"baoha","tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":null}},"created_at":"2023-06-24T09:03:11.000Z","updated_at":"2025-07-22T11:56:08.000Z","dependencies_parsed_at":null,"dependency_job_id":"95273f84-2002-4fe4-91ba-062ec0b2c1f3","html_url":"https://github.com/NitrogenZLab/ting","commit_stats":{"total_commits":97,"total_committers":7,"mean_commits":"13.857142857142858","dds":0.1649484536082474,"last_synced_commit":"589e122c67577e507f675ac0ca8d1d3e29d39e94"},"previous_names":["baronha/ting","nitrogenzlab/ting"],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/NitrogenZLab/ting","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NitrogenZLab%2Fting","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NitrogenZLab%2Fting/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NitrogenZLab%2Fting/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NitrogenZLab%2Fting/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NitrogenZLab","download_url":"https://codeload.github.com/NitrogenZLab/ting/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NitrogenZLab%2Fting/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34085321,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-08T02:00:07.615Z","response_time":111,"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":["alert","android","ios","native-module","new-architecture","react-native","toast","toast-notifications"],"created_at":"2026-05-23T09:00:21.140Z","updated_at":"2026-06-09T00:00:48.763Z","avatar_url":"https://github.com/NitrogenZLab.png","language":"Swift","funding_links":["https://github.com/sponsors/baronha","https://patreon.com/baronha","https://ko-fi.com/baoha","https://buymeacoffee.com/baronha"],"categories":["Swift"],"sub_categories":[],"readme":"![Logo][Logo]![1.2.3](https://img.shields.io/badge/⚡️_1.2.2-333333?style=for-the-badge)\n[![BuyMeACoffee][BuyMeACoffee]][BuyMeACoffee-URL] [![Kofi][Kofi]][Kofi-URL]\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./resources/Ting.png\" width=\"100%\"\u003e\n\u003c/p\u003e\n\n## Overview\n\n![Turbo Native Modules](https://img.shields.io/badge/Turbo_Native_Modules-0052CC?style=for-the-badge) [![Swift][Swift]][Swift-URL] [![Kotlin][Kotlin]][Kotlin-URL]\n\n\u003ca href=\"https://www.producthunt.com/posts/ting-4?utm_source=badge-featured\u0026utm_medium=badge\u0026utm_souce=badge-ting\u0026#0045;4\" target=\"_blank\"\u003e\u003cimg src=\"https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=403758\u0026theme=light\" alt=\"Ting - React\u0026#0032;Native\u0026#0032;Toast | Product Hunt\" style=\"width: 250px; height: 54px;\" width=\"250\" height=\"54\" /\u003e\u003c/a\u003e\n\n🍞 Flexible and customizable React toast notifications with support for positioning, custom rendering, click handlers, and duration control.\n\n## Video Demo 📺\n\n| ![ios]                                                                                               | ![android]                                                                                           | Modal                                                                                                |\n| ---------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |\n| \u003cvideo src=\"https://github.com/baronha/ting/assets/23580920/15f5677a-d041-499b-99e8-75c9c9c511c9\" /\u003e | \u003cvideo src=\"https://github.com/baronha/ting/assets/23580920/751a7559-0150-46a2-a573-b2b3423e6e29\" /\u003e | \u003cvideo src=\"https://github.com/baronha/ting/assets/23580920/b5f4d555-8fb1-4ffe-901c-268099f16f03\" /\u003e |\n\n## Installation\n\n```sh\nyarn add @baronha/ting\nor\nnpm i @baronha/ting\n```\n\n\u003e If you want to use Expo. [Burnt](https://github.com/nandorojo/burnt) is the solution for you.\n\n### [![iOS][iOS]][iOS-URL]\n\n#### New Architecture\n\n```sh\ncd ios \u0026\u0026 RCT_NEW_ARCH_ENABLED=1 bundle exec pod install --verbose\n```\n\n#### Older\n\n```sh\ncd ios \u0026\u0026 pod install --verbose\n```\n\n## Usage\n\n### ![Toast][Toast]\n\n```js\nimport { toast } from '@baronha/ting';\n// ...\nconst options = {\n  title: 'Done 😎',\n  message: 'Successful!!',\n};\n\ntoast(options); // easy to use\n```\n\n#### Customize Icon\n\n```js\nimport { toast } from '@baronha/ting';\n// ...\nconst options = {\n  // ...\n  title: 'Vietnamese Gangz 😎',\n  message: 'Anh em tao là Vietnamese Gangz',\n  titleColor: '#D60A2E',\n  icon: {\n    uri: require('./vietnam.png'), // or remote\n    size: 24,\n  },\n};\n\ntoast(options); // icon is 🇻🇳\n```\n\n### ![Alert][Alert]\n\n```js\nimport { alert } from '@baronha/ting';\n// ...\nconst options = {\n  title: 'Done 😎',\n  message: 'Successful!!',\n};\n\nalert(options); // easy to use\n```\n\n### Initialization\n\nInstead of using too many options like this:\n\n```js\nconst options = {\n  // ...\n  messageColor: '#D60A2E',\n  titleColor: '#D60A2E',\n  icon: {\n    uri: require('./vietnam.png'), // or remote\n    size: 24,\n  },\n  shouldDismissByTap: true,\n  position: 'bottom',\n  // ... bla bla bla\n};\n\ntoast(options);\n```\n\nYou want to initialize the default options for all subsequent use of toast or alert. You can use the setup function that is called when the application is initialized. Do the following:\n\n```js\nimport { setup } from '@baronha/ting';\n\nconst initOption = {\n  toast: {\n    messageColor: '#D60A2E',\n    titleColor: '#D60A2E',\n    backgroundColor: '#ffffff',\n    // ... more and more\n  },\n  alert: {\n    // ... alert's option\n  },\n};\n\nsetup(initOption);\n\n// Use it next time. You can completely override it on subsequent calls\ntoast({\n  title: 'Ting!',\n  message: 'Easy toast for React Native',\n});\n\nalert({\n  title: \"What's up bruhhh!\",\n  message: 'Easy Alert for React Native',\n});\n```\n\n## Options\n\n| Property              |   Type   | Default value |  Platform  | Toast | Alert | Description                                                                                 |\n| --------------------- | :------: | :-----------: | :--------: | :---: | :---: | :------------------------------------------------------------------------------------------ |\n| `title`               |  string  |     null      |  ![Both]   |  ✅   |  ✅   |                                                                                             |\n| `message`             |  string  |     null      |  ![Both]   |  ✅   |  ✅   |                                                                                             |\n| `titleColor`          |  string  |     null      |  ![Both]   |  ✅   |  ✅   | The color of the title text in hexadecimal format (e.g., #FF0000)                           |\n| `messageColor`        |  string  |     null      |  ![Both]   |  ✅   |  ✅   | The color of the message text in hexadecimal format (e.g., #00FF00)                         |\n| `icon`                | `object` |     null      |  ![Both]   |  ✅   |  ✅   | See [Icon](###Icon)                                                                         |\n| `preset`              |  string  |    `done`     |  ![Both]   |  ✅   |  ✅   | `done, error, none, spinner`                 |\n| `duration`            |  number  |      `3`      |  ![Both]   |  ✅   |  ✅   | The lifetime of the toast (seconds)                                                         |\n| `titleColor`          |  string  |     null      |  ![Both]   |  ✅   |  ✅   |                                                                                             |\n| `shouldDismissByDrag` | boolean  |     true      |  ![Both]   |  ✅   |\n| `position`            |  string  |     `top`     |  ![Both]   |  ✅   |       | **Toast** is displayed from `top` or `bottom`                                               |\n| `haptic`              |  string  |     null      |   ![iOS]   |  ✅   |       | `success, warning, error, none`                                                             |\n| `shouldDismissByTap`  | boolean  |     true      |  ![Both]   |       |  ✅   |                                                                                             |\n| `borderRadius`        |  number  |     null      |  ![Both]   |       |  ✅   |                                                                                             |\n| `blurBackdrop`        |  number  |     null      | ![Android] |       |  ✅   |                                                                                             |\n| `backdropOpacity`     |  number  |     null      | ![Android] |       |  ✅   |                                                                                             |\n| `backgroundColor`     |  string  |    #ffffff    |  ![Both]   |  ✅   |  ✅   | The background color of the toast in hexadecimal format (e.g., #0000FF) \u003cbr/\u003e |\n\n### Icon\n\n| icon        |  Type  | Default value | Platform |\n| ----------- | :----: | :-----------: | :------: |\n| `uri`       | string |     null      | ![Both]  |\n| `size`      | number |     null      | ![Both]  |\n| `tintColor` | string |     null      | ![Both]  |\n\n## To Do\n\n- [x] Initialize for the first time (v.1.0.5)\n- [x] `tintColor` for icon (v.1.0.5)\n- [x] `backgroundColor` (v.1.0.3)\n- [x] `spinner preset for toast` (v.1.1.0)\n- [x] custom color like StyleSheet (e.g. `#fff`, `red`, `rgba(0, 0, 0, .8)`)\n- [x] `shouldDismissByDrag` on **Android**\n- [ ] `callback`\n\n\n## Performance\n\nWe're trying to improve performance. If you have a better solution, please open a [issue](https://github.com/baronha/ting/issues) or [pull request](https://github.com/baronha/ting/pulls). Best regards!\n\n## Contributing\n\nSee the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.\n\n## Contributors ✨\n\nThanks go to these wonderful people:\n\n\u003c!-- readme: collaborators,contributors -start --\u003e\n\u003ctable\u003e\n\t\u003ctbody\u003e\n\t\t\u003ctr\u003e\n            \u003ctd align=\"center\"\u003e\n                \u003ca href=\"https://github.com/4cc3ssX\"\u003e\n                    \u003cimg src=\"https://avatars.githubusercontent.com/u/57473799?v=4\" width=\"100;\" alt=\"4cc3ssX\"/\u003e\n                    \u003cbr /\u003e\n                    \u003csub\u003e\u003cb\u003eRyam\u003c/b\u003e\u003c/sub\u003e\n                \u003c/a\u003e\n            \u003c/td\u003e\n            \u003ctd align=\"center\"\u003e\n                \u003ca href=\"https://github.com/baronha\"\u003e\n                    \u003cimg src=\"https://avatars.githubusercontent.com/u/23580920?v=4\" width=\"100;\" alt=\"baronha\"/\u003e\n                    \u003cbr /\u003e\n                    \u003csub\u003e\u003cb\u003eBảo Hà.\u003c/b\u003e\u003c/sub\u003e\n                \u003c/a\u003e\n            \u003c/td\u003e\n            \u003ctd align=\"center\"\u003e\n                \u003ca href=\"https://github.com/Acetyld\"\u003e\n                    \u003cimg src=\"https://avatars.githubusercontent.com/u/55088242?v=4\" width=\"100;\" alt=\"Acetyld\"/\u003e\n                    \u003cbr /\u003e\n                    \u003csub\u003e\u003cb\u003eDion Grendelman\u003c/b\u003e\u003c/sub\u003e\n                \u003c/a\u003e\n            \u003c/td\u003e\n            \u003ctd align=\"center\"\u003e\n                \u003ca href=\"https://github.com/jeongshin\"\u003e\n                    \u003cimg src=\"https://avatars.githubusercontent.com/u/64301935?v=4\" width=\"100;\" alt=\"jeongshin\"/\u003e\n                    \u003cbr /\u003e\n                    \u003csub\u003e\u003cb\u003eHuckleberry\u003c/b\u003e\u003c/sub\u003e\n                \u003c/a\u003e\n            \u003c/td\u003e\n            \u003ctd align=\"center\"\u003e\n                \u003ca href=\"https://github.com/tuanngocptn\"\u003e\n                    \u003cimg src=\"https://avatars.githubusercontent.com/u/22292704?v=4\" width=\"100;\" alt=\"tuanngocptn\"/\u003e\n                    \u003cbr /\u003e\n                    \u003csub\u003e\u003cb\u003eNick - Ngoc Pham\u003c/b\u003e\u003c/sub\u003e\n                \u003c/a\u003e\n            \u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\u003ctbody\u003e\n\u003c/table\u003e\n\u003c!-- readme: collaborators,contributors -end --\u003e\n\n## License\n\nMIT\n[AlertKit](https://github.com/sparrowcode/AlertKit/blob/v5/LICENSE)\n[SPIndicator](https://github.com/ivanvorobei/SPIndicator/blob/main/LICENSE)\n[EasyWindow](https://github.com/getActivity/EasyWindow/blob/master/LICENSE)\n\n\u003c!-- Badge for README --\u003e\n\n[iOS]: https://img.shields.io/badge/iOS-000000?style=for-the-badge\u0026logo=ios\u0026logoColor=white\n[iOS-URL]: https://www.apple.com/ios\n[Android]: https://img.shields.io/badge/Android-3DDC84?style=for-the-badge\u0026logo=android\u0026logoColor=white\n[Android-URL]: https://www.android.com/\n[React-Native]: https://img.shields.io/badge/React_Native-20232A?style=for-the-badge\u0026logo=react\u0026logoColor=61DAFB\n[React-Native-URL]: https://reactnative.dev/\n[React-Native]: https://img.shields.io/badge/React_Native-20232A?style=for-the-badge\u0026logo=react\u0026logoColor=61DAFB\n[React-Native-URL]: https://reactnative.dev/\n[Swift]: https://img.shields.io/badge/Swift-FA7343?style=for-the-badge\u0026logo=swift\u0026logoColor=white\n[Swift-URL]: https://developer.apple.com/swift/\n[Kotlin]: https://img.shields.io/badge/Kotlin-0095D5?\u0026style=for-the-badge\u0026logo=kotlin\u0026logoColor=white\n[Kotlin-URL]: https://kotlinlang.org/\n[Logo]: https://img.shields.io/badge/🍞_Ting-FDC753?style=for-the-badge\n[Toast]: https://img.shields.io/badge/🍞_Toast-A0E7B0?style=for-the-badge\n[Alert]: https://img.shields.io/badge/🌭_Alert-7C64F1?style=for-the-badge\n[Both]: https://img.shields.io/badge/Both-61DAFB?style=for-the-badge\n[BuyMeACoffee]: https://img.shields.io/badge/Buy_Me_A_Coffee-FFDD00?style=for-the-badge\u0026logo=buy-me-a-coffee\u0026logoColor=black\n[BuyMeACoffee-URL]: https://buymeacoffee.com/baronha\n[Kofi]: https://img.shields.io/badge/Ko--fi-F16061?style=for-the-badge\u0026logo=ko-fi\u0026logoColor=white\n[Kofi-URL]: https://ko-fi.com/baoha\n[New_Feature]: https://img.shields.io/badge/✨_New_Feature-D40A2E?style=for-the-badge\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FNitrogenZLab%2Fting","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FNitrogenZLab%2Fting","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FNitrogenZLab%2Fting/lists"}