react-native-picker-with-other-option
v1.0.1
Published
Picker into which can be added some options which when selected a text input appears to prompt the value
Downloads
7
Maintainers
Readme
react-native-picker-with-other-option
Sometimes, the item list in a picker is not sufficient. "Other" may be an option to fill this gap. And sometimes the other option may be wanted to be filled with some value. This native picker may have more than one 'other' option when one of them is selected a text input appears so the user can fill what is this 'other' option's value.
Usage
Install
npm install react-native-picker-with-other-option --save
Import
import PickerWithOther from 'react-native-picker-with-other-option'
You must also import Picker it self as you will declare items with Picker.Item
import {Picker} from 'react-native';
Example Markup
<PickerWithOther
inputProps={
{
style:{borderWidth:1, borderColor:"#000"}
}
}
viewProps={
{
style:{height:60,width:"100%"}
}
}
style={{height:20,width:"100%"}}
onValueChange={(value)=>{console.log(value);}}>
<Picker.Item label="Option 1" value="1" />
<Picker.Item label="Option 2" value="2" />
<Picker.Item other label="Option 3" value="other" />
<Picker.Item other label="Option 4" value="other2" />
</PickerWithOther>
Attributes
inputProps
This is the props passed to the text input. onChangeText prop will not work if you try to pass it, it's used internally by overwriting
viewProps
The picker inside the component and the text input is contained by a View, to pass props to that View use viewProps
All other props are passed to inner Picker
Picker.Item other & value attributes
All items that have 'other' attribute will trig appearing text input. If an item is an 'other item', than its's value is used to distinguish which other option is filled with text input. Consider this:
onValueChange
value that comes from the component has the following structure as two examples:
{ value: '1', otherItem: null } // Option 1
{ value: 'Hello', otherItem: 'other2' } // Option 4 + TextInput
value key, is the final value. It can be a value from Picker.Item which is not other or it's the text from input value. otherItem is null if Picker.Item selected has no 'other' attribute, otherwise it is the value attribute given to Picker.Item with 'other' attribute.