{"id":15030058,"url":"https://github.com/beefe/react-native-actionsheet","last_synced_at":"2025-04-13T04:57:30.605Z","repository":{"id":5166388,"uuid":"52881637","full_name":"beefe/react-native-actionsheet","owner":"beefe","description":"An elegant ActionSheet component for React Native.","archived":false,"fork":false,"pushed_at":"2022-12-08T17:08:45.000Z","size":1115,"stargazers_count":1355,"open_issues_count":104,"forks_count":341,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-04-13T04:57:19.247Z","etag":null,"topics":["actionsheet","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/beefe.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":"2016-03-01T14:11:31.000Z","updated_at":"2025-04-09T13:28:28.000Z","dependencies_parsed_at":"2023-01-13T16:23:09.171Z","dependency_job_id":null,"html_url":"https://github.com/beefe/react-native-actionsheet","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beefe%2Freact-native-actionsheet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beefe%2Freact-native-actionsheet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beefe%2Freact-native-actionsheet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beefe%2Freact-native-actionsheet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/beefe","download_url":"https://codeload.github.com/beefe/react-native-actionsheet/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248665762,"owners_count":21142123,"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":["actionsheet","react-native"],"created_at":"2024-09-24T20:12:20.123Z","updated_at":"2025-04-13T04:57:30.569Z","avatar_url":"https://github.com/beefe.png","language":"JavaScript","readme":"# react-native-actionsheet\nCross platform ActionSheet. This component implements a custom ActionSheet  and provides the same way to drawing it on the defferent platforms(iOS and Android). Actually, In order to keep the best effect, it still uses the ActionSheetIOS on iOS.\n\n\u003ctable\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\" valign=\"top\"\u003e\n        \u003cimg width=\"210\" src=\"./docs/ios-custom.png\"\u003e\n      \u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\"\u003e\n        \u003cimg width=\"210\" src=\"./docs/ios-native.png\"\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n## Install\n\n```\nnpm install react-native-actionsheet --save\n```\n\n## Usage\n\n```js\nimport ActionSheet from 'react-native-actionsheet'\n\nclass Demo extends React.Component {\n  showActionSheet = () =\u003e {\n    this.ActionSheet.show()\n  }\n  render() {\n    return (\n      \u003cView\u003e\n        \u003cText onPress={this.showActionSheet}\u003eOpen ActionSheet\u003c/Text\u003e\n        \u003cActionSheet\n          ref={o =\u003e this.ActionSheet = o}\n          title={'Which one do you like ?'}\n          options={['Apple', 'Banana', 'cancel']}\n          cancelButtonIndex={2}\n          destructiveButtonIndex={1}\n          onPress={(index) =\u003e { /* do something */ }}\n        /\u003e\n      \u003c/View\u003e\n    )\n  }\n}\n```\n\n\n### Use ActionSheetCustom directly\n\nso you can customize option and title\n\n```js\nimport { ActionSheetCustom as ActionSheet } from 'react-native-actionsheet'\n\nconst options = [\n  'Cancel', \n  'Apple', \n  \u003cText style={{color: 'yellow'}}\u003eBanana\u003c/Text\u003e,\n  'Watermelon', \n  \u003cText style={{color: 'red'}}\u003eDurian\u003c/Text\u003e\n]\n\nclass Demo extends React.Component {\n  showActionSheet = () =\u003e {\n    this.ActionSheet.show()\n  }\n  render() {\n    return (\n      \u003cView\u003e\n        \u003cText onPress={this.showActionSheet}\u003eOpen ActionSheet\u003c/Text\u003e\n        \u003cActionSheet\n          ref={o =\u003e this.ActionSheet = o}\n          title={\u003cText style={{color: '#000', fontSize: 18}}\u003eWhich one do you like?\u003c/Text\u003e}\n          options={options}\n          cancelButtonIndex={0}\n          destructiveButtonIndex={4}\n          onPress={(index) =\u003e { /* do something */ }}\n        /\u003e\n      \u003c/View\u003e\n    )\n  }\n}\n```\n\n### How to redesign style ?\n\nThe style of ActionSheet is defined in [lib/styles.js](https://github.com/beefe/react-native-actionsheet/blob/master/lib/styles.js). We can pass the `styles` prop to cover default style. See [Example](https://github.com/beefe/react-native-actionsheet/blob/master/example/app/ExampleB.js#L48) .\n\n```javascript\n// example\n\nconst styles = {\n  titleBox: {\n    background: 'pink'\n  },\n  titleText: {\n    fontSize: 16,\n    color: '#000'\n  }\n}\n\n\u003cActionSheet\n  ...\n  styles={styles}\n/\u003e\n```\n\n## Props\n\nhttps://github.com/beefe/react-native-actionsheet/blob/master/lib/options.js\n\n\u003ctable\u003e\n    \u003ctr\u003e\n        \u003cth\u003eProp name\u003c/th\u003e\n        \u003cth\u003eDescription\u003c/th\u003e\n        \u003cth\u003eType\u003c/th\u003e\n        \u003cth\u003eDefault\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003etitle\u003c/td\u003e\n        \u003ctd\u003e\u003c/td\u003e\n        \u003ctd\u003ePropTypes.string or PropTypes.element\u003c/td\u003e\n        \u003ctd\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003emessage\u003c/td\u003e\n        \u003ctd\u003e\u003c/td\u003e\n        \u003ctd\u003ePropTypes.string or PropTypes.element\u003c/td\u003e\n        \u003ctd\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eoptions\u003c/td\u003e\n        \u003ctd\u003e\u003c/td\u003e\n        \u003ctd\u003ePropTypes.arrayOf([PropTypes.string, PropTypes.element])\u003c/td\u003e\n        \u003ctd\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003etintColor\u003c/td\u003e\n        \u003ctd\u003e\u003c/td\u003e\n        \u003ctd\u003ePropTypes.string\u003c/td\u003e\n        \u003ctd\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003ecancelButtonIndex\u003c/td\u003e\n        \u003ctd\u003e\u003c/td\u003e\n        \u003ctd\u003ePropTypes.number\u003c/td\u003e\n        \u003ctd\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003edestructiveButtonIndex\u003c/td\u003e\n        \u003ctd\u003e\u003c/td\u003e\n        \u003ctd\u003ePropTypes.number\u003c/td\u003e\n        \u003ctd\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eonPress\u003c/td\u003e\n        \u003ctd\u003e\u003c/td\u003e\n        \u003ctd\u003ePropTypes.func\u003c/td\u003e\n        \u003ctd\u003e(index) =\u003e {}\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003estyles\u003c/td\u003e\n        \u003ctd\u003eonly for ActionSheetCustom\u003c/td\u003e\n        \u003ctd\u003e\u003c/td\u003e\n        \u003ctd\u003e{}\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeefe%2Freact-native-actionsheet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbeefe%2Freact-native-actionsheet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeefe%2Freact-native-actionsheet/lists"}