@manatsa/simple-react-native-picker
v1.0.1
Published
A siplified and highly customizable picker for react native.
Downloads
2
Readme
Introduction
A picker component implemented fully using javascript. It is highly customizable and flexible. It can be used with expo projects and non expo. However, it has been tested only with expo projects
Installation
npm i @manatsa/simple-react-native-picker --save
Usage
import Picker from "@manatsa/simple-react-native-picker"
Props
- value * - the selected value.
- onValueChange * - the function/method to execute when user selects a value.
- items * - the items to populate picker options. The items should be an array of objects with label and value keys eg.
{label:'Option 1', value:'Value 1'}
. - prompt * - the placeholder to show before selection is done.
- icon - icon name to show to the left of the picker boundary (optional). The component uses MaterialCommunityIcons from
react-native-vector-icons
package. - defaultColor - default selected option color and icons color (optional).
- optionsBoldText - the boolean instructing the component to show options as bold text (optional)
- optionsTextSize - options text size as a number (optional)
- optionsHeaderBackgroundColor - string color as header background (optional)
- optionsHeaderTextColor - options header text color as string (optional)
- width - width of the options container as
string | number
(optional) - callback - a callback method to retrieve picker value for other uses eg. show/hide other components.
Example
import Picker from "@manatsa/simple-react-native-picker"
import ...
const Example=()=>{
const [choice, setChoice] = React.useState("")
const [value, setValue]=React.useState('O')
const genderPickerOptions=[
{label:'Female', value:'F'},
{label:'Male', value:'M'},
{label:'Other', value:'O'}
]
return (
<>
<Picker
value={value}
items={genderPickerOptions}
onValueChange={val=>console.log(val)}
callback={setChoice}
/>
{ choice==='M' && <Text>{'No more males allowed!'}</Text>
}
</>
)
}
License
MIT License
Author
Manatsa Chinyeruse