{"id":4311,"url":"https://github.com/jeanverster/react-native-styled-toast","last_synced_at":"2025-04-04T15:12:06.219Z","repository":{"id":37735976,"uuid":"218123216","full_name":"jeanverster/react-native-styled-toast","owner":"jeanverster","description":"A theme friendly, easy to use react-native toast component built using styled-components and styled-system.","archived":false,"fork":false,"pushed_at":"2023-03-04T05:03:10.000Z","size":1644,"stargazers_count":315,"open_issues_count":25,"forks_count":33,"subscribers_count":2,"default_branch":"develop","last_synced_at":"2024-10-14T03:02:48.286Z","etag":null,"topics":["expo","react","react-native","toast","toast-notifications"],"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/jeanverster.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2019-10-28T18:58:45.000Z","updated_at":"2024-09-24T12:58:25.000Z","dependencies_parsed_at":"2023-02-03T00:16:14.282Z","dependency_job_id":"29abe937-da2e-4c57-af06-c89b7f222ff0","html_url":"https://github.com/jeanverster/react-native-styled-toast","commit_stats":{"total_commits":106,"total_committers":9,"mean_commits":"11.777777777777779","dds":0.5377358490566038,"last_synced_commit":"8d1ed22593a5bcefcb33652926fa3909a86aca56"},"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeanverster%2Freact-native-styled-toast","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeanverster%2Freact-native-styled-toast/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeanverster%2Freact-native-styled-toast/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeanverster%2Freact-native-styled-toast/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jeanverster","download_url":"https://codeload.github.com/jeanverster/react-native-styled-toast/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247043341,"owners_count":20874086,"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":["expo","react","react-native","toast","toast-notifications"],"created_at":"2024-01-05T20:17:07.867Z","updated_at":"2025-04-04T15:12:06.197Z","avatar_url":"https://github.com/jeanverster.png","language":"TypeScript","funding_links":[],"categories":["Components"],"sub_categories":["UI"],"readme":"\u003cp\u003e\n  \u003cimg alt=\"react-native-styled-toast\" src=\"https://i.imgur.com/w42dDGJ.png\" width=\"208\"\u003e\n\u003c/p\u003e\n\n# react-native-styled-toast\n\n\u003cp\u003e\n  Themeable react-native toast component built using styled-components \u0026 styled-system.\n\u003c/p\u003e\n\u003cbr /\u003e\n\n\u003cp\u003e\n  \u003cimg alt=\"react-native-styled-toast gif\" src=\"https://i.imgur.com/CYiuYPD.gif\" width=\"350\"\u003e\n\u003c/p\u003e\n\n## Features\n\n- Pure JS implementation\n- Supports multiple toasts\n- iOS and Android compatible\n- Styled with theme contraints\n- Written using React Hooks\n- Fully typed with TypeScript\n\n## Installation\n\n`$ yarn add react-native-styled-toast`\n\n## Usage\n\n`react-native-styled-toast` is built to work with both vanilla react-native apps as well as react-native apps bootstrapped with Expo. It utilizes `styled-components` and `styled-system` under the hood to facilitate theming.\n\nBecause the toasts rely on theming, you need to ensure that you've wrapped your app in the `ThemeProvider` component from `styled-components` - then use the `ToastProvider` and wrap the rest of your app:\n\n```jsx\nimport { ThemeProvider } from 'styled-components'\nimport { ToastProvider } from 'react-native-styled-toast'\n\nreturn (\n  \u003cThemeProvider theme={theme}\u003e\n    \u003cToastProvider\u003e\n      \u003cApp /\u003e\n    \u003c/ToastProvider\u003e\n  \u003c/ThemeProvider\u003e\n)\n```\n\nNow that your app has access to the Toast context, you can make use of the provided `useToast` hook to trigger a toast anywhere in your app:\n\n```jsx\nimport { useToast } from 'react-native-styled-toast'\n\nconst { toast } = useToast()\n\nreturn \u003cButton onPress={() =\u003e toast({ message: 'Check me out!', ...config })} /\u003e\n```\n\nIf you aren't able to make use of hooks for whatever reason, you can still use the provided ToastContext.Consumer to fire off a toast.\n\n```jsx\nimport { ToastContext } from 'react-native-styled-toast'\n\nreturn (\n  \u003cToastContext.Consumer\u003e\n    {({ toast }) =\u003e {\n      return (\n        \u003cButton\n          onPress={() =\u003e\n            toast({\n              message: 'Woo! This is a success toast.'\n            })\n          }\n          title=\"Show Success Toast\"\n        /\u003e\n      )\n    }}\n  \u003c/ToastContext.Consumer\u003e\n)\n```\n\n**This component relies on `styled-system` to access colors from your theme**. So you need to ensure that your theme object is configured correctly. Please refer to the `styled-system` [docs](https://styled-system.com/getting-started#getting-started). Your theme object should contain at least a spacing scale with some default colors, it should looks something like this:\n\n```javascript\nexport default {\n  space: [0, 4, 8, 12, 16, 20, 24, 32, 40, 48],\n  colors: {\n    text: '#0A0A0A',\n    background: '#FFF',\n    border: '#E2E8F0',\n    muted: '#F0F1F3',\n    success: '#7DBE31',\n    error: '#FC0021',\n    info: '#00FFFF'\n  }\n}\n```\n\nBy default, `react-native-styled-toast` references the following theme color keys for their respective properties:\n\n`background` (default toast background) \\\n`text` (default toast text color) \\\n`success` (default success accent color) \\\n`info` (default info accent color color) \\\n`error` (default error accent color) \\\n`muted` (default close button bg color)\n\nIf your colors object in your theme does not contain these, you can customize these values in the toast configuration object. E.g:\n\n```jsx\nconst { toast } = useToast()\n\n\u003cButton onPress={() =\u003e toast({ bg: 'myBgColor', color: 'myTextColor' })} /\u003e\n```\n\n## Fully Customizable Styling\n\nYou are now able to fully customize both the style of the Toast component itself, as well as the close button - all while respecting your theme contstraints. This can be achieved through the `toastStyles` and `closeButtonStyles` objects respectively. You can also hide the accent view. These options need to be passed to the internal toast config:\n\n\u003cbr /\u003e\n\n```jsx\ntoast({\n  message: 'My First Toast!',\n  toastStyles: {\n    bg: 'lightblue',\n    borderRadius: 16\n  },\n  color: 'white',\n  iconColor: 'white',\n  iconFamily: 'Entypo',\n  iconName: 'info',\n  closeButtonStyles: {\n    px: 4,\n    bg: 'darkgrey',\n    borderRadius: 16\n  },\n  closeIconColor: 'white',\n  hideAccent: true\n})\n```\n\nAbove is an example of a fully customized toast which renders the following:\n\u003cbr /\u003e\n\n\u003cp\u003e\n  \u003cimg alt=\"react-native-styled-toast gif\" src=\"https://i.imgur.com/aQvzU2F.png\" width=\"350\"\u003e\n\u003c/p\u003e\n\n## Max Toasts\n\nAlong with the new styling updates, you are now also able to limit the number of toasts which a user can see. To do so, simply pass the `maxToasts` prop to the `ToastProvider` component:\n\n```jsx\n\u003cToastProvider maxToasts={2} offset={16} position=\"BOTTOM\"\u003e\n  \u003cContainer /\u003e\n\u003c/ToastProvider\u003e\n```\n\n\u003cp\u003e\n  \u003cimg alt=\"react-native-styled-toast gif\" src=\"https://i.imgur.com/4LCdpjP.gif\" width=\"350\"\u003e\n\u003c/p\u003e\n\n\u003cbr /\u003e\n\n## Dark Mode Compatible 🌗\n\nBecause of the theming capability of `react-native-styled-toast`, it has out of the box support for dark mode. All you need to do is ensure the color keys you're using for your different modes are the same\n\n\u003cbr /\u003e\n\n## Props\n\n### `ToastProvider`\n\n| Prop            | Type   | Required | Description                                    | Default                   |\n| --------------- | ------ | -------- | ---------------------------------------------- | ------------------------- |\n| **`maxToasts`** | number | no       | Sets max number of toasts to show              | Constants.statusBarHeight |\n| **`offset`**    | number | no       | Increases default offset from the top / bottom | Constants.statusBarHeight |\n| **`position`**  | enum   | no       | Sets the position of the toasts                | TOP                       |\n\n### `ToastConfig`\n\n| Prop                    | Type      | Required | Description                                                                                    | Default        |\n| ----------------------- | --------- | -------- | ---------------------------------------------------------------------------------------------- | -------------- |\n| **`accentColor`**       | string    | no       | Sets the background color of the accent on the left                                            | undefined      |\n| **`animationType`**     | string    | no       | Sets the type of animation for toast entering, possible options are \"slide\", \"fade\" or \"scale\" | slide          |\n| **`closeButtonStyles`** | object    | no       | Allows custom styling of the close button, values pull from theme                              | N/A            |\n| **`closeIconColor`**    | string    | no       | Sets the color of the close icon                                                               | text           |\n| **`closeIconFamily`**   | string    | no       | Sets the family of the close icon                                                              | Feather        |\n| **`closeIconName`**     | string    | no       | Sets the name of the close icon                                                                | 'x'            |\n| **`closeIconSize`**     | string    | no       | Sets the size of the close icon                                                                | 20             |\n| **`hideCloseIcon`**     | boolean   | no       | Shows / hides of the close icon                                                                | false          |\n| **`color`**             | string    | no       | Sets the text color of the toast                                                               | text           |\n| **`duration`**          | number    | no       | ms duration of toast before auto closing. 0 = infinite.                                        | 3000           |\n| **`hideAccent`**        | boolean   | no       | Shows / hides accent                                                                           | undefined      |\n| **`hideIcon`**          | boolean   | no       | Toggles whether to show / hide icon                                                            | false          |\n| **`iconColor`**         | string    | no       | Customize icon color using key from theme                                                      | undefined      |\n| **`iconFamily`**        | string    | no       | Allow referencing of custom icon family from react-native-vector-icons                         | Feather        |\n| **`iconName`**          | string    | no       | Allow referencing of custom icon name from specified icon family                               | undefined      |\n| **`iconSize`**          | string    | no       | Sets the size of the icon                                                                      | 20             |\n| **`intent`**            | enum      | no       | Updates icon and accent color based on intent.                                                 | SUCCESS        |\n| **`message`**           | string    | yes      | Text message that gets rendered                                                                | Toast Message! |\n| **`onPress`**           | func      | no       | Function that gets exectuted onPress of toast                                                  | () =\u003e false    |\n| **`shouldVibrate`**     | boolean   | no       | Toggles whether phone vibrates on notification                                                 | false          |\n| **`subMessage`**        | string    | no       | Sub message that gets rendered below message                                                   | undefined      |\n| **`toastStyles`**       | object    | no       | Allows custom styling of the Toast component. Values pull from theme                           | undefined      |\n| **`messageProps`**      | TextProps | no       | Allows custom styling message                                                                  | {}             |\n| **`subMessageProps`**   | TextProps | no       | Allows custom styling subMessage                                                               | {}             |\n| **`allowFontScaling`**  | boolean   | no       | Allows font scaling                                                                            | true          |\n| **`shadow`**  | ShadowProps   | no       | Allows custom shadow                                           | {}       |\n\u003cbr /\u003e\n\u003cdiv\u003eToast icon by \u003ca href=\"https://www.flaticon.com/authors/ultimatearm\" title=\"ultimatearm\"\u003eultimatearm\u003c/a\u003e from \u003ca href=\"https://www.flaticon.com/\"             title=\"Flaticon\"\u003ewww.flaticon.com\u003c/a\u003e\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjeanverster%2Freact-native-styled-toast","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjeanverster%2Freact-native-styled-toast","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjeanverster%2Freact-native-styled-toast/lists"}