react-native-radio-buttons

by ArnaudRinquin

[DEPRECATED] A Radio-button like logic wrapper for React Native

414 Stars 99 Forks Last release: Not found MIT License 122 Commits 30 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

react-native-radio-buttons

IMPORTANT this package is deprecated and no longer maintained in favor of the official SegmentedControlIOS component.

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

example

Install

npm i -S react-native-radio-buttons

Demo app

git clone https://github.com/ArnaudRinquin/react-native-radio-buttons.git
cd react-native-radio-buttons
npm run demo

Usage

Here is an extensive overview of the component usage.

import { RadioButtons } from 'react-native-radio-buttons'

// ...

render() { const options = [ "Option 1", "Option 2" ];

function setSelectedOption(selectedOption){ this.setState({ selectedOption }); }

function renderOption(option, selected, onSelect, index){ const style = selected ? { fontWeight: 'bold'} : {};

return (
  <touchablewithoutfeedback onpress="{onSelect}" key="{index}">
    <text style="{style}">{option}</text>
  </touchablewithoutfeedback>
);

}

function renderContainer(optionNodes){ return {optionNodes}; }

return ( Selected option: {this.state.selectedOption || 'none'} ); }

Will render this

Example

Props

  • options - []
    mandatory array of anything, will be passed to
    renderOption
  • onSelection - function(selectedOption, selectedIndex){}
    option selection callback
  • selectedIndex - index
    the initially selected index, optional.
  • selectedOption - option
    the initially selected option, optional
  • renderOption - function(option, selected, onSelect, index)
    should return an option node, default generate
     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
     elements of the options themselves.
  • optionContainerStyle
    - optional styles to be applied to the the
     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'

// ...

You override all the defaults through the props.


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
     component.
  • optionStyle
    - optional styles to be applied to the
     elements of the options themselves.
  • optionContainerStyle
    - optional styles to be applied to the the
     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'
  }
]

option.label } />

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.
   option.label }
    testOptionEqual={(selectedValue, option) => selectedValue === option.value}
  />

Moreover, you can even specify the whole

renderOption()
function:
 {
    return (
      // ...render stuff
    )
  }}
}}

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.renderHorizontalContainer;

Another super simple

renderContainer
function that generates a with
{flexDirection: "row"}

Usage:


RadioButtons.getViewContainerRenderer(viewContainerStyle);

An helper that generates a simple

 with the provided style.

Usage:


RadioButtons.getTextOptionRenderer(normalStyle, selectedStyle, extractText);

An helper that generates

 options wrapped in 
.
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) => option.label;

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.