react-native-optiongroup

A simple option group control.

Installation

React Native >= 0.49

yarn add react-native-optiongroup

Attributes

Prop	Description	Default
string backgroundColor	Specifies the background color of the component	transparent
string borderColor	Specifies the border color of the component	#828186
number borderWidth	Specifies the border width of the component	1
number borderRadius	Specifies the border radius of the component	3
number contentPadding	The text padding between the boxes	10
string inverseTextColor	The text color used when a option is selected	#ffffff
array/object options	An array or object with the values	required
any selected	The current selected item	undefined
any defaultValue	Same as selected	undefined
object style	A standard style object, refer below for more information	undefined
string useLabelValue	A string indicating which key should be used for the label in an array object.	undefined
string useKeyValue	A string indicating which key should be used for the key in an array object.	undefined
string theme	One of the following theme strings: red, yellow, blue or green	undefined
bool invertKeyLabel	If true the label becomes the key and the key becomes the label	false
string fontFamily	The font family	undefined
string fontSize	The font size	undefined

Events

Prop	Description
onChange	Executed when another option value was selected

Examples

Import the component:

import OptionGroup from 'react-native-optiongroup';

Array Options

<OptionGroup
    options={['Yes', 'No', 'Maybe']}
    onChange={(value) => console.log(value, 'selected')}
/>

Object Options

<OptionGroup
    options={{'Yes': 0, 'No': 1, 'Maybe': 2}}
    onChange={(value) => console.log(value, 'selected')}
/>

Complex Object Options

<OptionGroup
    options={[
    	{
    		'answerResult': 0,
    		'label': 'Yes'
    	},
    	{
    		'answerResult': 1,
    		'label': 'No'
    	},
    	{
    		'answerResult': 2,
    		'label': 'Maybe'
    	},
    ]}
    useLabelValue={'label'}
    useKeyValue={'answerResult'}
    onChange={(value) => console.log(value, 'selected')}
/>

Inverted Options

<OptionGroup
    options={{yes: 'Yes, no: 'No', maybe: 'Maybe'}}
    onChange={(value) => console.log(value, 'selected')}
    invertKeyLabel={true}
/>

Attribute Styles

<OptionGroup
	borderColor={'green'}
	borderWidth={2}
	borderRadius={5}
	backgroundColor={'white'}
    options={{'Yes': 0, 'No': 1, 'Maybe': 2}}
    onChange={(value) => console.log(value, 'selected')}
/>

Standard Styles

<OptionGroup
	style={{fontSize: 20, margin: 20}}
    options={{'Yes': 0, 'No': 1, 'Maybe': 2}}
    onChange={(value) => console.log(value, 'selected')}
/>

A subset of standard styles are supported including margin, fontSize, fontFamily, backgroundColor, borderColor, borderWidth, borderRadius, contentPadding and inverseTextColor.

Theme Styles

<OptionGroup
	defaultValue={0}
	theme={'red'}
    options={{'Yes': 0, 'No': 1, 'Maybe': 2}}
    onChange={(value) => console.log(value, 'selected')}
/>

<OptionGroup
	defaultValue={0}
	theme={'blue'}
    options={{'Yes': 0, 'No': 1, 'Maybe': 2}}
    onChange={(value) => console.log(value, 'selected')}
/>

<OptionGroup
	defaultValue={0}
	theme={'green'}
    options={{'Yes': 0, 'No': 1, 'Maybe': 2}}
    onChange={(value) => console.log(value, 'selected')}
/>

<OptionGroup
	defaultValue={0}
	theme={'yellow'}
    options={{'Yes': 0, 'No': 1, 'Maybe': 2}}
    onChange={(value) => console.log(value, 'selected')}
/>

Default Theme Id's are light, dark, grey, red, yellow, blue and green