
Security News
Browserslist-rs Gets Major Refactor, Cutting Binary Size by Over 1MB
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.
react-native-flexi-radio-button
Advanced tools
Simple and flexible Radio button for React Native App
npm i react-native-flexi-radio-button --save
###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>
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 |
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. |
FAQs
Did you know?
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.
Security News
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.
Research
Security News
Eight new malicious Firefox extensions impersonate games, steal OAuth tokens, hijack sessions, and exploit browser permissions to spy on users.
Security News
The official Go SDK for the Model Context Protocol is in development, with a stable, production-ready release expected by August 2025.