https://github.com/marouanekadiri/radio-react-native
Flexible and Easy Radio Form components for react native
https://github.com/marouanekadiri/radio-react-native
radio-buttons radiobutton radioform radiogroup react-native
Last synced: over 1 year ago
JSON representation
Flexible and Easy Radio Form components for react native
- Host: GitHub
- URL: https://github.com/marouanekadiri/radio-react-native
- Owner: marouanekadiri
- Created: 2018-03-10T15:32:43.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-05-03T15:02:21.000Z (about 8 years ago)
- Last Synced: 2025-02-25T02:03:47.696Z (over 1 year ago)
- Topics: radio-buttons, radiobutton, radioform, radiogroup, react-native
- Language: JavaScript
- Homepage:
- Size: 15.6 KB
- Stars: 5
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## **radio-react-native**
a react native javascript components that allow you to create a Radio Button group.
## Installation
npm install --save radio-react-native
## Demo
## Getting Started
import {Radio, RadioGroup,RadioButton} from "radio-react-native";
this.onChooseGender(value,index)}
>
Male
Female
## Examples
The Demo section shows Three different examples of the RadioGroup. In this section, I will show you how to use the radio-react-native library.
### Gender example
this.onChooseGender(value,index)}>
Male
Female
In this example, we have a radio form that contains two choices (Male, female). Two RadioButtons wrapped inside the Radio Group.
Once you click on a radio the event OnChoose is emitted and you can get the value and the index of the choosen radioButton.
### Age example
const ages = [
{id:1,age:'0 - 2',label:'baby'},
{id:2,age:'3 - 8',label:'kid'},
{id:'3',age:'9 - 16',label:'teenager'},
{id:4,age:'17 - 24',label:'adult'}
];
this.onChooseAge(value,index)}>
{ages.map((age)=>
{age.label} ({age.age} years old)
)}
You can also iterate on a list and render a radio Form to choose between many options.
### Custom Radio example
class ThumpsUp extends Component{
render(){
const {checked} = this.props;
if(checked){
return
}
else{
return
}
}
}
class ThumpsDown extends Component{
render(){
const {checked} = this.props;
if(checked){
return
}
else{
return
}
}
}
ThumpsUp and ThumpsDown are two component defined to be used as a clickable radio in our Radio group.
We need to use the checked props to return the representation of our Radio instead of the default one.
this.onChooseLike(value,index)}>
Yes
No
In this example, we customize the radio to render ThumpsUp adn ThumpsDown instead of the default Radio.