{"id":19282468,"url":"https://github.com/4catalyzer/react-native-actionsheet-picker","last_synced_at":"2025-06-15T18:40:24.657Z","repository":{"id":57335008,"uuid":"59490953","full_name":"4Catalyzer/react-native-actionsheet-picker","owner":"4Catalyzer","description":"A wrapper on top of [ActionSheetPicker-3.0](https://github.com/skywinder/ActionSheetPicker-3.0) for displaying string picker in an actionsheet","archived":false,"fork":false,"pushed_at":"2020-10-27T08:48:46.000Z","size":14,"stargazers_count":14,"open_issues_count":3,"forks_count":3,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-22T01:38:46.708Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Objective-C","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/4Catalyzer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-05-23T14:44:51.000Z","updated_at":"2021-01-30T09:56:49.000Z","dependencies_parsed_at":"2022-09-05T08:01:46.477Z","dependency_job_id":null,"html_url":"https://github.com/4Catalyzer/react-native-actionsheet-picker","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/4Catalyzer/react-native-actionsheet-picker","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/4Catalyzer%2Freact-native-actionsheet-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/4Catalyzer%2Freact-native-actionsheet-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/4Catalyzer%2Freact-native-actionsheet-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/4Catalyzer%2Freact-native-actionsheet-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/4Catalyzer","download_url":"https://codeload.github.com/4Catalyzer/react-native-actionsheet-picker/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/4Catalyzer%2Freact-native-actionsheet-picker/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260029931,"owners_count":22948253,"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":[],"created_at":"2024-11-09T21:27:00.447Z","updated_at":"2025-06-15T18:40:24.611Z","avatar_url":"https://github.com/4Catalyzer.png","language":"Objective-C","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-actionsheet-picker\n\nA wrapper on top of [ActionSheetPicker-3.0](https://github.com/skywinder/ActionSheetPicker-3.0) for displaying string picker in an actionsheet\n\n### Installation\n\n```bash\nnpm i --save react-native-actionsheet-picker\n```\n\nYou need CocoaPods to install `ActionSheetPicker-3.0`.\nTo integrate ActionSheetPicker-3.0 into your Xcode project using CocoaPods, specify it in your `Podfile`:\n\n```ruby\npod 'ActionSheetPicker-3.0'\n```\n\nThen, run the following command:\n\n```bash\n$ pod install\n```\n\n\n### Add it to your iOS project\n\n1. Run `npm install react-native-actionsheet-picker --save`\n2. Open your project in XCode, right click on `Libraries` and click `Add\n   Files to \"Your Project Name\"` [(Screenshot)](http://url.brentvatne.ca/jQp8) then [(Screenshot)](http://url.brentvatne.ca/1gqUD).\n3. Add `libCJActionSheetPicker.a` to `Build Phases -\u003e Link Binary With Libraries`\n   [(Screenshot)](http://url.brentvatne.ca/17Xfe).\n4. Whenever you want to use it within React code now you can: `var CountDownPicker = require('NativeModules').CJActionSheetPicker;`\n\n\n## Example `ActionSheetPicker`\n```javascript\nvar ActionSheetPicker = require('NativeModules').CJActionSheetPicker;\n\nvar ExampleApp = React.createClass({\n  showPicker: function() {\n    ActionSheetPicker.showStringPicker({\n      title: 'Fruits', //optional\n      selectedIndex: 1 //optional intial time,\n      rows: ['apple', 'orange']\n    }).then(({ cancelled, selectedIndex, selectedValue }) =\u003e {\n      // console.log(selectedIndex)\n    });\n  },  \n  render: function() {\n    return (\n      \u003cTouchableHighlight\n            onPress={this.showPicker}\n            underlayColor=\"#f7f7f7\"\u003e\n\t      \u003cView style={styles.container}\u003e\n\t        \u003cImage source={require('image!announcement')} style={styles.image} /\u003e\n\t      \u003c/View\u003e\n\t   \u003c/TouchableHighlight\u003e\n    );\n  }\n});\n```\n\n## Example `ActionSheetPicker` with multiple selection\nThis depends on [this PR](https://github.com/skywinder/ActionSheetPicker-3.0/pull/321), you can use it now by changing your `Podfile` to: \n\n```ruby\npod 'ActionSheetPicker-3.0', :git =\u003e 'https://github.com/oblador/ActionSheetPicker-3.0.git', :branch =\u003e 'feature/multiple-selection'\n```\n\n```javascript\nimport { showStringPicker } from 'react-native-actionsheet-picker';\n\nshowStringPicker({\n  title: 'Fruits', \n  multiple: true,\n  selectedIndices: [1, 2],\n  rows: ['apple', 'orange', 'pear', 'potato']\n}).then(({ cancelled, selectedIndices, selectedValues }) =\u003e {\n  // console.log(selectedValues);\n});\n```\n\n## Example `CountDownPicker`\n```javascript\nvar CountDownPicker = require('NativeModules').CJCountDownPicker;\n\nvar ExampleApp = React.createClass({\n  showPicker: function() {\n    CountDownPicker.showCountDownPicker({\n      title: 'show', //optional\n      countDownDuration: '' //optional intial time\n    }).then(({ cancelled, selectedDate }) =\u003e {\n        if(cancelled) {\n          AlertIOS.alert('Error', 'select a time');\n        }\n        //duration is in seconds.\n    });\n  },  \n  render: function() {\n    return (\n      \u003cTouchableHighlight\n            onPress={this.showPicker}\n            underlayColor=\"#f7f7f7\"\u003e\n\t      \u003cView style={styles.container}\u003e\n\t        \u003cImage source={require('image!announcement')} style={styles.image} /\u003e\n\t      \u003c/View\u003e\n\t   \u003c/TouchableHighlight\u003e\n    );\n  }\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F4catalyzer%2Freact-native-actionsheet-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F4catalyzer%2Freact-native-actionsheet-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F4catalyzer%2Freact-native-actionsheet-picker/lists"}