{"id":17821872,"url":"https://github.com/codingbyjerez/react-native-alert-notification","last_synced_at":"2025-05-16T15:07:10.386Z","repository":{"id":43731216,"uuid":"367961107","full_name":"CodingByJerez/react-native-alert-notification","owner":"CodingByJerez","description":"Toast notification and dialog box notification for react native","archived":false,"fork":false,"pushed_at":"2024-11-25T06:04:37.000Z","size":4595,"stargazers_count":100,"open_issues_count":25,"forks_count":26,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-16T15:07:05.973Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/CodingByJerez.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":"2021-05-16T18:49:32.000Z","updated_at":"2025-04-21T01:58:14.000Z","dependencies_parsed_at":"2024-06-18T20:25:22.841Z","dependency_job_id":"db387899-6342-46c4-aaf3-37290313bd45","html_url":"https://github.com/CodingByJerez/react-native-alert-notification","commit_stats":{"total_commits":53,"total_committers":5,"mean_commits":10.6,"dds":0.1132075471698113,"last_synced_commit":"4ea5a2bce58e611d710c0d2da04c8a3d77362e86"},"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodingByJerez%2Freact-native-alert-notification","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodingByJerez%2Freact-native-alert-notification/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodingByJerez%2Freact-native-alert-notification/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodingByJerez%2Freact-native-alert-notification/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CodingByJerez","download_url":"https://codeload.github.com/CodingByJerez/react-native-alert-notification/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254553959,"owners_count":22090417,"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":[],"created_at":"2024-10-27T17:26:59.993Z","updated_at":"2025-05-16T15:07:10.363Z","avatar_url":"https://github.com/CodingByJerez.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-alert-notification\n\n## Example Dialog Box\n\n| Theme Light | Theme Dark |\n| :------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------: |\n| \u003cimg src=\"https://github.com/CodingByJerez/react-native-alert-notification/blob/master/.github/images/dialog-light.gif?raw=true\" height=\"350\" alt=\"Dialogs light\" /\u003e | \u003cimg src=\"https://github.com/CodingByJerez/react-native-alert-notification/blob/master/.github/images/dialog-dark.gif?raw=true\" height=\"350\" alt=\"Dialogs Dark\" /\u003e |\n\n## Example Toast Notification\n\n| Theme Light | Theme Dark |\n| :----------------------------------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------: |\n| \u003cimg src=\"https://github.com/CodingByJerez/react-native-alert-notification/blob/master/.github/images/toast-light.gif?raw=true\" height=\"350\" alt=\"toasts light\" /\u003e | \u003cimg src=\"https://github.com/CodingByJerez/react-native-alert-notification/blob/master/.github/images/toast-dark.gif?raw=true\" height=\"350\" alt=\"toasts Dark\" /\u003e |\n\n## Installation\n\n### - Installing:\n\n```sh\nyarn add react-native-alert-notification\n```\n\n### - Installing dependencies:\n\n- For Native project:\n\n```sh\nyarn add react-native-safe-area-context\n\npod install\n```\n\n- For Expo project:\n\n```sh\nexpo install react-native-safe-area-context\n```\n\n## Usage\n\n```tsx\nimport { ALERT_TYPE, Dialog, AlertNotificationRoot, Toast } from 'react-native-alert-notification';\n\n\u003cAlertNotificationRoot\u003e\n \u003cView\u003e\n // dialog box\n \u003cButton\n title={'dialog box'}\n onPress={() =\u003e\n Dialog.show({\n type: ALERT_TYPE.SUCCESS,\n title: 'Success',\n textBody: 'Congrats! this is dialog box success',\n button: 'close',\n })\n }\n /\u003e\n // toast notification\n \u003cButton\n title={'toast notification'}\n onPress={() =\u003e\n Toast.show({\n type: ALERT_TYPE.SUCCESS,\n title: 'Success',\n textBody: 'Congrats! this is toast notification success',\n })\n }\n /\u003e\n \u003c/View\u003e\n\u003c/AlertNotificationRoot\u003e;\n```\n\n## Documentation:\n\n### Root Component\n\nA React node that will be most likely wrapping your whole app.\n\n| Name | Description | Require | Default | Type |\n| ------------ | -------------------------------------------- | ------- | ------- | --------------------------------------------------------------------------------------------------- |\n| theme | select theme light dark (by default is auto) | | auto | 'light','dark' |\n| colors | custom colors | | | [IColors\u003clight\u003e, IColors\u003cdark\u003e] |\n| dialogConfig | config dialog box global | | | {closeOnOverlayTap:bool, autoClose:bool / number} |\n| toastConfig | config toast global | | | {autoClose:bool / number, titleStyle?: StyleProp\u003cTextStyle\u003e , textBodyStyle?: StyleProp\u003cTextStyle\u003e} |\n\n```ts\ntype IProps = {\n dialogConfig?: Pick\u003cIConfigDialog, 'closeOnOverlayTap' | 'autoClose'\u003e;\n toastConfig?: Pick\u003cIConfigToast, 'autoClose' | 'titleStyle' | 'textBodyStyle'\u003e;\n theme?: 'light' | 'dark';\n colors?: [IColors, IColors] /** ['light_colors' , 'dark_colors'] */;\n};\ntype IColors = {\n label: string;\n card: string;\n overlay: string;\n success: string;\n danger: string;\n warning: string;\n};\n```\n\n### Dialog Box Component\n\n| Name | Description | Require | Default | Type |\n| ----------------- | -------------------------------------------------- | ------- | ------- | ------------------------------ |\n| title | The title text | | | String |\n| type | Defines the type (\"Success\", \"Warning\" or \"Error\") | true | | \"SUCCESS\", \"DANGER\", \"WARNING\" |\n| textBody | The text body | | | String |\n| button | name button (for hide button: undefined) | | | String |\n| autoClose | Defines time auto close dialog box in ms | | face | bool / number |\n| closeOnOverlayTap | allow close if click in overlay | | true | bool |\n| onPressButton | (if not declared and isset button action is close) | | String | () =\u003e void |\n| onShow | action after end animation open | | | () =\u003e void |\n| onHide | action after end animation close | | | () =\u003e void |\n\n```ts\ntype IConfig = {\n type: ALERT_TYPE;\n title?: string;\n textBody?: string;\n button?: string;\n autoClose?: number | boolean;\n closeOnOverlayTap?: boolean;\n onPressButton?: () =\u003e void;\n onShow?: () =\u003e void;\n onHide?: () =\u003e void;\n};\n```\n\n### Toast Notification Component\n\n| Name | Description | Require | Default | Type |\n| --------- | -------------------------------------------------- | ------- | ------- | ------------------------------ |\n| title | The title text | | | String |\n| type | Defines the type (\"Success\", \"Warning\" or \"Error\") | | | \"SUCCESS\", \"DANGER\", \"WARNING\" |\n| textBody | The text body | | | String |\n| autoClose | Defines time auto close dialog box in ms | | 5000 | bool / number |\n| onPress | action click in card | | | bool |\n| onShow | event after end animation open | | | () =\u003e void |\n| onHide | event after end animation close | | | () =\u003e void |\n\n```ts\ntype IConfig = {\n type?: ALERT_TYPE;\n title?: string;\n textBody?: string;\n autoClose?: number | boolean;\n titleStyle?: StyleProp\u003cTextStyle\u003e;\n textBodyStyle?: StyleProp\u003cTextStyle\u003e;\n onPress?: () =\u003e void;\n onShow?: () =\u003e void;\n onHide?: () =\u003e void;\n};\n```\n\n### For Close popup\n\n```ts\n// For Dialog Box\nDialog.hide();\n\n// For Toast Notification\nToast.hide();\n```\n\n## Author\n\nRodolphe Jerez | [https://codingbyjerez.com](https://codingbyjerez.com)\n\nSee the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodingbyjerez%2Freact-native-alert-notification","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodingbyjerez%2Freact-native-alert-notification","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodingbyjerez%2Freact-native-alert-notification/lists"}