Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

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: 2 months ago
JSON representation

Simple and flexible Radio button for React Native App

Lists

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