react-native-radio-buttons
A react component to implement radio buttons-like behaviors: multiple options, only one option can be selected at a given time.
Both the container and option nodes are customizable. Comes with SegmentedControls clone, only more customizable (see below, animations to come).
Install
npm i -S react-native-radio-buttons
Demo app
git clone git@github.com:ArnaudRinquin/react-native-radio-buttons.gitcd react-native-radio-buttonsnpm run demo
Usage
Here is an extensive overview of the component usage.
import RadioButtons from 'react-native-radio-buttons' // ... { const options = "Option 1" "Option 2" ; { this; } { const style = selected ? fontWeight: 'bold' : ; return <TouchableWithoutFeedback = => <Text =>option</Text> </TouchableWithoutFeedback> ; } { return <View>optionNodes</View>; } return <View => <RadioButtons = = = = = /> <Text>Selected option: thisstateselectedOption || 'none'</Text> </View>;}
Will render this
Props
options - []
mandatory array of anything, will be passed torenderOption
onSelection - function(selectedOption, selectedIndex){}
option selection callbackselectedIndex - index
the initially selected index, optional.selectedOption - option
the initially selected option, optionalrenderOption - function(option, selected, onSelect, index)
should return an option node, default generate<Text>
nodes and adds{fontWeight:'bold'}
to the selected option.renderContainer - function(optionsNodes)
must render the container, default is RadioButtons.renderVerticalContainer (see below)optionStyle
- optional styles to be applied to the<Text>
elements of the options themselves.optionContainerStyle
- optional styles to be applied to the the<View>
that contain the options.testOptionEqual- function(selectedOption, currentOption){}
optional compares and returns bool.
Full JavaScript SegmentedControls clone
This library comes with a clone of the native SegmentedControls
, based on RadioButtons
.
import SegmentedControls from 'react-native-radio-buttons' // ... <SegmentedControls = = =/>
You override all the defaults through the props.
<SegmentedControls = = = = = // = = = =/>
Here is the list of the props you might override:
const IOS_BLUE = '#007AFF';const IOS_WHITE = '#ffffff'; const DEFAULTS = direction: 'row' tint: IOS_BLUE backTint: IOS_WHITE paddingTop: 5 paddingBottom: 5 textAlign: 'center' selectedTint: IOS_WHITE selectedBackgroundColor: IOS_WHITE separatorTint: IOS_BLUE separatorWidth: 1 containerBorderTint: IOS_BLUE containerBorderWidth: 1 containerBorderRadius: 5
You can also specify containerStyle
, optionContainerStyle
, and optionStyle
to use any style you want:
containerStyle
- optional styles to be applied to the outermost<View>
component.optionStyle
- optional styles to be applied to the<Text>
elements of the options themselves.optionContainerStyle
- optional styles to be applied to the the<View>
that contain the options.
You can also specify how to extract the labels from the options through the extractText prop.
options = label: 'Option 1' value: 'opt1' label: 'Option 2' value: 'opt2' <SegmentedControls = = =, =/>
If you decide to declare options
as an array of objects, do also include a testOptionEqual
prop for customized equality checking, otherwise changing selectedOption
programmatically would not update the UI correctly.
With the above options
, you'll need testOptionEqual
to be as follows in order for selectedOption
to display correctly.
<SegmentedControls = = = = = />
Moreover, you can even specify the whole renderOption()
function:
<SegmentedControls // ... =}}
Helpers
RadioButtons.renderVerticalContainer;
A super simple renderContainer
function that generates a with {flexDirection: "column"}
. It is used as default renderContainer
if you don't specify it.
Usage:
<RadioButtons = = =/>
RadioButtons.renderHorizontalContainer;
Another super simple renderContainer
function that generates a with {flexDirection: "row"}
Usage:
<RadioButtons = = =/>
RadioButtons.getViewContainerRenderer(viewContainerStyle);
An helper that generates a simple <View>
with the provided style.
Usage:
<RadioButtons = = =/>
RadioButtons.getTextOptionRenderer(normalStyle, selectedStyle, extractText);
An helper that generates <Text>
options wrapped in <TouchableWithoutFeedback>
.
normalStyle
and selectedStyle
will be applied to the nodes, depending on state. extractText(options)
can be specified.
Usage:
const normalStyle = color: 'white'; const selectedStyle = color: '#f80046' fontWeight: 'bold'; const extractText = option optionlabel; <RadioButtons = = =/>