React Native Simple Radio Buttons
Easy and simple to use Radio Buttons for your React Native Application.
Installation
npm i react-native-custom-radio-buttons
Components
- RadioButtons
- Container to create a radio button.
Props
- text: Accepts string to show as option in Radio Button
- setOption: Callback to change selected option
- selected: Set which option is selected
Optional Props
- radioButtonBorderColor: Set the Radio Button Oultine Color (Default: #000)
- radioButtonSize: Sets the size of the radio button (Default: 20)
- selectedRadioButtonColor: Sets the color of the radio button which has been selected (Default: #000)
- optionTextStyling: Sets custom styling for the option Text next to the Radio Button
Examples
1. Using without Optional Props
Import
import RadioButtons from "react-native-custom-radio-buttons"
Usage
function Example(){
const [option, setOption] = useState("");
const options = ["Option 1", "Option 2", "Option 3"];
return (
<View style={styles.container}>
<View style={{ width: "80%" }}>
{options.map((obj) => (
<RadioButtons
text={obj}
setOption={(val) => setOption(val)}
selected={option}
key={obj}
/>
))}
</View>
<View style={{ marginTop: 20 }}>
<Text>Selected Option is: {option}</Text>
</View>
</View>
}
Example Screenshot
2. Using with Optional Props
Import
import RadioButtons from "react-native-custom-radio-buttons"
Usage
function Example(){
const [option, setOption] = useState("");
const options = ["Option 1", "Option 2", "Option 3"];
return (
<View style={styles.container}>
<View style={{ width: "80%" }}>
{options.map((obj) => (
<RadioButtons
text={obj}
setOption={(val) => setOption(val)}
selected={option}
radioButtonBorderColor="#2ecc71"
radioButtonSize={24}
selectedRadioButtonColor="#2ecc71"
optionTextStyling={{fontSize: 24, color: "#2ecc71"}}
key={obj}
/>
))}
</View>
<View style={{ marginTop: 20 }}>
<Text>Selected Option is: {option}</Text>
</View>
</View>
}
Example Screenshot
Issues and Contribution
Feel free to add any new feature, open issues or fork and create your own version of it with proper crediting.
136 Dec 30, 2022
1.5k Dec 23, 2022
130 Dec 9, 2022
16 Dec 23, 2022
82 Dec 14, 2022
4 Mar 27, 2022
1 Jul 23, 2022
32.4k Dec 29, 2022
4 Jun 5, 2022
180 Dec 11, 2022