https://github.com/shankara-subramani/react-native-radio-btn

Custom Radio button component for React Native
https://github.com/shankara-subramani/react-native-radio-btn

custom radio-buttons radio-group radiogroup react-native

Last synced: 21 days ago
JSON representation

Custom Radio button component for React Native

• Host: GitHub
• URL: https://github.com/shankara-subramani/react-native-radio-btn
• Owner: shankara-subramani
• Created: 2019-09-01T12:06:02.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2021-03-20T18:37:23.000Z (almost 4 years ago)
• Last Synced: 2024-04-24T04:11:33.849Z (9 months ago)
• Topics: custom, radio-buttons, radio-group, radiogroup, react-native
• Language: JavaScript
• Homepage: https://snack.expo.io/@i_shankar/react-native-radio-btn
• Size: 7.81 KB
• Stars: 1
• Watchers: 1
• Forks: 1
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React Native Radio Button

Fork of: [react-native-flexi-radio-button](https://github.com/thegamenicorus/react-native-flexi-radio-button)

[Example Expo Snack](https://snack.expo.io/@i_shankar/react-native-radio-btn)

## Installation

```

npm i react-native-radio-btn

```

or

```

yarn add react-native-radio-btn

```

## Usage

```

import {RadioGroup, RadioButton} from 'react-native-radio-btn'

state = {

   radioItems: [

     {

       id: 1,

       label: 'Item 1',

       selected: false,

     },

     {

       id: 2,

       label: 'Item 2',

       selected: false,

     },

     {

       id: 3,

       label: 'Item 3',

       selected: false,

     },

   ],

 };

 onSelect(index, value) {

   console.log(`Selected index: ${index} , value: ${value}`);

 }

render(){

  return(

    

     this.onSelect(index, value)}>

        {this.state.radioItems.map((item, index) => {

          return (

            

          );

        })}

      

    

  )

}

```

### Configuration

##### Radio Group:

| Property | Type | Default | Description |

|---------------|----------|-------------|----------------------------------------------------------------|

| size | number | 20 | Size of the radio button |

| thickness | number | 1 | width of radio button border |

| color | string | '#007AFF' | color of radio button |

| activeColor | string | null | color of radio button when selected|

| highlightColor | string | null | background of radio button after selected |

| selectedIndex | number | null | default selected index of radio group, can be changed to new value or to null for clear selection  |

| style | object | null | Custom styles to be applied if supplied |

| onSelect | function(index, value) | null | function to be invoked when radio button is selected |

##### Radio Button:

| Property | Type | Default | Description |

|-----------|--------|---------|--------------------------------------------|

| value | any |  null | value will be passed on callback `onSelect` as second argument  |

| style | object | null | Styles to be applied on 'RadioButton' component |

| color | string |  same as 'RadioGroup' component | color of radio dot  |

| disabled | bool |  false | If true, disable all interactions for this component.  |

| displayTextColor | string | '#000' | color of label text |

| displayTextActiveColor | string | '#fff' | color of label text when selected |

| prefixColor | string | '#000' | color of prefixes |

| prefixActiveColor | string | '#fff' | color of prefixes when selected |

| prefixWithAlphabet | boolean | false | prefixes label with alphabets (a,b,...z) |

| prefixWithNumbers | boolean | false | prefixes label with numbers (1,2...n) |