React Native Label Select: Create Multiple Choice Inputs-React Native

react-native-label-select 

LabelSelect is a component used for making multiple choices. The modal is a checkbox like html.

Example

android.gif

ios.gif

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

PropDefaultTypeDescription
style-objectSpecify styles for the LabelSelect
title-stringThe title text of the modal
readOnlyfalseboolis the component readonly
enabletrueboolis the component interactive
enableAddBtntrueboolwhether to show the add button
onConfirm-functionTriggered when the confirm button of modal is pressed with the newly selected items list passed as the only argument
confirmText-stringText of confirm button.
cancelText-stringText of cancelText button.
customStyle-objectYou can customize styles of modal / buttonView / confirmButton / confirmText / cancelButton / cancelText by `customStyle.

LabelSelect.Label

PropDefaultTypeDescription
onCancel-functionTriggered when the close button of Label is pressed.
data-anyData that bind to the Label
customStyle-objectYou can customize styles of text by `customStyle.

LabelSelect.ModalItem

PropDefaultTypeDescription
data-anyData that bind to the ModalItem. After confirming the items selected on modal, the data will be passed to the selected list.

Instance Methods

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

Download details:

Author: xgfe
Source: https://github.com/xgfe/react-native-label-select

License: MIT license

#reactnative #react #javascript 

React Native Label Select: Create Multiple Choice Inputs-React Native
1.15 GEEK