React Native Radio Buttons Group

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

Getting Started

Just a sneak peek (lots more can be done)

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

Sponsor