{"id":4126,"url":"https://github.com/thegamenicorus/react-native-flexi-radio-button","last_synced_at":"2025-04-05T23:11:14.204Z","repository":{"id":57337064,"uuid":"67942425","full_name":"thegamenicorus/react-native-flexi-radio-button","owner":"thegamenicorus","description":"Simple and flexible Radio button for React Native App","archived":false,"fork":false,"pushed_at":"2018-08-30T14:17:53.000Z","size":117,"stargazers_count":158,"open_issues_count":20,"forks_count":64,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-25T00:52:11.500Z","etag":null,"topics":["radio-buttons","react-native"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-flexi-radio-button","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/thegamenicorus.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":"2016-09-11T16:57:20.000Z","updated_at":"2024-01-22T05:57:18.000Z","dependencies_parsed_at":"2022-09-12T13:42:59.922Z","dependency_job_id":null,"html_url":"https://github.com/thegamenicorus/react-native-flexi-radio-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/thegamenicorus%2Freact-native-flexi-radio-button","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thegamenicorus%2Freact-native-flexi-radio-button/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thegamenicorus%2Freact-native-flexi-radio-button/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thegamenicorus%2Freact-native-flexi-radio-button/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thegamenicorus","download_url":"https://codeload.github.com/thegamenicorus/react-native-flexi-radio-button/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247411235,"owners_count":20934653,"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-01-05T20:17:01.895Z","updated_at":"2025-04-05T23:11:14.177Z","avatar_url":"https://github.com/thegamenicorus.png","language":"JavaScript","funding_links":[],"categories":["Components","JavaScript","Others"],"sub_categories":["UI"],"readme":"# React Native Flexi Radio Button\nSimple and flexible Radio button for React Native App\n\n## Installation\n```\nnpm i react-native-flexi-radio-button --save\n```\n\n## Usage\n\n###Basic Example\n[see full basic example](https://github.com/thegamenicorus/react-native-flexi-radio-button/blob/master/examples/BasicExample/app.js)\n\n|![basic_example_ios](https://cloud.githubusercontent.com/assets/21040043/18545904/67b5476e-7b65-11e6-8fc4-8160b39a4ab0.gif)|![basic_example_android](https://cloud.githubusercontent.com/assets/21040043/18545908/69b22f5a-7b65-11e6-87d7-c82c0d3057dd.gif)|\n|---------------|----------|\n```jsx\n\nimport {RadioGroup, RadioButton} from 'react-native-flexi-radio-button'\n\nonSelect(index, value){\n  this.setState({\n    text: `Selected index: ${index} , value: ${value}`\n  })\n}\n\nrender(){\n  return(\n    \u003cView style={styles.container}\u003e\n    \n      \u003cRadioGroup\n        onSelect = {(index, value) =\u003e this.onSelect(index, value)}\n      \u003e\n        \u003cRadioButton value={'item1'} \u003e\n          \u003cText\u003eThis is item #1\u003c/Text\u003e\n        \u003c/RadioButton\u003e\n\n        \u003cRadioButton value={'item2'}\u003e\n          \u003cText\u003eThis is item #2\u003c/Text\u003e\n        \u003c/RadioButton\u003e\n\n        \u003cRadioButton value={'item3'}\u003e\n          \u003cText\u003eThis is item #3\u003c/Text\u003e\n        \u003c/RadioButton\u003e\n      \u003c/RadioGroup\u003e\n      \n      \u003cText style={styles.text}\u003e{this.state.text}\u003c/Text\u003e\n      \n    \u003c/View\u003e\n  )\n}\n```\n###Custom Example\n[see full custom example](https://github.com/thegamenicorus/react-native-flexi-radio-button/blob/master/examples/CustomExample/app.js)\n\n|![custom_ios](https://cloud.githubusercontent.com/assets/21040043/18546467/53bf8230-7b68-11e6-98f6-98899cce82b3.gif)|![cusom_android](https://cloud.githubusercontent.com/assets/21040043/18546744/cb912fce-7b69-11e6-9331-49e2337dcb04.gif)|\n|---------------|----------|\n\n\nmodify in render()\n\n```jsx\n\u003cRadioGroup\n  size={24}\n  thickness={2}\n  color='#9575b2'\n  highlightColor='#ccc8b9'\n  selectedIndex={1}\n  onSelect = {(index, value) =\u003e this.onSelect(index, value)}\n\u003e\n  \u003cRadioButton \n    style={{alignItems:'center'}}\n    value='Yo!! I am a cat.' \n  \u003e\n    \u003cImage\n      style={{width:100, height: 100}}\n      source={{uri:'https://cloud.githubusercontent.com/assets/21040043/18446298/fa576974-794b-11e6-8430-b31b30846084.jpg'}}\n    /\u003e\n  \u003c/RadioButton\u003e\n\n  \u003cRadioButton \n    value='index1'\n  \u003e \n    \u003cText\u003eStart from item index #1\u003c/Text\u003e\n  \u003c/RadioButton\u003e\n\n  \u003cRadioButton \n    value='red color'\n    color='red'\n  \u003e\n    \u003cText\u003eRed Dot\u003c/Text\u003e\n  \u003c/RadioButton\u003e\n\n  \u003cRadioButton \n    value='green color'\n    color='green'\n  \u003e\n    \u003cText\u003eGreen Dot\u003c/Text\u003e\n  \u003c/RadioButton\u003e\n\n  \u003cRadioButton \n    value='blue color'\n    color='blue'\n  \u003e\n    \u003cText\u003eBlue Dot\u003c/Text\u003e\n  \u003c/RadioButton\u003e\n\u003c/RadioGroup\u003e\n```\n\n### Configuration\n##### Radio Group:\n| Property | Type | Default | Description |\n|---------------|----------|-------------|----------------------------------------------------------------|\n| size | number | 20 | Size of the radio button |\n| thickness | number | 1 | width of radio button border |\n| color | string | '#007AFF' | color of radio button |\n| activeColor | string | null | color of radio button when selected|\n| highlightColor | string | null | background of radio button after selected |\n| selectedIndex | number | null | default selected index of radio group, can be changed to new value or to null for clear selection  |\n| style | object | null | Custom styles to be applied if supplied |\n| onSelect | function(index, value) | null | function to be invoked when radio button is selected |\n\n##### Radio Button:\n\n| Property | Type | Default | Description |\n|-----------|--------|---------|--------------------------------------------|\n| value | any |  null | value will be passed on callback `onSelect` as second argument  |\n| style | object | null | Styles to be applied on 'RadioButton' component |\n| color | string |  same as 'RadioGroup' component | color of radio dot  |\n| disabled | bool |  false | If true, disable all interactions for this component.  |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthegamenicorus%2Freact-native-flexi-radio-button","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthegamenicorus%2Freact-native-flexi-radio-button","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthegamenicorus%2Freact-native-flexi-radio-button/lists"}