{"id":21952532,"url":"https://github.com/noppt/react-native-zhb-actionsheet","last_synced_at":"2025-09-06T16:34:59.158Z","repository":{"id":57341721,"uuid":"84149500","full_name":"NoPPT/react-native-zhb-actionsheet","owner":"NoPPT","description":null,"archived":false,"fork":false,"pushed_at":"2018-09-20T08:02:26.000Z","size":162,"stargazers_count":10,"open_issues_count":1,"forks_count":6,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-08-18T07:44:49.996Z","etag":null,"topics":["actionsheet","pickerview","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/NoPPT.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-03-07T03:20:45.000Z","updated_at":"2024-08-31T16:00:10.000Z","dependencies_parsed_at":"2022-09-15T16:51:01.349Z","dependency_job_id":null,"html_url":"https://github.com/NoPPT/react-native-zhb-actionsheet","commit_stats":null,"previous_names":["noppt/react-native-actionsheet"],"tags_count":10,"template":false,"template_full_name":null,"purl":"pkg:github/NoPPT/react-native-zhb-actionsheet","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NoPPT%2Freact-native-zhb-actionsheet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NoPPT%2Freact-native-zhb-actionsheet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NoPPT%2Freact-native-zhb-actionsheet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NoPPT%2Freact-native-zhb-actionsheet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NoPPT","download_url":"https://codeload.github.com/NoPPT/react-native-zhb-actionsheet/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NoPPT%2Freact-native-zhb-actionsheet/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273932764,"owners_count":25193599,"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","status":"online","status_checked_at":"2025-09-06T02:00:13.247Z","response_time":2576,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","pickerview","react-native"],"created_at":"2024-11-29T06:26:14.363Z","updated_at":"2025-09-06T16:34:59.135Z","avatar_url":"https://github.com/NoPPT.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ActionSheet for React Native\n[![npm Version](https://img.shields.io/npm/v/react-native-zhb-actionsheet.svg)](https://www.npmjs.com/package/react-native-zhb-actionsheet) [![License](https://img.shields.io/npm/l/react-native-zhb-actionsheet.svg)](https://www.npmjs.com/package/react-native-zhb-actionsheet)\n\nActionSheet component for React Native (iOS and Android)\n\n![1](./docs/1.png)\n\n## Installation\n\nGet started with actionsheet by installing the node module:\n```\n$ npm install react-native-zhb-actionsheet --save\n```\n\n## Props\n\n| prop | type | default | required | description |\n| ---- | ---- | ---- | ---- | ---- |\n| titles | array of object, [{title: string, actionStyle: oneOf([\"default\", \"cancel\", \"destructive\"]), action: func] | [] | yes | |\n| onClose | func | none | no | |\n| separateHeight | number | 4 | no | |\n| separateColor | string(color) | '#dddddd' | no | |\n| backgroundColor | string(color) | 'rgba(0, 0, 0, 0.4)' | no | |\n| containerStyle | style | {} | no | |\n\n## Methods\n| method | type | description |\n| ---- | ---- | ---- |\n| show() | function | show the actionsheet |\n| hide() | function | hide the actionsheet |\n\n## Basic Usage\n\n```\n'use strict';\n\nimport React, {Component} from 'react';\nimport {\n    View,\n    Text,\n    StyleSheet\n} from 'react-native';\n\nimport ActionSheet from 'react-native-zhb-actionsheet';\n\nexport default class App extends Component {\n\n    constructor(props) {\n        super(props);\n        this.defaultTitles = [{title: 'Camera', action: () =\u003e {console.log('click Camera');}},\n            {title: 'Choose from Album', actionStyle: 'default', action: () =\u003e {console.log('click Choose from Album');}},\n            {title: 'Delete', actionStyle: 'destructive', action: () =\u003e {console.log('click Delete');}},\n            {title: 'Cancel', actionStyle: 'cancel', action: () =\u003e {console.log('click Cancel');}}\n            ];\n        this.customTitles = [{title: 'Title 1'}, {title: 'Title 2'}, {title: 'Title 3'}, {title: 'Title 4'}, {title: 'Title 5'},\n            {title: 'Title 6'}, {title: 'Title 7'}, {title: 'Title 8'}];\n        this.state = {\n            titles: this.defaultTitles\n        };\n    }\n\n    render() {\n        return (\n            \u003cView style={styles.container}\u003e\n                \u003cActionSheet\n                    ref=\"picker\"\n                    titles={this.state.titles}\n                    separateHeight={3}\n                    separateColor=\"#dddddd\"\n                    backgroundColor=\"rgba(0, 0, 0, 0.3)\"\n                    containerStyle={{margin: 10, borderRadius: 5}}\n                    onClose={(obj) =\u003e {console.log('action sheet closed! clicked:' + JSON.stringify(obj));}}\n                /\u003e\n\n                \u003cText style={styles.welcome} onPress={() =\u003e {this.setState({titles: this.defaultTitles}, () =\u003e {this.refs.picker.show();})}}\u003e\n                    click me !!!\n                \u003c/Text\u003e\n                \u003cText style={styles.welcome} onPress={() =\u003e {this.setState({titles: this.customTitles}, () =\u003e {this.refs.picker.show();})}}\u003e\n                    click me !!!\n                \u003c/Text\u003e\n            \u003c/View\u003e\n        )\n    }\n}\n\nconst styles = StyleSheet.create({\n    container: {\n        flex: 1,\n        justifyContent: 'center',\n        alignItems: 'center',\n        backgroundColor: '#F5FCFF',\n    },\n    welcome: {\n        fontSize: 30,\n        textAlign: 'center',\n        margin: 10\n    }\n});\n```\n\n## Running the Example Project\n\nYou can check out the example project with the following instructions\n\n1. Clone the repo: `git clone https://github.com/NoPPT/react-native-zhb-actionsheet.git`\n2. Open: `cd react-native-zhb-actionsheet` and Install: `npm install`\n3. Run `npm start` to start the packager.\n\n## License\n[MIT](./LICENSE)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnoppt%2Freact-native-zhb-actionsheet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnoppt%2Freact-native-zhb-actionsheet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnoppt%2Freact-native-zhb-actionsheet/lists"}