/react-native-radio-button

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

Primary LanguageJavaScript

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

single

[{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

multiple

[
  { 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