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