React-native-picker-checkbox NPM

react-native-picker-checkbox

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

ui3 ui4

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