{"id":18725489,"url":"https://github.com/jacklam718/react-native-action-sheet-component","last_synced_at":"2025-04-12T16:05:30.400Z","repository":{"id":57334998,"uuid":"83315644","full_name":"jacklam718/react-native-action-sheet-component","owner":"jacklam718","description":"React Native Action Sheet Component for iOS \u0026 Android.","archived":false,"fork":false,"pushed_at":"2018-06-26T16:30:51.000Z","size":702,"stargazers_count":61,"open_issues_count":6,"forks_count":16,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-26T10:36:10.599Z","etag":null,"topics":["action-sheet","react-native","react-native-action-sheet","react-native-component"],"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/jacklam718.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-02-27T13:53:26.000Z","updated_at":"2023-05-11T18:00:23.000Z","dependencies_parsed_at":"2022-09-05T09:30:27.779Z","dependency_job_id":null,"html_url":"https://github.com/jacklam718/react-native-action-sheet-component","commit_stats":null,"previous_names":[],"tags_count":39,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jacklam718%2Freact-native-action-sheet-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jacklam718%2Freact-native-action-sheet-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jacklam718%2Freact-native-action-sheet-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jacklam718%2Freact-native-action-sheet-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jacklam718","download_url":"https://codeload.github.com/jacklam718/react-native-action-sheet-component/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248593738,"owners_count":21130312,"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","react-native","react-native-action-sheet","react-native-component"],"created_at":"2024-11-07T14:10:27.639Z","updated_at":"2025-04-12T16:05:30.368Z","avatar_url":"https://github.com/jacklam718.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## React Native Action Sheet Component\nReact Native Action Sheet Component for iOS \u0026 Android.\n\nPull request are welcomed. Please follow the Airbnb style guide [Airbnb JavaScript](https://github.com/airbnb/javascript)\n\n[Try it with Exponent](https://exp.host/@jacklam718/action-sheet-example)\n\n#### Preview\n\u003cimg src=\"https://raw.githubusercontent.com/jacklam718/react-native-action-sheet-component/master/.github/action-sheet.gif\" width=\"300\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/jacklam718/react-native-action-sheet-component/master/.github/action-sheet.png\" width=\"300\"\u003e\n\n\n## Installation\n##### yarn\n`yarn add react-native-action-sheet-component`\n##### npm\n`npm install --save react-native-action-sheet-component`\n\n\n## Usage with `ActionSheetManager`\n```javascript\nimport { EvilIcons, Ionicons } from '@exponent/vector-icons';\nimport ActionSheetManager { ActionSheet, ActionSheetItem } from 'react-native-action-sheet-component';\n```\n\n##### Options\n```javascript\nconst actionSheetItems = [\n  \u003cActionSheetItem\n    key='item-1'\n    text=\"Github\"\n    value=\"github\"\n    selectedIcon={checkedIcon}\n    icon={\n      \u003cEvilIcons name=\"sc-github\" size={42} /\u003e\n    }\n    onPress={this.onItemPress}\n  /\u003e,\n  \u003cActionSheetItem\n    key='item-2'\n    text=\"Facebook\"\n    value=\"facebook\"\n    selectedIcon={checkedIcon}\n    icon={\n      \u003cEvilIcons name=\"sc-facebook\" color=\"#4363A2\" size={42} /\u003e\n    }\n    onPress={this.onItemPress}\n  /\u003e,\n];\n\nconst options = {\n  defaultValue: ['github'],\n  children: actionSheetItems,\n  onChange: (value, index, selectedData) =\u003e {\n  },\n}\n```\n\n##### Show\n```javascript\nActionSheetManager.show(options, () =\u003e {\n  console.log('callback');\n});\n```\n\n##### Update\n```javascript\nActionSheetManager.update(options, () =\u003e {\n  console.log('callback');\n});\n```\n\n##### Hide\n```javascript\nActionSheetManager.hide(() =\u003e {\n  console.log('callback');\n});\n```\n\n\n## Usage with `ActionSheet`\n```javascript\nimport { EvilIcons, Ionicons } from '@exponent/vector-icons';\nimport { ActionSheet, ActionSheetItem } from 'react-native-action-sheet-component';\n```\n\n```javascript\nclass Example extends Component {\n  constructor(props) {\n    super(props) {\n\n      this.state = {\n        defaultSelectedValues: ['github'],\n      }\n    }\n  }\n\n  render() {\n    return (\n      \u003cView style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}\u003e\n        \u003cActionSheet\n          ref={(actionSheet) =\u003e { this.topActionSheet = actionSheet; }}\n          position=\"top\"\n          onChange={this.onChange}\n          defaultValue={this.state.defaultSelectedValues}\n          multiple\n        \u003e\n          \u003cActionSheetItem\n            text=\"Github\"\n            value=\"github\"\n            selectedIcon={checkedIcon}\n            icon={\n              \u003cEvilIcons name=\"sc-github\" size={42} /\u003e\n            }\n            onPress={this.onItemPress}\n          /\u003e\n          \u003cActionSheetItem\n            text=\"Facebook\"\n            value=\"facebook\"\n            selectedIcon={checkedIcon}\n            icon={\n              \u003cEvilIcons name=\"sc-facebook\" color=\"#4363A2\" size={42} /\u003e\n            }\n            onPress={this.onItemPress}\n          /\u003e\n        \u003c/ActionSheet\u003e\n      \u003c/View\u003e\n    )\n  }\n}\n```\n\n\n##### Show\n```javascript\nactionSheet.show(() =\u003e {\n  console.log('callback - show');\n})\n```\n\n##### Hide\n```javascript\nactionSheet.hide(() =\u003e {\n  console.log('callback - hide');\n})\n```\n\n## Props\n### ActionSheet\n| Prop | Type | Default | Note |\n|---|---|---|---|\n| `value?` | `any` | `null` | | |\n| `defaultValue?` | `any` | `null` | | |\n| `onShow?` | `Function` | `() =\u003e {}` | |\n| `onHide?` | `Function` | `() =\u003e {}` | |\n| `style?` | `any` | `null` | |\n| `onChange?` | `Function` | `() =\u003e {}` | |\n| `show?` | `boolean` | `false` | |\n| `showSelectedIcon?` | `boolean` | `true` | | |\n| `multiple?` | `boolean` | `false` | |\n| `hideOnSelected?` | `boolean` | `true` | |\n| `hideOnSelceted?` **_`DEPRECATED`_** | `boolean` | `true` | |\n| `hideOnHardwareBackPress?` | `boolean` | `true` | |\n| `showSeparator?` | `boolean` | `true` | |\n| `showSparator?` **_`DEPRECATED`_** | `boolean` | `true` | |\n| `scrollEnabled?` | `boolean` | `true` | |\n| `animationDuration?` | `number` | `250` | |\n| `overlayOpacity?` | `number` | `0.3` | |\n| `position?` | `string` | `top` | |\n| `maxHeight?` | `number` | `Dimensions.get('window').height / 2` | |\n| `children?` | `any` | `null` | |\n\n### ActionSheetItem\n| Prop | Type | Default | Note |\n|---|---|---|---|\n| `text` | `any` | `null` | | |\n| `icon?` | `any` | `null` | | |\n| `index?` | `number` | `null` | | |\n| `selectedIcon?` | `number` | ` require('./img/checkmark.png')` | | |\n| `selected?` | `boolean` | `false` | | |\n| `showSelectedIcon?` | `boolean` | `true` | | |\n| `onPress?` | `Function` | `() =\u003e {}` | | |\n| `style?` | `any` | `null` | | |\n| `textStyle?` | `any` | `null` | | |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjacklam718%2Freact-native-action-sheet-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjacklam718%2Freact-native-action-sheet-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjacklam718%2Freact-native-action-sheet-component/lists"}