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

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'
/>

Getting Started

Just a sneak peek (lots more can be done)

Installation

Usage

JavaScript Example

App.js

TypeScript Example

App.tsx

Props

RadioButton

RadioGroup

Horizontal (side by side)

Contributions

License

Stargazers over time

Sponsor