/react-native-radio-buttons-group

Simple, best and easy to use radio buttons for react native apps.

Primary LanguageTypeScriptMIT LicenseMIT

React Native Radio Buttons Group

Simple, best and easy to use radio buttons for react native apps.

npm LICENSE MIT

NPM

Getting Started

Just a sneak peek (lots more can be done)

DEMO

Installation

npm i react-native-radio-buttons-group --save

or

yarn add react-native-radio-buttons-group

Usage

Javascript Example
App.js
import React, { useState } from 'react';
import RadioGroup from 'react-native-radio-buttons-group';

export default function App() {

    const [radioButtons, setRadioButtons] = useState([
        {
            id: '1', // acts as primary key, should be unique and non-empty string
            label: 'Option 1',
            value: 'option1'
        },
        {
            id: '2',
            label: 'Option 2',
            value: 'option2'
        }
    ]);

    function onPressRadioButton(radioButtonsArray) {
        setRadioButtons(radioButtonsArray);
    }

    return (
        <RadioGroup 
            radioButtons={radioButtons} 
            onPress={onPressRadioButton} 
        />
    );

}
Typescript Example
App.tsx
import React, { useState } from 'react';
import RadioGroup, {RadioButtonProps} from 'react-native-radio-buttons-group';

export default function App() {

    const [radioButtons, setRadioButtons] = useState<RadioButtonProps[]>([
        {
            id: '1', // acts as primary key, should be unique and non-empty string
            label: 'Option 1',
            value: 'option1'
        },
        {
            id: '2',
            label: 'Option 2',
            value: 'option2'
        }
    ]);

    function onPressRadioButton(radioButtonsArray: RadioButtonProps[]) {
        setRadioButtons(radioButtonsArray);
    }

    return (
        <RadioGroup 
            radioButtons={radioButtons} 
            onPress={onPressRadioButton} 
        />
    );

}

Props

RadioButton

Key Type Required Default Valid Values
borderColor string no color css color formats
borderSize number 2 positive numbers
color string no #444 css color formats
focusColor string no css color formats
containerStyle object no react style
description string no any string
descriptionStyle object no react style
disabled boolean no false true / false
id string yes unique string
label string no any string
labelStyle object no react style
layout enum no row row / column
onPress function no any function
onFocus function no any function
onBlur function no any function
selected boolean no false true / false
size number no 24 positive numbers
value string no any string

RadioGroup

Key Type Required Default Valid Values
containerStyle object no react style
layout enum no column row / column
onPress function no any function
radioButtons array yes arrary of RadioButton objects
Horizontal (side by side)
<RadioGroup 
    radioButtons={radioButtons} 
    onPress={onPressRadioButton} 
    layout='row'
/>

Contributions

Fork and create a pull request

License

MIT License

Stargazers over time

Stargazers over time

Sponsor

Buy Me A Coffee