A simple picker component with checkbox list for React-Native

react-native-picker-checkbox

A simple picker component with checkbox list for React-Native.

Example

$ cd example
$ npm i
$ react-native run-ios   // For ios
$ react-native run-android   // For Android

Installation

npm install react-native-picker-checkbox --save

Usage

  import PickerCheckBox from 'react-native-picker-checkbox';

  handleConfirm(pItems){
    console.log('pItems =>', pItems);
  }

  const items = [
    {
      itemKey:1,
      itemDescription:'Item 1'
      },
    {
      itemKey:2,
      itemDescription:'Item 2'
      },
    {
      itemKey:3,
      itemDescription:'Item 3'
      }
  ];

  render() {
    return(
      <PickerCheckBox
        data={items}
        headerComponent={<Text style={{fontSize:25}} >items</Text>}
        OnConfirm={(pItems) => this.handleConfirm(pItems)}
        ConfirmButtonTitle='OK'
        DescriptionField='itemDescription'
        KeyField='itemKey'
        placeholder='select some items'
        arrowColor='#FFD740'
        arrowSize={10}
        placeholderSelectedItems ='$count selected item(s)'
        />
    )
  }

Properties

Name	Type	Description	Default	Optional
data	array	Json with id and description	null	false
headerComponent	component	Header component	null	true
ConfirmButtonTitle	String	confirm button's title	confirm	true
DescriptionField	string	Description Field of data object	null	false
KeyField	string	key Field	null	false
placeholder	string	The text that will be rendered before items has been selected	null	true
containerStyle	object	picker container style	null	true
arrowColor	string	Arrow Color	#000	true
arrowSize	number	Arrow Size	8	true
dividerColor	string	Divider Color	#EEEEEE	true
dividerVisible	boolean	Division between header and content	true	true
placeholderSelectedItems	string	Placeholder when there is selected item
checkedItems	JSON	items checked that will show when open the picker	null	true

GitHub