react-native-custom-radio-buttons

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.