🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more

react-native-flexi-radio-button

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-native-flexi-radio-button

Radio button component for React Native

0.2.2
latest
Version published
Weekly downloads
1.8K
2.31%
Maintainers
1
Weekly downloads
 
Created

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_iosbasic_example_android

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

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

render(){
  return(
    <View style={styles.container}>
    
      <RadioGroup
        onSelect = {(index, value) => this.onSelect(index, value)}
      >
        <RadioButton value={'item1'} >
          <Text>This is item #1</Text>
        </RadioButton>

        <RadioButton value={'item2'}>
          <Text>This is item #2</Text>
        </RadioButton>

        <RadioButton value={'item3'}>
          <Text>This is item #3</Text>
        </RadioButton>
      </RadioGroup>
      
      <Text style={styles.text}>{this.state.text}</Text>
      
    </View>
  )
}

###Custom Example see full custom example

custom_ioscusom_android

modify in render()

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

  <RadioButton 
    value='index1'
  > 
    <Text>Start from item index #1</Text>
  </RadioButton>

  <RadioButton 
    value='red color'
    color='red'
  >
    <Text>Red Dot</Text>
  </RadioButton>

  <RadioButton 
    value='green color'
    color='green'
  >
    <Text>Green Dot</Text>
  </RadioButton>

  <RadioButton 
    value='blue color'
    color='blue'
  >
    <Text>Blue Dot</Text>
  </RadioButton>
</RadioGroup>

Configuration

Radio Group:
PropertyTypeDefaultDescription
sizenumber20Size of the radio button
thicknessnumber1width of radio button border
colorstring'#007AFF'color of radio button
activeColorstringnullcolor of radio button when selected
highlightColorstringnullbackground of radio button after selected
selectedIndexnumbernulldefault selected index of radio group, can be changed to new value or to null for clear selection
styleobjectnullCustom styles to be applied if supplied
onSelectfunction(index, value)nullfunction to be invoked when radio button is selected
Radio Button:
PropertyTypeDefaultDescription
valueanynullvalue will be passed on callback onSelect as second argument
styleobjectnullStyles to be applied on 'RadioButton' component
colorstringsame as 'RadioGroup' componentcolor of radio dot
disabledboolfalseIf true, disable all interactions for this component.

FAQs

Package last updated on 25 Oct 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts