react-native-custom-radio-buttons v1.0.1

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

Props

Optional Props

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.