{"id":15626362,"url":"https://github.com/arnaudrinquin/react-native-radio-buttons","last_synced_at":"2025-05-16T18:08:48.566Z","repository":{"id":35624439,"uuid":"39898325","full_name":"ArnaudRinquin/react-native-radio-buttons","owner":"ArnaudRinquin","description":"[DEPRECATED] A Radio-button like logic wrapper for React Native","archived":false,"fork":false,"pushed_at":"2018-04-19T07:09:56.000Z","size":55557,"stargazers_count":414,"open_issues_count":18,"forks_count":97,"subscribers_count":11,"default_branch":"master","last_synced_at":"2024-10-30T00:33:27.296Z","etag":null,"topics":["radio-buttons","react-native"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-radio-buttons","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/ArnaudRinquin.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":"2015-07-29T14:35:27.000Z","updated_at":"2024-10-27T01:51:15.000Z","dependencies_parsed_at":"2022-08-17T21:40:12.855Z","dependency_job_id":null,"html_url":"https://github.com/ArnaudRinquin/react-native-radio-buttons","commit_stats":null,"previous_names":[],"tags_count":30,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArnaudRinquin%2Freact-native-radio-buttons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArnaudRinquin%2Freact-native-radio-buttons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArnaudRinquin%2Freact-native-radio-buttons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArnaudRinquin%2Freact-native-radio-buttons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ArnaudRinquin","download_url":"https://codeload.github.com/ArnaudRinquin/react-native-radio-buttons/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248599297,"owners_count":21131257,"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":["radio-buttons","react-native"],"created_at":"2024-10-03T10:12:06.321Z","updated_at":"2025-04-12T16:42:33.758Z","avatar_url":"https://github.com/ArnaudRinquin.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-radio-buttons\n\n*IMPORTANT* this package is deprecated and no longer maintained in favor of the official [SegmentedControlIOS](https://facebook.github.io/react-native/docs/segmentedcontrolios.html) component.\n\nA react component to implement _radio buttons_-like behaviors: multiple options, only one option can be selected at a given time.\n\nBoth the container and option nodes are customizable. Comes with SegmentedControls clone, only more customizable (see below, animations to come).\n\n![example](./images/example.png)\n\n## Install\n\n```sh\nnpm i -S react-native-radio-buttons\n```\n\n## Demo app\n\n```sh\ngit clone https://github.com/ArnaudRinquin/react-native-radio-buttons.git\ncd react-native-radio-buttons\nnpm run demo\n```\n\n## Usage\n\nHere is an extensive overview of the component usage.\n\n```jsx\nimport { RadioButtons } from 'react-native-radio-buttons'\n\n// ...\n\nrender() {\n  const options = [\n    \"Option 1\",\n    \"Option 2\"\n  ];\n\n  function setSelectedOption(selectedOption){\n    this.setState({\n      selectedOption\n    });\n  }\n\n  function renderOption(option, selected, onSelect, index){\n    const style = selected ? { fontWeight: 'bold'} : {};\n\n    return (\n      \u003cTouchableWithoutFeedback onPress={onSelect} key={index}\u003e\n        \u003cText style={style}\u003e{option}\u003c/Text\u003e\n      \u003c/TouchableWithoutFeedback\u003e\n    );\n  }\n\n  function renderContainer(optionNodes){\n    return \u003cView\u003e{optionNodes}\u003c/View\u003e;\n  }\n\n  return (\n    \u003cView style={{margin: 20}}\u003e\n      \u003cRadioButtons\n        options={ options }\n        onSelection={ setSelectedOption.bind(this) }\n        selectedOption={this.state.selectedOption }\n        renderOption={ renderOption }\n        renderContainer={ renderContainer }\n      /\u003e\n      \u003cText\u003eSelected option: {this.state.selectedOption || 'none'}\u003c/Text\u003e\n    \u003c/View\u003e);\n}\n\n```\n\nWill render this\n\n![Example](./images/example.gif)\n\n## Props\n\n* `options - []` mandatory array of anything, will be passed to `renderOption`\n* `onSelection - function(selectedOption, selectedIndex){}` option selection callback\n* `selectedIndex - index` the  initially selected index, optional.\n* `selectedOption - option` the initially selected option, optional\n* `renderOption - function(option, selected, onSelect, index)` should return an option node, default generate `\u003cText\u003e` nodes and adds `{fontWeight:'bold'}` to the selected option.\n* `renderContainer - function(optionsNodes)` must render the container, default is RadioButtons.renderVerticalContainer (see below)\n* `optionStyle` - optional styles to be applied to the `\u003cText\u003e` elements of the options themselves.\n* `optionContainerStyle` - optional styles to be applied to the the `\u003cView\u003e` that contain the options.\n* `testOptionEqual- function(selectedOption, currentOption){}` optional compares and returns bool.\n\n### Full JavaScript SegmentedControls clone\n\nThis library comes with a clone of the native `SegmentedControls`, based on `RadioButtons`.\n\n```jsx\nimport { SegmentedControls } from 'react-native-radio-buttons'\n\n// ...\n\n\u003cSegmentedControls\n  options={ options }\n  onSelection={ setSelectedOption.bind(this) }\n  selectedOption={ this.state.selectedOption }\n/\u003e\n```\n\nYou override all the defaults through the props.\n\n```jsx\n\u003cSegmentedControls\n  tint={'#f80046'}\n  selectedTint= {'white'}\n  backTint= {'#1e2126'}\n  options={ options }\n  allowFontScaling={ false } // default: true\n  onSelection={ setSelectedOption.bind(this) }\n  selectedOption={ this.state.selectedOption }\n  optionStyle={{fontFamily: 'AvenirNext-Medium'}}\n  optionContainerStyle={{flex: 1}}\n/\u003e\n```\n\nHere is the list of the props you might override:\n\n```jsx\nconst IOS_BLUE = '#007AFF';\nconst IOS_WHITE = '#ffffff';\n\nconst DEFAULTS = {\n  direction: 'row',\n\n  tint: IOS_BLUE,\n  backTint: IOS_WHITE,\n\n  paddingTop: 5,\n  paddingBottom: 5,\n  textAlign: 'center',\n\n  selectedTint: IOS_WHITE,\n  selectedBackgroundColor: IOS_WHITE,\n\n  separatorTint: IOS_BLUE,\n  separatorWidth: 1,\n\n  containerBorderTint: IOS_BLUE,\n  containerBorderWidth: 1,\n  containerBorderRadius: 5,\n\n}\n```\n\nYou can also specify `containerStyle`, `optionContainerStyle`, and `optionStyle` to use any style you want:\n\n* `containerStyle` - optional styles to be applied to the outermost `\u003cView\u003e` component.\n* `optionStyle` - optional styles to be applied to the `\u003cText\u003e` elements of the options themselves.\n* `optionContainerStyle` - optional styles to be applied to the the `\u003cView\u003e` that contain the options.\n\nYou can also specify how to extract the labels from the options through the extractText prop.\n\n```jsx\noptions = [\n  {\n    label: 'Option 1',\n    value: 'opt1'\n  },\n  {\n    label: 'Option 2',\n    value: 'opt2'\n  }\n]\n\n\u003cSegmentedControls\n  options={ options }\n  onSelection={ setSelectedOption.bind(this) }\n  selectedOption={ this.state.selectedOption }\n  extractText={ (option) =\u003e option.label }\n/\u003e\n```\n\nIf you decide to declare `options` as an array of objects, do also include a `testOptionEqual` prop for customized equality checking, otherwise changing `selectedOption` programmatically would not update the UI correctly. \n\nWith the above `options`, you'll need `testOptionEqual` to be as follows in order for `selectedOption` to display correctly.\n\n```jsx\n  \u003cSegmentedControls\n    options={ options }\n    onSelection={ setSelectedOption.bind(this) }\n    selectedOption={ this.state.selectedOption }\n    extractText={ (option) =\u003e option.label }\n    testOptionEqual={(selectedValue, option) =\u003e selectedValue === option.value}\n  /\u003e\n```\n\nMoreover, you can even specify the whole `renderOption()` function:\n\n```jsx\n\u003cSegmentedControls\n  // ...\n  renderOption={(option, selected) =\u003e {\n    return (\n      // ...render stuff\n    )\n  }}\n}}\n```\n\n## Helpers\n**RadioButtons.renderVerticalContainer;**\n\nA super simple `renderContainer` function that generates a \u003cView\u003e with `{flexDirection: \"column\"}`. It is used as default `renderContainer` if you don't specify it.\n\nUsage:\n\n```jsx\n\u003cRadioButtons\n  options={ options }\n  onSelection={ setSelectedOption }\n  renderContainer={RadioButtons.renderVerticalContainer}\n/\u003e\n```\n\n**RadioButtons.renderHorizontalContainer;**\n\nAnother super simple `renderContainer` function that generates a \u003cView\u003e with `{flexDirection: \"row\"}`\n\nUsage:\n\n```jsx\n\u003cRadioButtons\n  options={ options }\n  onSelection={ setSelectedOption }\n  renderContainer={RadioButtons.renderHorizontalContainer}\n/\u003e\n```\n\n**RadioButtons.getViewContainerRenderer(viewContainerStyle);**\n\nAn helper that generates a simple `\u003cView\u003e` with the provided style.\n\nUsage:\n\n```jsx\n\u003cRadioButtons\n  options={ options }\n  onSelection={ setSelectedOption }\n  renderContainer={RadioButtons.getViewContainerRenderer({\n    backgroundColor: '#f80046',\n    flexDirection: 'row',\n    justifyContent: 'space-around',\n  })}\n/\u003e\n```\n\n**RadioButtons.getTextOptionRenderer(normalStyle, selectedStyle, extractText);**\n\nAn helper that generates `\u003cText\u003e` options wrapped in `\u003cTouchableWithoutFeedback\u003e`.\n`normalStyle` and `selectedStyle` will be applied to the \u003cText\u003e nodes, depending on state. `extractText(options)` can be specified.\n\n\nUsage:\n\n```jsx\nconst normalStyle = {\n  color: 'white'\n};\n\nconst selectedStyle = {\n  color: '#f80046',\n  fontWeight: 'bold'\n};\n\nconst extractText = (option) =\u003e option.label;\n\n\u003cRadioButtons\n  options={ options }\n  onSelection={ setSelectedOption }\n  renderOptions={RadioButtons.getTextOptionRenderer(normalStyle, selectedStyle, extractText)}\n/\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnaudrinquin%2Freact-native-radio-buttons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farnaudrinquin%2Freact-native-radio-buttons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnaudrinquin%2Freact-native-radio-buttons/lists"}