{"id":13472677,"url":"https://github.com/moschan/react-native-simple-radio-button","last_synced_at":"2025-05-15T20:05:45.845Z","repository":{"id":46934098,"uuid":"48047877","full_name":"moschan/react-native-simple-radio-button","owner":"moschan","description":"Simple and handy animated radio button component for React Native","archived":false,"fork":false,"pushed_at":"2021-09-21T05:01:29.000Z","size":1022,"stargazers_count":451,"open_issues_count":93,"forks_count":130,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-05-11T21:03:52.376Z","etag":null,"topics":[],"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/moschan.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":"2015-12-15T14:27:53.000Z","updated_at":"2025-04-29T03:59:56.000Z","dependencies_parsed_at":"2022-09-26T18:50:49.743Z","dependency_job_id":null,"html_url":"https://github.com/moschan/react-native-simple-radio-button","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moschan%2Freact-native-simple-radio-button","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moschan%2Freact-native-simple-radio-button/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moschan%2Freact-native-simple-radio-button/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moschan%2Freact-native-simple-radio-button/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/moschan","download_url":"https://codeload.github.com/moschan/react-native-simple-radio-button/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254394720,"owners_count":22063984,"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-07-31T16:00:56.981Z","updated_at":"2025-05-15T20:05:40.808Z","avatar_url":"https://github.com/moschan.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","React, React Native"],"sub_categories":["Components"],"readme":"# react-native-simple-radio-button\n\u003e simple and useful radio button component for React Native\n\n[![npm](https://img.shields.io/npm/v/react-native-simple-radio-button.svg)]()[![npm](https://img.shields.io/npm/l/react-native-simple-radio-button.svg)]()\n\n[![NPM](https://nodei.co/npm/react-native-simple-radio-button.png?downloads=true\u0026downloadRank=true\u0026stars=true)](https://nodei.co/npm/react-native-simple-radio-button/)\n\n\nDemo\n---\n\n![Demo](./doc/ver1.3_demo.gif)\n\n\n## Installation\n\nin Cli\n\n```sh\nnpm i react-native-simple-radio-button --save\n```\n\n\n# Getting started\n\n```js\nimport RadioForm, {RadioButton, RadioButtonInput, RadioButtonLabel} from 'react-native-simple-radio-button';\n\n\nvar radio_props = [\n  {label: 'param1', value: 0 },\n  {label: 'param2', value: 1 }\n];\n\nvar RadioButtonProject = React.createClass({\n  getInitialState: function() {\n    return {\n      value: 0,\n    }\n  },\n  render: function() {\n    return (\n      \u003cView\u003e\n        \u003cRadioForm\n          radio_props={radio_props}\n          initial={0}\n          onPress={(value) =\u003e {this.setState({value:value})}}\n        /\u003e\n      \u003c/View\u003e\n    );\n  }\n});\n```\n\nBasic\n---\n\n```js\n\u003cRadioForm\n  radio_props={radio_props}\n  initial={0}\n  onPress={(value) =\u003e {this.setState({value:value})}}\n/\u003e\n```\n\nAdvanced\n---\n\n```js\n\u003cRadioForm\n  radio_props={this.state.types}\n  initial={0}\n  formHorizontal={false}\n  labelHorizontal={true}\n  buttonColor={'#2196f3'}\n  animation={true}\n  onPress={(value) =\u003e {this.setState({value:value})}}\n/\u003e\n```\n\nPro\n---\n\n```js\n\u003cRadioForm\n  formHorizontal={true}\n  animation={true}\n\u003e\n  {/* To create radio buttons, loop through your array of options */}\n  {\n    radio_props.map((obj, i) =\u003e (\n      \u003cRadioButton labelHorizontal={true} key={i} \u003e\n        {/*  You can set RadioButtonLabel before RadioButtonInput */}\n        \u003cRadioButtonInput\n          obj={obj}\n          index={i}\n          isSelected={this.state.value3Index === i}\n          onPress={onPress}\n          borderWidth={1}\n          buttonInnerColor={'#e74c3c'}\n          buttonOuterColor={this.state.value3Index === i ? '#2196f3' : '#000'}\n          buttonSize={40}\n          buttonOuterSize={80}\n          buttonStyle={{}}\n          buttonWrapStyle={{marginLeft: 10}}\n        /\u003e\n        \u003cRadioButtonLabel\n          obj={obj}\n          index={i}\n          labelHorizontal={true}\n          onPress={onPress}\n          labelStyle={{fontSize: 20, color: '#2ecc71'}}\n          labelWrapStyle={{}}\n        /\u003e\n      \u003c/RadioButton\u003e\n    ))\n  }  \n\u003c/RadioForm\u003e\n```\n\n# Methods\n\n## updateIsActiveIndex\nUpdating active radio button forcibly\n\n# Props\n\n## RadioForm Component\n### radio_props (Default: `[]`) _*required_\nradio button value and label array\n\n### onPress _*required_\ncallback when radio button clicked.\n\n### initial (Default: `0`)\nThe index of selected radio button. This is used when this component is activated. If you want to\npass initial as asynchronous, you can use updateIsActiveIndex function.\n\u003e If you want to make it empty initially, please pass `-1`\n\n### buttonColor(Default: '#2196f3')\nchange radio button color\n\n```js\n\u003cRadioForm\n  radio_props={radio_props}\n  initial={0}\n  buttonColor={'#50C900'}\n/\u003e\n```\n\n![Demo](./doc/button_color.jpg)\n\n### labelColor(Default: '#000')\nchange label color\n\n```js\n\u003cRadioForm\n  radio_props={radio_props}\n  initial={0}\n  labelColor={'#50C900'}\n/\u003e\n```\n\n\n### formHorizontal(Default: false)\nchange form position\n\n```js\n\u003cRadioForm\n  radio_props={radio_props}\n  initial={0}\n  formHorizontal={true}\n/\u003e\n```\n\n![Demo](./doc/form_horizontal.jpg)\n\n\n### labelHorizontal(Default: true)\nchange label position\n\n```js\n\u003cRadioForm\n  radio_props={radio_props}\n  initial={0}\n  labelHorizontal={false}\n/\u003e\n```\n\n![Demo](./doc/label_horizontal.jpg)\n\n### animation (Default: `true`)\nif you pass false, animation of radio button is disabled\n\n![Demo](./doc/demo_1.gif)\n\n### accessible\nindicates accessibility for the individual radio button input and radio button label components\n\n### accessibilityLabel\nused to set accessibilityLabel for individual radio button input and radio button label components,\nradio button input will have accessibilityLabel = [accessibilityLabel]Input[index]\nradio button label will have accessibilityLabel = [accessibilityLabel]Label[index]\n\n### testID\nused to set testID for individual radio button input and radio button label components,\nradio button input will have testID = [testID]Input[index]\nradio button label will have testID = [testID]Label[index]\n\n## RadioButton Component\n### isSelected\nIf you pass `true` to this param, that button change to selected status.\n\n### labelHorizontal\nchange label position to horizontal\n\n### buttonColor\nThe button color\n\n### selectedButtonColor\nThe selected button color\n\n### labelColor\nThe label color\n\n### style\nThe label style\n\n### wrapStyle\nStyles that are applied to the \u003cView\u003e wrapping the RadioButton component.\n\n## onPress _*required_\ncallback when radio button clicked.\n\n### idSeparator (Default: `|`)\nseparator used for extracting id from accessibilityLabel and testID\n\n### accessible\nindicates accessibility for the wrapped radio button input and radio button label components\n\n### accessibilityLabel\nused to set accessibilityLabel for the wrapped radio button input and radio button label components, needs to be of the format [accessibilityLabel][separator][id]\nradio button input will have accessibilityLabel = [accessibilityLabel]Input[index]\nradio button label will have accessibilityLabel = [accessibilityLabel]Label[index]\n\n### testID\nused to set testID for individual radio button input and radio button label components, needs to be of the format [testID][separator][id]\nradio button input will have testID = [testID]Input[index]\nradio button label will have testID = [testID]Label[index]\n\n```js\n\u003cRadioButton\n  accessible={true}\n  idSeparator=','\n  accessibilityLabel='noteType,1'\n  testID='noteType,1'\n/\u003e\n```\n\n# RadioButtonInput\n### isSelected\n### onPress\n### buttonInnerColor\nThe button inner color\n\n### buttonOuterColor\nThe button inner color\n\n### buttonSize\nThe button size. Width and height will be same length.\n\n### buttonOuterSize\nThe button size of outer. Width and height will be same length.\n\n### buttonStyle\nCustom button style\n\n### buttonWrapStyle\nCustom style for view of button's outside\n\n### accessible\nindicates accessibility for the radio button input component\n\n### accessibilityLabel\nused to set accessibilityLabel (content description / label for Android) for the radio button input component\n\n### testID\nused to set testID (id / name for iOS) for the radio button input component\n\n# RadioButtonLabel\n### labelHorizontal\nIf you pass true, the button and label will be aligned horizontally.\n\n### labelStyle\nIf you pass style, you can change label text style as you want\n\n### labelWrapStyle\nIf you pass style, you can change label wrapper view style as you want\n\n### onPress _*required_\ncallback when radio button clicked.\n\n### accessible\nindicates accessibility for the radio button label component\n\n### accessibilityLabel\nused to set accessibilityLabel (content description / label for Android) for the radio button label component\n\n### testID\nused to set testID (id / name for iOS) for the radio button label component\n\n\n# Contributing\nOf course! Welcome :)\n\nYou can use following command in `example` dir:\n\n```\nnpm run sync\n```\n\nDuring running this command, when you change source to implement/fix something, these changes will sync to `example/node_modules/react-native-simple-radio-button/`. You can check your change using example project easily.\n\n\n# License\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmoschan%2Freact-native-simple-radio-button","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmoschan%2Freact-native-simple-radio-button","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmoschan%2Freact-native-simple-radio-button/lists"}