https://github.com/kamleshchandnani/react-native-radio

https://github.com/kamleshchandnani/react-native-radio

Last synced: 29 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/kamleshchandnani/react-native-radio
• Owner: kamleshchandnani
• License: mit
• Created: 2017-02-22T09:17:16.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2017-02-22T09:18:47.000Z (about 8 years ago)
• Last Synced: 2025-03-26T20:56:58.616Z (about 1 month ago)
• Language: JavaScript
• Size: 103 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React Native Flexi Radio Button

Simple and flexible Radio button for React Native App

## Installation

```

npm i react-native-flexi-radio-button --save

```

## Usage

###Basic Example

[see full basic example](https://github.com/thegamenicorus/react-native-flexi-radio-button/blob/master/examples/BasicExample/app.js)

|![basic_example_ios](https://cloud.githubusercontent.com/assets/21040043/18545904/67b5476e-7b65-11e6-8fc4-8160b39a4ab0.gif)|![basic_example_android](https://cloud.githubusercontent.com/assets/21040043/18545908/69b22f5a-7b65-11e6-87d7-c82c0d3057dd.gif)|

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

```jsx

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

onSelect(index, value){

  this.setState({

    text: `Selected index: ${index} , value: ${value}`

  })

}

render(){

  return(

    

    

       this.onSelect(index, value)}

      >

        

          This is item #1

        

        

          This is item #2

        

        

          This is item #3

        

      

      

      {this.state.text}

      

    

  )

}

```

###Custom Example

[see full custom example](https://github.com/thegamenicorus/react-native-flexi-radio-button/blob/master/examples/CustomExample/app.js)

|![custom_ios](https://cloud.githubusercontent.com/assets/21040043/18546467/53bf8230-7b68-11e6-98f6-98899cce82b3.gif)|![cusom_android](https://cloud.githubusercontent.com/assets/21040043/18546744/cb912fce-7b69-11e6-9331-49e2337dcb04.gif)|

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

modify in render()

```jsx

 this.onSelect(index, value)}

>

  

    

  

   

    Start from item index #1

  

  

    Red Dot

  

  

    Green Dot

  

  

    Blue Dot

  

```

### 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 |

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

| selectedIndex | number | null | initialize selected index of radio group |

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