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