Need help with react-native-radio-buttons?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

ArnaudRinquin
418 Stars 101 Forks MIT License 122 Commits 18 Opened issues

Description

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

Services available

!
?

Need anything else?

Contributors list

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.