nazimamin/react-native-label-select

A react native component used for making multiple choices.

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()