React Native Radio Button

Simple Radio and RadioGroup button for React Native App which supplort single select and multiple select.

Installation

using npm

npm i @pratap2210/react-native-radio-button

using yarn

yarn add @pratap2210/react-native-radio-button

Usage

This is format of input

      radioGroups: [
        {
          label: 'Shawshank Redemption',
          uniqueId: 'shawshankRedemption',
        },
        {
          label: 'The Godfather',
          uniqueId: 'theGodfather',
        },
        {
          label: 'The Dark Knight',
          uniqueId: 'theDarkKnight',
        },
        {
          label: 'Saving Private Ryan',
          uniqueId: 'savingPrivateRyan',
        },
        {
          label: 'Schindlers List',
          uniqueId: 'schindlersList',
        },
      ]
        <RadioButtonGroup radioButtons={radioGroups} radioGroupLabel={`How do you see this??`} onRadioGroupChange={this.handleRadioGroupChange} isMultiSelect={false}/>

handleRadioGroupChange = updatedRadioGroups => {
  console.warn("Updated Groups ", updatedRadioGroups);
  this.setState({
    radioGroups: updatedRadioGroups
  });
};

Outputs

Output if multiple is false

[{label:"Shawshank Redemption",uniqueId:"shawshankRedemption",selected:false},
{label:"The Godfather",uniqueId:"theGodfather",selected:false},
{label:"The Dark Knight",uniqueId:"theDarkKnight",selected:true},
{label:"Saving Private Ryan",uniqueId:"savingPrivateRyan",selected:false},
{label:"Schindlers List",uniqueId:"schindlersList",selected:false}}

Output if multiple is true

[
  { label: "Shawshank Redemption", uniqueId: "shawshankRedemption" },
  { label: "The Godfather", uniqueId: "theGodfather", selected: false },
  { label: "The Dark Knight", uniqueId: "theDarkKnight", selected: true },
  {
    label: "Saving Private Ryan",
    uniqueId: "savingPrivateRyan",
    selected: true
  },
  { label: "Schindlers List", uniqueId: "schindlersList" }
];

Configuration

Radio Group:

Property	Type	Default	Description
size	number	24	Size of the radio button
thickness	number	2	width of radio button border
color	string	'#007AFF'	color of radio button
isMultiSelect	boolean	false	is radio button multiple selectable
radioGroupLabel	string	null	Label for the Radio group
radioGroupLabelStyle	object	null	Custom styles to be applied if supplied
radioLabelStyle	object	null	Custom styles to be applied if supplied
radioStyle	object	null	Custom styles to be applied if supplied
style	object	null	Custom styles to be applied if supplied
onRadioGroupChange	updatedValue	null	function to be invoked when radio button is selected or changed

Motivated from

How to implement radio button in React Native

Checkbox in react by Harshal

react-native-flexi-radio-button