selected-option-picker

This React-Native component library is created for the selection of single or multiple item(s) from the list in Android/iOS.

Examples

Install

Step 1

npm i selected-option-picker --save

or

yarn add selected-option-picker 

Step 2

iOS

cd ios
pod install

Usage

Import library

import SelectedOptionPicker from 'selected-option-picker';

Create required state variables

const [showPicker, setShowPicker] = useState(false);
const [name, setName] = useState('');
const [data, setData] = useState([]);

Usage of the single value picker

<View>
  <Button
    title={'Show Country Picker'}
    onPress={() => setShowPicker(true)}
  />

  <SelectedOptionPicker
    showPicker={showPicker} 
    data={data} 
    pickerTitle={'Select Name'} 
    checkBoxType={'circle'} 
    itemTitleKey={'name'} 
    itemTitleValue={name.name} 
    itemUniqueKey={'id'}
    itemUniqueValue={name.id}
    enableSearch={true} 
    searchPlaceholder={'Search name'} 
    emptyTitle={'No Country(s) Found'} 
    onDonePress={() => setShowPicker(false)} 
    onCancelPress={() => setShowPicker(false)} 
    onItemChange={item => setName(item)} 
  />
</View>

Request Object

| Property | Required | Type | Description | | ------------------------- | :------------ | :-------------------------------------- | :---------------------------------------------- | | showPicker | Yes | bool (default false) | Show or hide picker | | data | Yes | array (default []) | An array of objects with similar properties to showing the list | | itemTitleKey | Yes | string | Name of the key to showing the title of the item. Using this key the layout of the selected items will be updated | | itemTitleValue | Yes | string | Value or title of the selected item to compare the selected items and update the list layout | | itemUniqueKey | Yes | string | Name of the key to compare the selected items and update the list layout | | itemUniqueValue | Yes | string | Value of Unique item id to compare the selected items and update the list layout | | itemTitleStyle | No | style object | Style object for Text to over-ride the style of the list title | | pickerHeight | No | height (default 70% of screen height) | Optional properties to change the height of the picker accepted value is Number or percentage in String as below pickerHeight='50%' or pickerHeight=450 | | animationType | No | string (default slide) | Optional property to change the animation of the picker when showing the picker. Available values are slide, fade, none | | preset | No | string (default single) | This property is for changing the option of selecting items single or multiple. available options are single, multiple | | pickerTitle | No | string (default Select Option) | To show the title of the picker | | primaryColor | No | color (default #06C149) | The primary color of the picker you can change it according to your app | | checkBoxType | No | string (default circle) | Using this property you can change the type of the checkbox in the list. Available values are circle, square, icon | | checkBoxIcons | No | object (default {check:image,uncheck:image}) | This property enables when you checkBoxType is icon. You can override the default icons of the checkbox by providing the following format value object of local images checkBoxIcons={{check:, uncheck:}} or remote images checkBoxIcons={{check: {uri: URL},uncheck: {uri: URL}}} | | enableSearch | No | bool (default false) | Using this property you can enable or disable the search feature | | searchPlaceholder | No | string (default Search here) | This property work when enableSerach is true. Using this you can change the placeholder of the search input field | | emptyTitle | No | string (default No Record(s) Found) | To change the title when there is no item | | onDonePress | Yes | callback function | A callback function to return the selected item(s) of the list when preset values is multiple else a simple function | | onItemChange | Yes | callback function | A callback function to return the selected item when selection of item changed in the list | | onCancelPress | Yes | function | This function called when cancel button pressed in picker |

TO DO

• [ ] [Android/iOS] Provide the pagination for the long list

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website.

License

MIT