{"id":4243,"url":"https://github.com/heyman333/react-native-awesome-alert","last_synced_at":"2025-04-14T20:31:15.295Z","repository":{"id":57335571,"uuid":"108580605","full_name":"heyman333/react-native-awesome-alert","owner":"heyman333","description":"🔔 Customizable modal components with ✔️check options in React Native","archived":false,"fork":false,"pushed_at":"2019-06-19T17:42:07.000Z","size":589,"stargazers_count":51,"open_issues_count":0,"forks_count":10,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-11T15:09:20.826Z","etag":null,"topics":["alert","android","awesome-list","ios","modal","opensource","react","react-native"],"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/heyman333.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":"2017-10-27T18:25:08.000Z","updated_at":"2024-04-11T11:14:14.000Z","dependencies_parsed_at":"2022-09-14T18:50:31.618Z","dependency_job_id":null,"html_url":"https://github.com/heyman333/react-native-awesome-alert","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heyman333%2Freact-native-awesome-alert","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heyman333%2Freact-native-awesome-alert/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heyman333%2Freact-native-awesome-alert/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heyman333%2Freact-native-awesome-alert/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/heyman333","download_url":"https://codeload.github.com/heyman333/react-native-awesome-alert/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248955505,"owners_count":21189139,"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","android","awesome-list","ios","modal","opensource","react","react-native"],"created_at":"2024-01-05T20:17:05.605Z","updated_at":"2025-04-14T20:31:15.277Z","avatar_url":"https://github.com/heyman333.png","language":"JavaScript","funding_links":[],"categories":["Components","Others"],"sub_categories":["UI"],"readme":"\n## NOTICE\n\nThis package was created just when I started react-native. And I thought I had to fix a lot of this package, and I decided to put a new named module in `npm` and create a new repository.\n\nPlease check the repo below\n\nThank you 🤟\n\n🔜 [react-native-hide-modal](https://github.com/heyman333/react-native-hide-modal)\n\n\n## react-native-awesome-alert\n\n[ ![PRs Welcome](https://img.shields.io/badge/PRs-Welcome-brightgreen.svg)](https://github.com/heyman333/react-native-awesome-alert/pulls)\n[![License MIT](http://img.shields.io/badge/license-MIT-orange.svg?style=flat)](https://raw.githubusercontent.com/heyman333/react-native-awesome-alert/master/LICENSE)\n[![License MIT](https://img.shields.io/badge/downloads-100%2Fmonth-brightgreen.svg)](https://www.npmjs.com/package/react-native-awesome-alert)\n\nThis package offers customizable modal components with ✔️check options in React Native\n\n### INSTALLATION\n\n#### npm\n\nRun `npm install react-native-awesome-alert --save`\n\n#### yarn\n\nRun `yarn add react-native-awesome-alert`\n\n### DEMO\n\n- Works well on both iOS and Android\n- Fully customizable style (example below)\u003cbr\u003e\u003cbr\u003e\n  ![Image](https://thumbs.gfycat.com/DefiantUnimportantEagle-size_restricted.gif)\n\n### API\n\n#### Props\n\nThe props for `react-native-awesome-alert` share similarities with [react-native-check-box](https://github.com/crazycodeboy/react-native-check-box) (author : [crazycodeboy](https://github.com/crazycodeboy))\n\n| Prop             | Type      | Default                 | Description                                                                                                                    |\n| ---------------- | --------- | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------ |\n| `styles`         | `object`  | `AwesomeAlert.style.js` | please refer to `STYLING` section 😁                                                                                           |\n| `modalProps`     | `object`  |                         | original react-native Modal Props. please refer to [offcial Document](https://facebook.github.io/react-native/docs/modal.html) |\n| `leftCheck`      | `bool`    | `true`                  | set where the checkbox will be located. default is left                                                                        |\n| `checkedImage`   | `element` | `Default image`         | Custom checked Image                                                                                                           |\n| `unCheckedImage` | `element` | `Default image`         | Custom unchecked Image                                                                                                         |\n| `checkBoxColor`  | `string`  | `black`                 | Tint color of the checkbox image                                                                                               |\n\n#### Methods\n\n- `alert(title, messageView, buttons)`\n\n| Arguments     | type      | default | optional |\n| ------------- | --------- | ------- | -------- |\n| `title`       | `string`  | `none`  | `false`  |\n| `messageView` | `element` | `none`  | `false`  |\n| `buttons`     | `array`   | `none`  | `false`  |\n\n- `neverAskAlert(title, messagesView, buttons, checkText = \" \")`\n\n| Arguments     | type      | default | optional |\n| ------------- | --------- | ------- | -------- |\n| `title`       | `string`  | `none`  | `false`  |\n| `messageView` | `element` | `none`  | `false`  |\n| `buttons`     | `array`   | `none`  | `false`  |\n| `checkText`   | `string`  | `\" \"`   | `true`   |\n\n- `randomAskAlert(title, messagesView, buttons, checkText = \" \", invisibleTime)`\n\n| Arguments       | type             | default | optional |\n| --------------- | ---------------- | ------- | -------- |\n| `title`         | `string`         | `none`  | `false`  |\n| `messageView`   | `element`        | `none`  | `false`  |\n| `buttons`       | `array`          | `none`  | `false`  |\n| `checkText`     | `string`         | `\" \"`   | `true`   |\n| `invisibleTime` | `number(minute)` | `none`  | `false`  |\n\n### HOW TO USE\n\n```js\n\nimport CheckAlert from \"react-native-awesome-alert\"\n\nconst NeverAskView = (\n  \u003cView style={styles.sampleView}\u003e\n    \u003cText style={styles.sampleViewText}\u003eThis is \"Do not ask again\" checkable alert\u003c/Text\u003e\n  \u003c/View\u003e\n)\n\n...\n\nexport default class App extends Component {\n\n  onPressSimpleAlert = () =\u003e {\n    this.checkAlert.alert(\"Hello!!\", SimpleView, [\n      { text: \"OK\", onPress: () =\u003e console.log(\"OK touch\") },\n      { text: \"Cancel\", onPress: () =\u003e console.log(\"Cancel touch\") }\n    ])\n  }\n\n  onPresshNeverAskAlert = () =\u003e {\n    this.checkAlert.neverAskAlert(\n      \"Hello CheckAlert\",\n      NeverAskView,\n      [\n        { text: \"OK\", onPress: () =\u003e console.log(\"OK touch\"), id: \"helloAlert\" },\n        { text: \"Cancel\", onPress: () =\u003e console.log(\"Cancel touch\") }\n      ],\n      \"Do not ask again\"\n    )\n  }\n\n  onPresshNot24HAlert = () =\u003e {\n    this.checkAlert.randomAskAlert(\n      \"Hello CheckAlert\",\n      RandomAskView,\n      [\n        { text: \"OK\", onPress: () =\u003e console.log(\"OK touch\"), id: \"helloAlert2\" },\n        { text: \"Cancel\", onPress: () =\u003e console.log(\"Cancel touch\") }\n      ],\n      \"Do not ask for 3 minutes\",\n      3\n    )\n  }\n\n  render() {\n    return (\n      \u003cView style={styles.container}\u003e\n        \u003cCheckAlert\n          styles={{\n            modalContainer: { backgroundColor: \"rgba(49,49,49,0.8)\" },\n            checkBox: { padding: 10 },\n            modalView: { marginBottom: 10, borderRadius: 0 }\n          }}\n          ref={ref =\u003e (this.checkAlert = ref)}\n          // available Modal's props options: https://facebook.github.io/react-native/docs/modal.html\n          modalProps={{\n            transparent: true,\n            animationType: \"slide\",\n            onShow: () =\u003e alert(\"onShow!\")\n          }}\n          checkBoxColor=\"red\"\n        /\u003e\n        \u003cTouchableOpacity style={styles.touchButton} onPress={this.onPressSimpleAlert}\u003e\n          \u003cText style={styles.toucaButtonTxt}\u003esimple Alert\u003c/Text\u003e\n        \u003c/TouchableOpacity\u003e\n        \u003cTouchableOpacity\n          style={styles.touchButton}\n          onPress={this.onPresshNeverAskAlert}\n        \u003e\n          \u003cText style={styles.toucaButtonTxt}\u003eneverAsk Alert\u003c/Text\u003e\n        \u003c/TouchableOpacity\u003e\n        \u003cTouchableOpacity style={styles.touchButton} onPress={this.onPresshNot24HAlert}\u003e\n          \u003cText style={styles.toucaButtonTxt}\u003erandomAsk Alert\u003c/Text\u003e\n        \u003c/TouchableOpacity\u003e\n      \u003c/View\u003e\n    )\n  }\n}\n\n```\n\n#### The method is similar to React Native's Alert, however be careful when passing the button's `id`. The `id` is used like a primary Key in a local DB, and will cause a warning if the `id` is not passed properly.\n\n### STYLING\n\n```js\nexport default {\n  modalContainer: {\n    flex: 1,\n    backgroundColor: 'rgba(49,49,49, 0.7)',\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n  modalView: {\n    backgroundColor: '#rgb(235,233,227)',\n    borderRadius: 15,\n    width: 275,\n    borderColor: 'black',\n    borderWidth: StyleSheet.hairlineWidth,\n  },\n  checkBox: {\n    marginBottom: 10,\n  },\n  checkBoxText: {\n    marginLeft: 4,\n    alignSelf: 'center',\n    fontSize: 15,\n    justifyContent: 'center',\n  },\n  titleText: {\n    fontSize: 17,\n    fontWeight: '600',\n    padding: 15,\n    alignSelf: 'center',\n  },\n  buttonContainer: {\n    flexDirection: 'row',\n    justifyContent: 'flex-end',\n    borderColor: 'gray',\n    borderTopWidth: StyleSheet.hairlineWidth,\n  },\n  buttonText: {\n    fontSize: 17,\n  },\n  button: {\n    justifyContent: 'center',\n    alignItems: 'center',\n    padding: 15,\n    borderColor: 'gray',\n  },\n}\n```\n\n#### The above keys are used for styling the entire `view`. You just pass the object value like this\n\n```js\n\u003cAwesomeAlert\n  styles={{\n    modalContainer: { backgroundColor: 'rgba(49,49,49,0.8)' },\n    checkBox: { padding: 10 },\n    modalView: { marginBottom: 10, borderRadius: 0 },\n  }}\n/\u003e\n```\n\n### WHAT YOU NEED TO KNOW\n\n- If the alert is set to not be visible again, the action of the `button with the ID` is executed.\n- The checkbox is activated only when the `button with the ID` is pressed.\n\n### CONTRIBUTING\n\nThe PR of talented developers is always welcome and appreciated\n\nincluding .md file😁\n\n### AUTHOR\n\n- [heyman333](https://github.com/heyman333), Mobile developer, Seoul, South Korea\n- [amazingmobdev@gmail.com](mailto:amazingmobdev@gmail.com)\n\n### ROADMAP\n\n- [ ] define index.d.ts file for typescript\n- [ ] optimize logic\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fheyman333%2Freact-native-awesome-alert","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fheyman333%2Freact-native-awesome-alert","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fheyman333%2Freact-native-awesome-alert/lists"}