{"id":4262,"url":"https://github.com/danceyoung/react-native-selectmultiple-button","last_synced_at":"2025-08-04T01:31:56.844Z","repository":{"id":53773423,"uuid":"120739994","full_name":"danceyoung/react-native-selectmultiple-button","owner":"danceyoung","description":"A button (or a grouped buttons) supporting  multiple or  radio selection  by building with React Native. https://github.com/danceyoung/selectmultiplebuttons for Swift.","archived":false,"fork":false,"pushed_at":"2021-03-15T02:38:33.000Z","size":74417,"stargazers_count":82,"open_issues_count":4,"forks_count":18,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-04-26T02:35:34.095Z","etag":null,"topics":["android","button","ios","multiple","radio","react","react-native","select","tag"],"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/danceyoung.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":["danceyoung"],"patreon":"danceyoung"}},"created_at":"2018-02-08T09:28:45.000Z","updated_at":"2024-02-01T09:04:08.000Z","dependencies_parsed_at":"2022-09-08T01:22:51.743Z","dependency_job_id":null,"html_url":"https://github.com/danceyoung/react-native-selectmultiple-button","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/danceyoung%2Freact-native-selectmultiple-button","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danceyoung%2Freact-native-selectmultiple-button/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danceyoung%2Freact-native-selectmultiple-button/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danceyoung%2Freact-native-selectmultiple-button/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/danceyoung","download_url":"https://codeload.github.com/danceyoung/react-native-selectmultiple-button/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228582487,"owners_count":17940587,"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":["android","button","ios","multiple","radio","react","react-native","select","tag"],"created_at":"2024-01-05T20:17:06.199Z","updated_at":"2024-12-07T08:30:27.445Z","avatar_url":"https://github.com/danceyoung.png","language":"JavaScript","readme":"# React Native SelectMultiple Button\n\nThis library is a button (or a grouped buttons) supporting multiple or radio selection by building with React Native. https://github.com/danceyoung/selectmultiplebuttons for Swift.\n\nYou can specify any **Layout** and **Style** for container view,button view and text through `View Style Props`, `Layout Props` and `Text Style Props` supporting by React Native\n\n## Example running in iOS and Android(captured by GIPHY CAPTURE)\n\n![captured by GIPHY CAPTURE](https://github.com/danceyoung/react-native-selectmultiple-button/blob/master/screenCapture/ios-screencapture.gif?raw=true)\n\n\u003e Note:Runing a Android Virtual Device is TMDing too large memory eated.\n\n## Instruction\n\n- SelectMultipleButton\n\n- SelectMultiple**Group**Button\n\n### SelectMultipleButton\n\nYou need to set the props `selected` as `true` to highlight button's selected status and manage the data selected through event props `singleTap(valueTap)` by hard coding yourself.\n\n### SelectMultipleGroupButton\n\nYou needn't to set these settings like SelectMultipleButton, because these features are build in the SelectMultipleGroupButton. What you do is set the event props `singleTap(valueTap)` to hold the value tap and the event props `onSelectedValuesChange(selectedValues)` to hold the array of values selected.\n\n## Installation\n\ncd your project root direction\n\n$ npm install react-native-selectmultiple-button --save\n\n## Usage\n\ncode example\n\n[App.js](https://github.com/danceyoung/react-native-selectmultiple-button/blob/master/App.js)\n\ncode snap\n\n```javascript\nimport {\n  SelectMultipleButton,\n  SelectMultipleGroupButton\n} from \"react-native-selectmultiple-button\";\n\n\u003cSelectMultipleButton\n  buttonViewStyle={{\n    borderRadius: 10,\n\n    height: 40\n  }}\n  textStyle={{\n    fontSize: 15\n  }}\n  highLightStyle={{\n    borderColor: \"gray\",\n\n    backgroundColor: \"transparent\",\n\n    textColor: \"gray\",\n\n    borderTintColor: ios_blue,\n\n    backgroundTintColor: ios_blue,\n\n    textTintColor: \"white\"\n  }}\n  multiple={true}\n  value={interest}\n  selected={this.state.multipleSelectedData.includes(interest)}\n  singleTap={valueTap =\u003e this._singleTapMultipleSelectedButtons(interest)}\n/\u003e;\n\n\u003cSelectMultipleGroupButton\n  containerViewStyle={{\n    justifyContent: \"flex-start\"\n  }}\n  highLightStyle={{\n    borderColor: \"gray\",\n\n    backgroundColor: \"transparent\",\n\n    textColor: \"gray\",\n\n    borderTintColor: ios_blue,\n\n    backgroundTintColor: \"transparent\",\n\n    textTintColor: ios_blue\n  }}\n  onSelectedValuesChange={selectedValues =\u003e\n    this._groupButtonOnSelectedValuesChange(selectedValues)\n  }\n  group={multipleGroupData}\n/\u003e;\n```\n\n## Props\n\n### SelectMultipleButton\n\n|     props      |            type             | required |                                                              desc                                                               |\n| -------------- | --------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------- |\n| `selected`     | bool                        | no       | Default is false. The `selected` prop determines whether the button is selected and highlighted                                 |\n| `value`        | one of types(string,number) | yes      | Your business key                                                                                                               |\n| `displayValue` | one of types(string,number) | no       | Default is == `value` prop if not set `displayValue` prop. Displayed as button's text                                           |\n| `singleTap`    | function(valueTap)          | no       | Handler to be called when the user taps the button. The button's props `value` is passed as an argument to the callback handler |\n\n----------\n\n`highLightStyle`\n\nNormal or highlighted style, the style object `{}` contains the following keys.\n\n- borderColor: PropTypes.string.isRequired---Normal color of button border.\n\n- backgroundColor: PropTypes.string.isRequired---Normal color of button background.\n\n- textColor: PropTypes.string.isRequired---Normal color of text.\n\n- borderTintColor: PropTypes.string.isRequired---Highlighted color of button border.\n\n- backgroundTintColor: PropTypes.string.isRequired---Highlighted color of button background.\n\n- textTintColor: PropTypes.string.isRequired--Highlighted color of text.\n\nDefault style is\n\n\n\n{\n\nborderColor: 'gray',\n\nbackgroundColor: 'transparent',\n\ntextColor: 'gray',\n\nborderTintColor: ios_blue,\n\nbackgroundTintColor: 'transparent',\n\ntextTintColor: ios_blue,\n\n}\n\n----------\n\n`buttonViewStyle`\n\nStyle of button view. You can specify any [View Style Props](https://facebook.github.io/react-native/docs/view-style-props.html).\n\nDefault style is\n\n```css\n{\n  margin: 5,\n  borderRadius: 3,\n  alignItems: 'center',\n  justifyContent: 'center',\n  borderWidth: 1\n}\n```\n\n----------\n\n`textStyle`\n\nStyle of text. You can specify any [Text Style Props](https://facebook.github.io/react-native/docs/text.html#style)\n\nDefault style is\n\n```css\n{\n  textAlign: 'center',\n  marginTop: 5,\n  marginBottom: 5,\n  marginLeft: 10,\n  marginRight: 10,\n}\n```\n\n### SelectMultipleGroupButton\n\n|          props           |             type              | required |                                                               desc                                                                |\n| ------------------------ | ----------------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------- |\n| `multiple`               | bool                          | no       | Default is true. The `multiple` prop determines the grouped buttons are multiple or radio selected                                |\n| `defaultSelectedIndexes` | array                         | no       | The indexes array in `group` of the grouped buttons to be default selected and highlighted                                        |\n| `maximumNumberSelected`  | number                        | no       | Specifies maximum number for selecting buttons, and its smallest value is 2. Only enabled for `multiple` prop is set true         |\n| `group`                  | array of {value,displayValue} | yes      | Just a plain array, `value` and `displayValue` props are akin to `value` and `displayValue` props of `SelectMultipleButton`.      |\n| `singleTap`              | function(valueTap)            | no       | Handler to be called when the user taps the button. The button's props `value` is passed as an argument to the callback handler.  |\n| `onSelectedValuesChange` | function(selectedValues)      | no       | Handler to be called when the user taps the button.the array of selected values is passed as an argument to the callback handler. |\n\n----------\n\n`highLightStyle`\n\nNormal or highlighted style, akin to `highLightStyle` of `SelectMultipleButton`.\n\n----------\n\n`buttonViewStyle`\n\nStyle of button view, akin to `buttonViewStyle` of `SelectMultipleButton`.\n\n----------\n\n`textStyle`\n\nStyle of text, akin to `textStyle` of `SelectMultipleButton`.\n\n----------\n\n`containerViewStyle`\n\nStyle of the grouped buttons container view. You can specify any [View Style Props](https://facebook.github.io/react-native/docs/view-style-props.html) and [Layout Props](https://facebook.github.io/react-native/docs/layout-props.html).\n\nDefault View Style and Layout props is\n\n```css\n{\n  flexWrap: 'wrap',\n  flexDirection: 'row',\n  justifyContent: 'center'\n}\n```\n\n## License\n\nreact-native-selectmultiple-button is [MIT Licensed](https://github.com/danceyoung/react-native-selectmultiple-button/blob/master/LICENSE).\n","funding_links":["https://github.com/sponsors/danceyoung","https://patreon.com/danceyoung"],"categories":["Components","Others"],"sub_categories":["UI"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanceyoung%2Freact-native-selectmultiple-button","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdanceyoung%2Freact-native-selectmultiple-button","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanceyoung%2Freact-native-selectmultiple-button/lists"}