@manatsa/simple-react-native-picker

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