3.0.6 • Published 12 months ago

react-native-radio-buttons-group-with-test-ids v3.0.6

Weekly downloads
-
License
MIT
Repository
github
Last release
12 months ago

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

KeyTypeRequiredDefaultValid Values
borderColorstringnocolorcss color formats
borderSizenumber2positive numbers
colorstringno#444css color formats
containerStyleobjectnoreact style
descriptionstringnoany string
descriptionStyleobjectnoreact style
disabledbooleannofalsetrue / false
idstringyesunique string
labelstringnoany string
labelStyleobjectnoreact style
layoutenumnorowrow / column
onPressfunctionnoany function
selectedbooleannofalsetrue / false
sizenumberno24positive numbers
valuestringnoany string

RadioGroup

KeyTypeRequiredDefaultValid Values
containerStyleobjectnoreact style
layoutenumnocolumnrow / column
onPressfunctionnoany function
radioButtonsarrayyesarrary 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