/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, { useMemo, useState } from 'react';
import RadioGroup from 'react-native-radio-buttons-group';

export default function App() {

    const radioButtons = useMemo(() => ([
        {
            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'
        }
    ]), []);

    const [selectedId, setSelectedId] = useState();

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

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

export default function App() {

    const radioButtons: RadioButtonProps[] = useMemo(() => ([
        {
            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'
        }
    ]), []);

    const [selectedId, setSelectedId] = useState<string | undefined>();

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

}

Props

RadioButton

Key Type Required Default Valid Values
accessibilityLabel string no Value of label any string
borderColor string no color css color formats
borderSize number 2 positive numbers
color string no #444 css color formats
containerStyle object no react style
description ReactNode or string no any react node or string
descriptionStyle object no react style, applied only if description is a string
disabled boolean no false true / false
id string yes unique string
label ReactNode or string no any react node or string
labelStyle object no react style, applied only if label is a string
layout enum no row row / column
onPress function no any function
selected boolean no false true / false
size number no 24 positive numbers
testID string no any string
value string no any string

RadioGroup

Key Type Required Default Valid Values
accessibilityLabel string no any string
containerStyle object no react style
labelStyle object no react style
layout enum no column row / column
onPress function no any function
radioButtons array yes array of RadioButton objects
selectedId string no unique string
testID string no any string
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