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

|!basic_example_ios|!basic_example_android|
|---------------|----------|
`jsx

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

onSelect(index, value){
this.setState({
text: Selected index: ${index} , value: ${value}
})
}

render(){
return(


onSelect = {(index, value) => 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

|!custom_ios|!cusom_android|
|---------------|----------|


modify in render()

`jsx
size={24}
thickness={2}
color='#9575b2'
highlightColor='#ccc8b9'
selectedIndex={1}
onSelect = {(index, value) => this.onSelect(index, value)}
>
style={{alignItems:'center'}}
value='Yo!! I am a cat.'
>
style={{width:100, height: 100}}
source={{uri:'https://cloud.githubusercontent.com/assets/21040043/18446298/fa576974-794b-11e6-8430-b31b30846084.jpg'}}
/>


value='index1'
>
Start from item index #1


value='red color'
color='red'
>
Red Dot


value='green color'
color='green'
>
Green Dot


value='blue color'
color='blue'
>
Blue Dot


`

$3

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