https://github.com/thegamenicorus/react-native-flexi-radio-button

Simple and flexible Radio button for React Native App
https://github.com/thegamenicorus/react-native-flexi-radio-button

radio-buttons react-native

Last synced: 6 days ago
JSON representation

Simple and flexible Radio button for React Native App

• Host: GitHub
• URL: https://github.com/thegamenicorus/react-native-flexi-radio-button
• Owner: thegamenicorus
• License: mit
• Created: 2016-09-11T16:57:20.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2018-08-30T14:17:53.000Z (over 6 years ago)
• Last Synced: 2024-04-25T00:52:11.500Z (9 months ago)
• Topics: radio-buttons, react-native
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/react-native-flexi-radio-button
• Size: 114 KB
• Stars: 158
• Watchers: 2
• Forks: 64
• Open Issues: 20
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-native - react-native-flexi-radio-button ★111 - Simple and flexible Radio button for React Native (Components / UI)
• awesome-reactnative-ui - react-native-flexi-radio-button - 7b65-11e6-8fc4-8160b39a4ab0.gif)| (Others)
• awesome-react-native - react-native-flexi-radio-button ★111 - Simple and flexible Radio button for React Native (Components / UI)
• awesome-reactnative-ui - react-native-flexi-radio-button - 7b65-11e6-8fc4-8160b39a4ab0.gif)| (Others)
• awesome-react-native - react-native-flexi-radio-button ★111 - Simple and flexible Radio button for React Native (Components / UI)
• awesome-react-native - react-native-flexi-radio-button ★111 - Simple and flexible Radio button for React Native (Components / UI)
• awesome-react-native-ui - react-native-flexi-radio-button ★7 - Simple and flexible Radio button for React Native (Components / UI)

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 |

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