thegamenicorus / React Native Flexi Radio Button
Licence: mit
Simple and flexible Radio button for React Native App
Stars: ✭ 151
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Native Flexi Radio Button
RadioGroup
支持多行多列等复杂布局的RadioGroup,重点是!!使用简单!!,称之为Multi_RadioGroup_Plus吧
Stars: ✭ 26 (-82.78%)
Mutual labels: radio-buttons
Xamarin.forms.inputkit
CheckBox, Radio Button, Labeled Slider, Dropdowns etc.
Stars: ✭ 372 (+146.36%)
Mutual labels: radio-buttons
Examples Gtkmm
Shows how to use Gtkmm controls by programming code (c++17).
Stars: ✭ 23 (-84.77%)
Mutual labels: radio-buttons
Togglebuttongroup
A group of flowable toggle buttons, with multiple / single selection support and button customization.
Stars: ✭ 343 (+127.15%)
Mutual labels: radio-buttons
React Native Radio Buttons
[DEPRECATED] A Radio-button like logic wrapper for React Native
Stars: ✭ 418 (+176.82%)
Mutual labels: radio-buttons
react-native-radio-buttons-group
Simple, best and easy to use radio buttons for react native apps.
Stars: ✭ 145 (-3.97%)
Mutual labels: radio-buttons
Pretty Checkbox
A pure CSS library to beautify checkbox and radio buttons.
Stars: ✭ 1,708 (+1031.13%)
Mutual labels: radio-buttons
Segmentedbutton
Segmented Control with animation for Android API 12+
Stars: ✭ 352 (+133.11%)
Mutual labels: radio-buttons
Magic Input
CSS3 Styles for Checkbox and Radio Button inputs look prettier. with only one element.
Stars: ✭ 81 (-46.36%)
Mutual labels: radio-buttons
homebridge-switcheroo
Simple on/off or multiswitch radio buttons for http reqs. Useful for lights, A/V systems, home automation, whatever
Stars: ✭ 38 (-74.83%)
Mutual labels: radio-buttons
Lthradiobutton
A radio button with a pretty animation
Stars: ✭ 303 (+100.66%)
Mutual labels: radio-buttons
Form Js
Easily create web forms. Supports Meteor, AngularJS, React, Polymer and any CSS library, e.g. Bootstrap.
Stars: ✭ 9 (-94.04%)
Mutual labels: radio-buttons
Selectionlist
Simple single-selection or multiple-selection checklist, based on UITableView
Stars: ✭ 93 (-38.41%)
Mutual labels: radio-buttons
Quicktableviewcontroller
A simple way to create a UITableView for settings in Swift.
Stars: ✭ 417 (+176.16%)
Mutual labels: radio-buttons
Radio Group
845 byte WAI-ARIA 1.1 compliant radio group React component
Stars: ✭ 133 (-11.92%)
Mutual labels: radio-buttons
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
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
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:
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. |
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].