/react-native-custom-radio-buttons

Easy and simple to use Radio Buttons for your React Native Application.

Primary LanguageJavaScript

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.