{"id":21233727,"url":"https://github.com/nysamnang/react-native-alert-pro","last_synced_at":"2025-07-10T17:31:43.085Z","repository":{"id":34050511,"uuid":"167551658","full_name":"nysamnang/react-native-alert-pro","owner":"nysamnang","description":"The Pro Version of React Native Alert (Android \u0026 iOS)","archived":false,"fork":false,"pushed_at":"2023-01-03T19:28:03.000Z","size":2067,"stargazers_count":79,"open_issues_count":19,"forks_count":15,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-27T22:16:06.663Z","etag":null,"topics":["alert","alert-pro","awesome-alert","box","confirm","dialog","modal","popup","react-native-alert","sweet-alert"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/nysamnang.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-01-25T13:28:12.000Z","updated_at":"2024-09-11T02:47:59.000Z","dependencies_parsed_at":"2023-01-15T04:14:18.002Z","dependency_job_id":null,"html_url":"https://github.com/nysamnang/react-native-alert-pro","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/nysamnang/react-native-alert-pro","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nysamnang%2Freact-native-alert-pro","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nysamnang%2Freact-native-alert-pro/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nysamnang%2Freact-native-alert-pro/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nysamnang%2Freact-native-alert-pro/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nysamnang","download_url":"https://codeload.github.com/nysamnang/react-native-alert-pro/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nysamnang%2Freact-native-alert-pro/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263145841,"owners_count":23420678,"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":["alert","alert-pro","awesome-alert","box","confirm","dialog","modal","popup","react-native-alert","sweet-alert"],"created_at":"2024-11-21T00:00:13.964Z","updated_at":"2025-07-10T17:31:39.996Z","avatar_url":"https://github.com/nysamnang.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-alert-pro\n\n[![npm version](https://badge.fury.io/js/react-native-alert-pro.svg)](//npmjs.com/package/react-native-alert-pro)\n[![npm downloads](https://img.shields.io/npm/dm/react-native-alert-pro.svg)\n](//npmjs.com/package/react-native-alert-pro)\n[![Build Status](https://travis-ci.org/nysamnang/react-native-alert-pro.svg?branch=master)](https://travis-ci.org/nysamnang/react-native-alert-pro)\n![](https://badgen.net/codecov/c/github/tunnckoCoreLabs/gitcommit)\n\n- Super lightweight component\n- Smooth animation\n- Beautiful\n- Use method instead of state\n- Work like a Pro\n- Customize whatever you like\n- Support all orientations\n- Support both Android and iOS\n\n|                                                    iOS                                                    |                                                  Android                                                  |\n| :-------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------: |\n| ![](https://raw.githubusercontent.com/nysamnang/stock-images/master/react-native-alert-pro/RNALP-IOS.gif) | ![](https://raw.githubusercontent.com/nysamnang/stock-images/master/react-native-alert-pro/RNALP-AOS.gif) |\n\n## Installation\n\n```\nnpm i react-native-alert-pro --save\n```\n\n### or\n\n```\nyarn add react-native-alert-pro\n```\n\n## Example\n\n```jsx\nimport React, { Component } from \"react\";\nimport { StyleSheet, View, TouchableOpacity, Text } from \"react-native\";\nimport AlertPro from \"react-native-alert-pro\";\n\nclass Example extends Component {\n  render() {\n    return (\n      \u003cView style={styles.container}\u003e\n        \u003cText style={styles.title}\u003eREACT NATIVE ALERT PRO\u003c/Text\u003e\n        \u003cView style={styles.buttonContainer}\u003e\n          \u003cTouchableOpacity\n            onPress={() =\u003e this.AlertPro.open()}\n            style={styles.button}\n          \u003e\n            \u003cText style={styles.text}\u003eCUSTOM\u003c/Text\u003e\n          \u003c/TouchableOpacity\u003e\n        \u003c/View\u003e\n\n        \u003cAlertPro\n          ref={ref =\u003e {\n            this.AlertPro = ref;\n          }}\n          onConfirm={() =\u003e this.AlertPro.close()}\n          title=\"Delete confirmation\"\n          message=\"Are you sure to delete the entry?\"\n          textCancel=\"Cancel\"\n          textConfirm=\"Delete\"\n          customStyles={{\n            mask: {\n              backgroundColor: \"transparent\"\n            },\n            container: {\n              borderWidth: 1,\n              borderColor: \"#9900cc\",\n              shadowColor: \"#000000\",\n              shadowOpacity: 0.1,\n              shadowRadius: 10\n            },\n            buttonCancel: {\n              backgroundColor: \"#4da6ff\"\n            },\n            buttonConfirm: {\n              backgroundColor: \"#ffa31a\"\n            }\n          }}\n        /\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    alignItems: \"center\",\n    backgroundColor: \"#fff\"\n  },\n  title: {\n    fontSize: 20,\n    marginTop: 120\n  },\n  buttonContainer: {\n    flex: 1,\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    backgroundColor: \"#FFFFFF\"\n  },\n  button: {\n    backgroundColor: \"#4EB151\",\n    paddingVertical: 11,\n    paddingHorizontal: 17,\n    borderRadius: 3,\n    marginBottom: 15\n  },\n  text: {\n    color: \"#FFFFFF\",\n    fontSize: 16,\n    fontWeight: \"600\"\n  }\n});\n\nexport default Example;\n```\n\n### Dynamic AlertPro\n\n```jsx\nrenderItem = (item, index) =\u003e (\n    \u003cView\u003e\n      \u003cButton title={`OPEN AlertPro-${index}`} onPress={() =\u003e this[AlertPro + index].open()} /\u003e\n      \u003cAlertPro\n        ref={ref =\u003e {\n          this[AlertPro + index] = ref;\n        }}\n        title={`AlertPro-${index}`}\n        onConfirm={() =\u003e this[AlertPro + index].close()}\n      /\u003e\n    \u003c/View\u003e\n  );\n```\n\n## Props\n\n| Prop             | Type     | Description                                              | Default                    |\n| ---------------- | -------- | -------------------------------------------------------- | -------------------------- |\n| title            | string   | AlertPro's title                                         | \"Do you want to continue?\" |\n| message          | string   | AlertPro's message                                       | \"\"                         |\n| showCancel       | boolean  | Show a Cancel button                                     | true                       |\n| showConfirm      | boolean  | Show a Confirm button                                    | true                       |\n| textCancel       | string   | Text display on Cancel button                            | \"No\"                       |\n| textConfirm      | string   | Text display on Confirm button                           | \"Yes\"                      |\n| closeOnPressMask | boolean  | Close AlertPro when press on mask (The empty space area) | true                       |\n| closeOnPressBack | boolean  | Press back android to close Bottom Sheet (Android only)  | true                       |\n| useNativeDriver  | boolean  | Allowing native code to perform the animation            | false                      |\n| customStyles     | object   | Custom style to AlertPro                                 | {}                         |\n| onCancel         | function | Event on Cancel button                                   | null                       |\n| onConfirm        | function | Event on Confirm button                                  | null                       |\n| onClose          | function | Callback function when AlertPro has closed               | null                       |\n\n### Available Custom Style\n\n```jsx\ncustomStyles: {\n  title: {...}, // AlertPro's title\n  message: {...}, // AlertPro's message\n  mask: {...}, // The empty space area\n  container: {...}, // AlertPro container\n  buttonCancel: {...}, // Cancel button\n  buttonConfirm: {...}, // Confirm button\n  textCancel: {...}, // Cancel button's Text\n  textConfirm: {...} // Confirm button's Text\n\n}\n```\n\n## Methods\n\n| Method Name | Description    |\n| ----------- | -------------- |\n| open        | Open AlertPro  |\n| close       | Close AlertPro |\n\n## Note\n\nAlways set `ref` to `AlertPro` and call each method by using `this.AlertPro.methodName()` like example above.\n\n## Give me a Star\n\nIf you think this project is helpful just give me a ⭐️ Star is enough because i don't drink coffee :D\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE.md](https://github.com/nysamnang/react-native-alert-pro/blob/master/LICENSE) file for details\n\n## Author\n\nMade with ❤️ by [NY Samnang](https://github.com/nysamnang).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnysamnang%2Freact-native-alert-pro","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnysamnang%2Freact-native-alert-pro","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnysamnang%2Freact-native-alert-pro/lists"}