{"id":25915932,"url":"https://github.com/marouanekadiri/radio-react-native","last_synced_at":"2025-03-03T12:18:31.167Z","repository":{"id":65479723,"uuid":"124668770","full_name":"marouanekadiri/Radio-react-native","owner":"marouanekadiri","description":"Flexible and Easy Radio Form components for react native","archived":false,"fork":false,"pushed_at":"2018-05-03T15:02:21.000Z","size":16,"stargazers_count":5,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-25T02:03:47.696Z","etag":null,"topics":["radio-buttons","radiobutton","radioform","radiogroup","react-native"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/marouanekadiri.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":"2018-03-10T15:32:43.000Z","updated_at":"2024-01-22T06:07:18.000Z","dependencies_parsed_at":"2023-01-25T18:30:47.424Z","dependency_job_id":null,"html_url":"https://github.com/marouanekadiri/Radio-react-native","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/marouanekadiri%2FRadio-react-native","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marouanekadiri%2FRadio-react-native/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marouanekadiri%2FRadio-react-native/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marouanekadiri%2FRadio-react-native/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marouanekadiri","download_url":"https://codeload.github.com/marouanekadiri/Radio-react-native/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241661440,"owners_count":19998951,"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","radiobutton","radioform","radiogroup","react-native"],"created_at":"2025-03-03T12:18:30.592Z","updated_at":"2025-03-03T12:18:31.159Z","avatar_url":"https://github.com/marouanekadiri.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## **radio-react-native**\n\na react native javascript components that allow you to create a Radio Button group.\n\n\n\n\n## Installation\n\n\t    npm install --save radio-react-native\n\n## Demo\n\n![ezgif-1-e0ecd0dd6a](https://user-images.githubusercontent.com/15144618/37248148-b26296c0-24c1-11e8-8789-5b7984e0aed2.gif)\n\n\n## Getting Started\n\n    import {Radio, RadioGroup,RadioButton} from \"radio-react-native\";\n    \u003cRadioGroup \n\t    defaultChoice={1} \n\t    onChoose={(value,index)=\u003ethis.onChooseGender(value,index)}\n\t    \u003e\n      \u003cRadioButton value={\"M\"}\u003e\n\t      \u003cText\u003eMale\u003c/Text\u003e\u003cRadio/\u003e \n      \u003c/RadioButton\u003e\n      \u003cRadioButton value={\"F\"}\u003e\n         \u003cRadio/\u003e\u003cText\u003e Female\u003c/Text\u003e\n      \u003c/RadioButton\u003e\n    \u003c/RadioGroup\u003e\n\n\n## Examples\n\nThe Demo section shows Three different examples of the RadioGroup. In this section, I will show you how to use the radio-react-native library.\n\n### Gender example\n\n    \u003cRadioGroup \n\t    defaultChoice={1} \n\t    style={styles.flexRow} \n\t    onChoose={(value,index)=\u003ethis.onChooseGender(value,index)}\u003e  \n\t    \u003cRadioButton \n\t\t    style={[styles.flexRow,styles.center,styles.halfWidth]}\n\t\t    value={\"M\"}\u003e\n\t      \u003cText style={styles.text}\u003eMale  \u003c/Text\u003e\n\t      \u003cRadio/\u003e \n\t    \u003c/RadioButton\u003e\n     \u003cRadioButton \n\t     style={[styles.flexRow,styles.center,styles.halfWidth]}\n\t      value={\"F\"}\u003e  \n\t      \u003cRadio/\u003e\n\t      \u003cText style={styles.text}\\\u003e Female\u003c/Text\u003e\n      \u003c/RadioButton\u003e\n\t\u003c/RadioGroup\u003e\n\nIn this example, we have a radio form that contains two choices (Male, female). Two RadioButtons wrapped inside the Radio Group. \nOnce you click on a radio the event OnChoose is emitted and you can get the value and the index of the choosen radioButton.\n\n### Age example\n\n    const ages = [  \n\t    {id:1,age:'0 - 2',label:'baby'},\n\t    {id:2,age:'3 - 8',label:'kid'},\n\t    {id:'3',age:'9 - 16',label:'teenager'},\n\t    {id:4,age:'17 - 24',label:'adult'}\n    ];\n    \n    \u003cRadioGroup \n\t    defaultChoice={3} \n\t    onChoose={(value,index)=\u003ethis.onChooseAge(value,index)}\u003e\n\t    {ages.map((age)=\u003e \n\t\t    \u003cRadioButton \n\t\t\t    key={age.id} \n\t\t\t    style={[styles.flexRow,styles.start]} \n\t\t\t    value={age}\u003e\n\t\t\t    \u003cRadio/\u003e\n\t\t\t    \u003cText style={styles.text}\u003e{age.label} ({age.age} years old)\u003c/Text\u003e\n\t\t\t\u003c/RadioButton\u003e\n\t\t)}  \n\t\t\u003c/RadioGroup\u003e\nYou can also iterate on a list and render a radio Form to choose between many options.\n\n### Custom Radio example\n\n    class ThumpsUp extends Component\u003cProps\u003e{  \n  \n\t    render(){  \n\t        const {checked} = this.props;  \n\t        if(checked){  \n\t            return \u003cIcon \n\t\t\t            name={\"ios-thumbs-up\"} \n\t\t\t            style={{color:'blue'}}/\u003e  \n\t            }\n\t            else{  \n\t            return \u003cIcon \n\t\t\t            name={\"ios-thumbs-up-outline\"} /\u003e  \n\t            }  \n\t\t    }  \n    }\n    \n    class ThumpsDown extends Component\u003cProps\u003e{  \n  \n\t    render(){  \n\t        const {checked} = this.props;  \n\t        if(checked){  \n\t            return \u003cIcon \n\t\t\t            name={\"ios-thumbs-down\"} \n\t\t\t            style={{color:'red'}}/\u003e  \n\t            }\n\t            else{  \n\t            return \u003cIcon \n\t\t\t            name={\"ios-thumbs-down-outline\"} /\u003e  \n\t            }  \n\t\t    }  \n    }\n\n\n ThumpsUp and ThumpsDown are two component defined to be used as a clickable radio in our Radio group.\nWe need to use the checked props to return the representation of our Radio instead of the default one.\n\n\n    \u003cRadioGroup \n\t    defaultChoice={0} \n\t    onChoose={(value,index)=\u003ethis.onChooseLike(value,index)}\u003e\n\t    \u003cRadioButton \n\t\t    style={[styles.flexRow,styles.start]}\n\t\t    value={true}\u003e\n\t\t    \n\t\t    \u003cRadio CustomComponent={ThumpsUp}/\u003e\n\t\t    \u003cText style={styles.text}\\\u003e Yes\u003c/Text\u003e\n\t\t    \n\t    \u003c/RadioButton\u003e\n\t    \n\t    \u003cRadioButton \n\t\t    style={[styles.flexRow,styles.start]} \n\t\t    value={false}\u003e\n\t\t    \n\t\t    \u003cRadio CustomComponent={ThumpsDown}/\u003e\n\t\t    \u003cText style={styles.text}\\\u003e No\u003c/Text\u003e\n\t\t    \n\t    \u003c/RadioButton\u003e\n    \u003c/RadioGroup\u003e\n\nIn this example, we customize the radio to render ThumpsUp adn ThumpsDown instead of the default Radio.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarouanekadiri%2Fradio-react-native","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarouanekadiri%2Fradio-react-native","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarouanekadiri%2Fradio-react-native/lists"}