A simple picker component with checkbox list for React-Native.
$ cd example
$ npm i
$ react-native run-ios // For ios
$ react-native run-android // For Androidnpm install react-native-picker-checkbox --save
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)'
/>
)
}| 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 |
If you'd like to see something added or changed to this module please open a new GitHub issue. Pull requests are always welcome.
- Apache-2.0. Vinicius Wovst