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.
3.1k Dec 31, 2022
69 Nov 22, 2022
7 Mar 11, 2022
1 Nov 15, 2021
470 Nov 6, 2022
284 Jan 7, 2023
39 Dec 28, 2022
356 Dec 25, 2022
283 Dec 7, 2022
9 Dec 3, 2021
1 Dec 20, 2021
7 Oct 28, 2022
41 Sep 4, 2022
3 Mar 23, 2022
1 Nov 26, 2021
177 Sep 24, 2022
899 Jan 5, 2023
190 Feb 9, 2022
22 Dec 14, 2022