{"id":17062433,"url":"https://github.com/lxfriday/react-native-customizable-actionsheet","last_synced_at":"2025-06-22T22:06:44.926Z","repository":{"id":57336387,"uuid":"88404911","full_name":"lxfriday/react-native-customizable-actionsheet","owner":"lxfriday","description":"a customizable actionsheet","archived":false,"fork":false,"pushed_at":"2017-04-17T14:14:12.000Z","size":1327,"stargazers_count":6,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-19T19:17:32.914Z","etag":null,"topics":["react-native"],"latest_commit_sha":null,"homepage":null,"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/lxfriday.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-04-16T10:00:19.000Z","updated_at":"2020-05-19T08:23:36.000Z","dependencies_parsed_at":"2022-09-03T07:53:42.531Z","dependency_job_id":null,"html_url":"https://github.com/lxfriday/react-native-customizable-actionsheet","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/lxfriday/react-native-customizable-actionsheet","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lxfriday%2Freact-native-customizable-actionsheet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lxfriday%2Freact-native-customizable-actionsheet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lxfriday%2Freact-native-customizable-actionsheet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lxfriday%2Freact-native-customizable-actionsheet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lxfriday","download_url":"https://codeload.github.com/lxfriday/react-native-customizable-actionsheet/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lxfriday%2Freact-native-customizable-actionsheet/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261374414,"owners_count":23148977,"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":["react-native"],"created_at":"2024-10-14T10:49:55.295Z","updated_at":"2025-06-22T22:06:39.909Z","avatar_url":"https://github.com/lxfriday.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-customizable-actionsheet\n\n## Demos \n\n|default|notitle|customize title or item|customize items|\n|-------|-------|----------|---------------|\n|\u003cimg src=\"https://github.com/lxfriday/react-native-customizable-actionsheet/blob/master/img/default.png?raw=true\" width=250 /\u003e|\u003cimg src=\"https://github.com/lxfriday/react-native-customizable-actionsheet/blob/master/img/notitle.png?raw=true\" width=250 /\u003e|\u003cimg src=\"https://github.com/lxfriday/react-native-customizable-actionsheet/blob/master/img/customize_title_item.png?raw=true\" width=250 /\u003e|\u003cimg src=\"https://github.com/lxfriday/react-native-customizable-actionsheet/blob/master/img/customize_items.png?raw=true\" width=250 /\u003e|\n\n\u003cimg src=\"https://github.com/lxfriday/react-native-customizable-actionsheet/blob/master/img/actionsheet.gif?raw=true\" width=250 /\u003e\n\n## Code\n```js\n// notitle\n\u003cActionSheet\n  ref={ref =\u003e this.actionsheet = ref}\n  funcs={actionSheetFuncs}\n  actions={actionSheetActions}\n/\u003e\n\n// customize the title \n\u003cActionSheet\n  title={\u003cIconElement name='call' size={15} color='red'/\u003e}\n  ref={ref =\u003e this.actionsheet = ref}\n  funcs={actionSheetFuncs}\n  actions={actionSheetActions}\n/\u003e\n\n// OR\n\n\u003cActionSheet\n  title={'电话'}\n  ref={ref =\u003e this.actionsheet = ref}\n  funcs={actionSheetFuncs}\n  actions={actionSheetActions}\n/\u003e\n\n// customize items\nimport {Icon as IconElement} from 'react-native-elements';\nimport Communications from 'react-native-communications';\n\u003cActionSheet\n  title={'电话'}\n  ref={ref =\u003e this.actionsheet = ref}\n  buttonComponents={\u003cView style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}\u003e\u003cIconElement name='call' size={50} color='red' raised reverse/\u003e\u003c/View\u003e}\n/\u003e\n\n// actionSheetFuncs: [() =\u003e Communications.phonecall(phone, true), () =\u003e  Communications.text(phone), () =\u003e {Clipboard.setString(phone);this.actionsheet.hide();} ],\n// actionSheetActions: [\u003cView style={{flexDirection: 'row'}}\u003e\u003cIconElement name='call' color='blue' size={15}/\u003e\u003cText\u003e{phone}\u003c/Text\u003e\u003c/View\u003e, '发短信给' + phone, '复制号码' ],\n\n```\n\n## API\n|Property|Type|Default|Description|\n|:-------|:---|:------|:----------|\n|`funcs`|array of `function`|`[]`|function|\n|`actions`|arrayof (`React.Component` or `string`)|`[]`|item title name|\n|`title`|`React.Component` or `string`|`''`|top title|\n|`buttonShows`|`number`|`6`|number of items to show|\n|`buttonHeight`|`number`|`50`|item height|\n|`buttonComponents`|`React.Component`|`null`|customize it youself **when set, actions and funcs will be useless**|\n|`buttonComponentsHeight`|`number`|`150`|buttonComponentsHeight use with buttonComponents|\n|`animationType`|[Easing](http://facebook.github.io/react-native/docs/easing.html)|`Easing.elastic(1)`|Animated.timing(v,{easing: `animationType`})|\n\n\n\n## You Can Enjoy Customization\n\n## [License](https://github.com/lxfriday/react-native-customizable-actionsheet/blob/master/LICENSE)\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flxfriday%2Freact-native-customizable-actionsheet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flxfriday%2Freact-native-customizable-actionsheet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flxfriday%2Freact-native-customizable-actionsheet/lists"}