Easy and simple to use Radio Buttons for your React Native Application.
npm i react-native-custom-radio-buttons
- RadioButtons
- Container to create a radio button.
- text: Accepts string to show as option in Radio Button
- setOption: Callback to change selected option
- selected: Set which option is selected
- 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
import RadioButtons from "react-native-custom-radio-buttons"
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>
}
import RadioButtons from "react-native-custom-radio-buttons"
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>
}
Feel free to add any new feature, open issues or fork and create your own version of it with proper crediting.