{"id":4101,"url":"https://github.com/beefe/react-native-popup","last_synced_at":"2025-08-24T15:13:36.387Z","repository":{"id":43475005,"uuid":"48035734","full_name":"beefe/react-native-popup","owner":"beefe","description":"popup for react-native","archived":false,"fork":false,"pushed_at":"2018-09-22T08:48:05.000Z","size":692,"stargazers_count":169,"open_issues_count":14,"forks_count":41,"subscribers_count":9,"default_branch":"master","last_synced_at":"2024-11-11T21:36:23.268Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/beefe.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-12-15T10:22:51.000Z","updated_at":"2024-05-13T06:45:04.000Z","dependencies_parsed_at":"2022-09-01T20:10:43.326Z","dependency_job_id":null,"html_url":"https://github.com/beefe/react-native-popup","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beefe%2Freact-native-popup","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beefe%2Freact-native-popup/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beefe%2Freact-native-popup/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beefe%2Freact-native-popup/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/beefe","download_url":"https://codeload.github.com/beefe/react-native-popup/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228576895,"owners_count":17939645,"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-01-05T20:17:01.074Z","updated_at":"2024-12-07T07:31:05.441Z","avatar_url":"https://github.com/beefe.png","language":"JavaScript","readme":"# react-native-popup  \n[![npm version](https://img.shields.io/npm/v/react-native-popup.svg?style=flat-square)](https://www.npmjs.com/package/react-native-popup)  \n\nThis is a custom component for React Native, a simple popup, compatible with ios and android.\n\n###Demo\n![ui](./doc/ui.gif)\n\n###Props\n- \u003cb\u003eisOverlay\u003c/b\u003e *bool* - *`default true`*\n- \u003cb\u003eisOverlayClickClose\u003c/b\u003e *bool* - *`default true`*\n\n###~~*`static`*~~ Methods\n- \u003cb\u003ealert\u003c/b\u003e(\u003cb\u003e`message`\u003c/b\u003e: *string*|*number*, [...]) \n```javascript\n\te.g.\n\n\t\tthis.popup.alert(1);\n\n\t\tthis.popup.alert(1, 'two', '10 messages at most');\n```\n- \u003cb\u003etip\u003c/b\u003e({ \u003cb\u003e`title`\u003c/b\u003e: *string*, \u003cb\u003e`content`\u003c/b\u003e: *string*|*number*|*array*\u003c*string*|*number*\u003e *`isRequired`*, \u003cb\u003e`btn`\u003c/b\u003e: {\u003cb\u003e`title`\u003c/b\u003e: *string* \u003cb\u003e*`default 'OK'`*\u003c/b\u003e, \u003cb\u003e`callback`\u003c/b\u003e: *function*}, }) \n```javascript\n\te.g.\n\n\t\tthis.popup.tip({\n\t\t\tcontent: 'come on!',\n\t\t});\n\n\t\tthis.popup.tip({\n\t\t\ttitle: 'TipTip',\n\t\t\tcontent: 'come on!',\n\t\t});\n\n\t\tthis.popup.tip({\n\t\t\tcontent: ['come on!', 'go!'],\n\t\t\tbtn: {\n\t\t\t\ttext: 'OKOK',\n\t\t\t\tstyle: {\n\t\t\t\t\tcolor: 'red'\n\t\t\t\t},\n\t\t\t\tcallback: () =\u003e {\n\t\t\t\t\tthis.popup.alert('over!');\n\t\t\t\t},\n\t\t\t},\n\t\t});\n```\n- \u003cb\u003econfirm\u003c/b\u003e({ \u003cb\u003e`title`\u003c/b\u003e: *string*, \u003cb\u003e`content`\u003c/b\u003e: *string*|*number*|*array*\u003c*string*|*number*\u003e *`isRequired`*, \u003cb\u003e`ok`\u003c/b\u003e: {\u003cb\u003e`title`\u003c/b\u003e: *string* *`default 'OK'`*, \u003cb\u003e`callback`\u003c/b\u003e: *function*}, \u003cb\u003e`cancel`\u003c/b\u003e: {\u003cb\u003e`title`\u003c/b\u003e: *string* *`default 'Cancel'`*, \u003cb\u003e`callback`\u003c/b\u003e: *function*}, }) \n```javascript\n\te.g.\n\n\t\tthis.popup.confirm({\n\t\t\tcontent: 'Are you ready?',\n\t\t});\n\n\t\tthis.popup.confirm({\n\t\t\tcontent: 'Are you ready?',\n\t\t\tok: {\n\t\t\t\tcallback: () =\u003e {\n\t\t\t\t\tthis.popup.alert('Very good!');\n\t\t\t\t},\n\t\t\t},\n\t\t});\n\n\t\tthis.popup.confirm({\n\t\t\ttitle: 'title',\n\t\t\tcontent: ['come on!', 'go!'],\n\t\t\tok: {\n\t\t\t\ttext: 'Y',\n\t\t\t\tstyle: {\n\t\t\t\t\tcolor: 'red'\n\t\t\t\t},\n\t\t\t\tcallback: () =\u003e {\n\t\t\t\t\tthis.popup.alert('Good!');\n\t\t\t\t},\n\t\t\t},\n\t\t\tcancel: {\n\t\t\t\ttext: 'N',\n\t\t\t\tstyle: {\n\t\t\t\t\tcolor: 'blue'\n\t\t\t\t},\n\t\t\t\tcallback: () =\u003e {\n\t\t\t\t\tthis.popup.alert('Hurry up！');\n\t\t\t\t},\n\t\t\t},\n\t\t});\n```\n\n###Usage\n####Step 1 - install\n\n```\n\tnpm install react-native-popup --save\n```\n\n####Step 2 - import and use in project\n\n```javascript\nimport Popup from 'react-native-popup';\n\nclass App extends React.Component{\n\n\tonPressHandle() {\n\t\t// alert\n\t\tthis.popup.alert(1);\n\t},\n\n\trender() {\n\t\treturn (\n\t\t\t\u003cView style={styles.container}\u003e\n\n\t\t\t\t\u003cText style={styles.btn} onPress={this.onPressHandle.bind(this)}\u003eclick me !\u003c/Text\u003e\n\n\t\t\t\t{/** Popup component */}\n\t\t\t\t\u003cPopup ref={popup =\u003e this.popup = popup }/\u003e\n\t\t\t\t{/** or \u003cPopup ref={popup =\u003e this.popup = popup } isOverlay={false} isOverlayClickClose={false}/\u003e */}\n\n\t\t\t\u003c/View\u003e\n\t\t);\n\t},\n\t\n};\n```\n","funding_links":[],"categories":["Components","JavaScript","Others"],"sub_categories":["UI"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeefe%2Freact-native-popup","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbeefe%2Freact-native-popup","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeefe%2Freact-native-popup/lists"}