react-native-label-select
LabelSelect is a component used for making multiple choices. The modal is a checkbox like html.
Example
Usage
npm install --save react-native-label-select
import LabelSelect from 'react-native-label-select';
<LabelSelect
ref="labelSelect"
title="Make Choices"
enable={true}
readOnly={false}
enableAddBtn={true}
style={yourStyle}
onConfirm={(list) => {...}}>
<LabelSelect.Label
key={...}
data={itemA}
onCancel={func}>selected ItemA</LabelSelect.Label>
<LabelSelect.ModalItem
key={...}
data={itemB}>Item B</LabelSelect.ModalItem>
</LabelSelect>
Properties
LabelSelect
Prop | Default | Type | Description |
---|---|---|---|
style | - | object | Specify styles for the LabelSelect |
title | - | string | The title text of the modal |
readOnly | false | bool | is the component readonly |
enable | true | bool | is the component interactive |
enableAddBtn | true | bool | whether to show the add button |
onConfirm | - | function | Triggered when the confirm button of modal is pressed with the newly selected items list passed as the only argument |
confirmText | - | string | Text of confirm button. |
cancelText | - | string | Text of cancelText button. |
customStyle | - | object | You can customize styles of modal / buttonView / confirmButton / confirmText / cancelButton / cancelText by `customStyle. |
LabelSelect.Label
Prop | Default | Type | Description |
---|---|---|---|
onCancel | - | function | Triggered when the close button of Label is pressed. |
data | - | any | Data that bind to the Label |
customStyle | - | object | You can customize styles of text by `customStyle. |
LabelSelect.ModalItem
Prop | Default | Type | Description |
---|---|---|---|
data | - | any | Data that bind to the ModalItem. After confirming the items selected on modal, the data will be passed to the selected list. |
Instance Methods
Method | Params | Description |
---|---|---|
openModal | - | Open select modal |
cancelSelect | - | Close select modal. Also triggered when the cancel button of modal being pressed. |
customStyle | - | object |
Use ref
property as a hook to invoke internal methods.
<LabelSelect ref="select">...</LabelSelect>
this.ref.select.openModal()
this.ref.select.cancelSelect()