{"id":4277,"url":"https://github.com/valerybugakov/react-native-custom-actionsheet","last_synced_at":"2025-03-15T12:30:28.043Z","repository":{"id":26087076,"uuid":"107302577","full_name":"valerybugakov/react-native-custom-actionsheet","owner":"valerybugakov","description":"📜 Cross platform custom ActionSheet","archived":false,"fork":false,"pushed_at":"2023-01-05T03:01:28.000Z","size":4960,"stargazers_count":48,"open_issues_count":40,"forks_count":13,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-27T01:13:43.182Z","etag":null,"topics":["action-sheet","custom-actionsheet","react","react-native","react-native-actionsheet"],"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/valerybugakov.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-17T17:36:00.000Z","updated_at":"2024-06-07T11:31:10.000Z","dependencies_parsed_at":"2022-09-11T10:03:20.203Z","dependency_job_id":null,"html_url":"https://github.com/valerybugakov/react-native-custom-actionsheet","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/valerybugakov%2Freact-native-custom-actionsheet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/valerybugakov%2Freact-native-custom-actionsheet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/valerybugakov%2Freact-native-custom-actionsheet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/valerybugakov%2Freact-native-custom-actionsheet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/valerybugakov","download_url":"https://codeload.github.com/valerybugakov/react-native-custom-actionsheet/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243730841,"owners_count":20338724,"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":["action-sheet","custom-actionsheet","react","react-native","react-native-actionsheet"],"created_at":"2024-01-05T20:17:06.645Z","updated_at":"2025-03-15T12:30:27.582Z","avatar_url":"https://github.com/valerybugakov.png","language":"JavaScript","funding_links":[],"categories":["Components","Others"],"sub_categories":["UI"],"readme":"# react-native-custom-actionsheet\nCross platform ActionSheet. This component implements a custom ActionSheet and provides the same way of drawing it on the different platforms (iOS and Android). Actually, In order to keep the best effect, it still uses the ActionSheetIOS on iOS. For custom ActionSheet it uses different styles depending on the platform.\n\nThis project is based on [react-native-actionsheet](https://github.com/beefe/react-native-actionsheet) by [beefe](https://github.com/beefe).\n\n\u003cimg height=\"500\" src=\"./examples/ios.gif\"\u003e \u003cimg height=\"500\" src=\"./examples/android.gif\"\u003e\n\n# Installation\n\n```\nnpm i -S react-native-custom-actionsheet\n```\n\n## Usage of ActionSheetCustom\n\nso you can customize ActionSheet buttons\n\n```javascript\nimport React, { Component } from 'react'\nimport { View, Text, StyleSheet } from 'react-native'\nimport { ActionSheetCustom as ActionSheet } from 'react-native-custom-actionsheet'\n\nconst CANCEL_INDEX = 0\nconst DESTRUCTIVE_INDEX = 4\nconst options = [\n  'Cancel',\n  'Apple',\n  {\n    component: \u003cText style={{ color: 'orange', fontSize: 24 }}\u003eBanana\u003c/Text\u003e,\n    height: 80,\n  },\n  'Watermelon',\n  {\n    component: \u003cText style={{ color: 'blueviolet' }}\u003eApple\u003c/Text\u003e,\n    height: 40,\n  },\n]\nconst title = \u003cText style={{ color: 'crimson', fontSize: 18 }}\u003eWhich one do you like?\u003c/Text\u003e\n\nclass CustomExample extends Component {\n  state = {\n    selected: 1,\n  }\n\n  showActionSheet = () =\u003e this.actionSheet.show()\n\n  getActionSheetRef = ref =\u003e (this.actionSheet = ref)\n\n  handlePress = index =\u003e this.setState({ selected: index })\n\n  render() {\n    const { selected } = this.state\n    const selectedText = options[selected].component || options[selected]\n\n    return (\n      \u003cView style={styles.wrapper}\u003e\n        \u003cText style={{ marginBottom: 20 }}\u003e\n          I like {selectedText}\n        \u003c/Text\u003e\n        \u003cText style={styles.button} onPress={this.showActionSheet}\u003e\n          Custom ActionSheet\n        \u003c/Text\u003e\n        \u003cActionSheet\n          ref={this.getActionSheetRef}\n          title={title}\n          message=\"custom message custom message custom message custom message custom message custom message \"\n          options={options}\n          cancelButtonIndex={CANCEL_INDEX}\n          destructiveButtonIndex={DESTRUCTIVE_INDEX}\n          onPress={this.handlePress}\n        /\u003e\n      \u003c/View\u003e\n    )\n  }\n}\n```\n\n\n## Usage\n\n```javascript\nimport React from 'react'\nimport { View, Text, StyleSheet } from 'react-native'\nimport ActionSheet from 'react-native-custom-actionsheet'\n\nconst CANCEL_INDEX = 0\nconst DESTRUCTIVE_INDEX = 4\nconst options = [ 'Cancel', 'Apple', 'Banana', 'Watermelon', 'Durian' ]\nconst title = 'Which one do you like?'\n\nclass DefaultExample extends React.Component {\n  state = {\n    selected: '',\n  }\n\n  showActionSheet = () =\u003e this.actionSheet.show()\n\n  getActionSheetRef = ref =\u003e (this.actionSheet = ref)\n\n  handlePress = (index) =\u003e this.setState({ selected: index })\n\n  render() {\n    return (\n      \u003cView style={styles.wrapper}\u003e\n        \u003cText style={{marginBottom: 20}}\u003e\n          I like {options[this.state.selected]}\n        \u003c/Text\u003e\n        \u003cText style={styles.button} onPress={this.showActionSheet}\u003e\n          Default ActionSheet\n        \u003c/Text\u003e\n        \u003cActionSheet\n          ref={this.getActionSheetRef}\n          title={title}\n          message=\"custom message custom message custom message custom message custom message custom message \"\n          options={options}\n          cancelButtonIndex={CANCEL_INDEX}\n          destructiveButtonIndex={DESTRUCTIVE_INDEX}\n          onPress={this.handlePress}\n        /\u003e\n      \u003c/View\u003e\n    )\n  }\n}\n```\n\n\n## Props\n\n\u003ctable\u003e\n    \u003ctr\u003e\n        \u003cth\u003eProp name\u003c/th\u003e\n        \u003cth\u003eDesciption\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\u003e\n          PropTypes.arrayOf([\n            PropTypes.string,\n            PropTypes.shape({\n              component: PropTypes.element,\n              height: PropTypes.number\n            }),\n          ])\n        \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\u003e\u003c/td\u003e\n        \u003ctd\u003eStyleSheet object with some keys from ./lib/styles\u003c/td\u003e\n        \u003ctd\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvalerybugakov%2Freact-native-custom-actionsheet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvalerybugakov%2Freact-native-custom-actionsheet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvalerybugakov%2Freact-native-custom-actionsheet/lists"}