rcl
rn-checkbox-list
npm i rn-checkbox-list
rcl

rn-checkbox-list

Customizable checkbox list with multi-select/deselect options

by Rinku Kumari

1.1.0 (see all)License:ISCTypeScript:Built-In
npm i rn-checkbox-list
Readme

rn-checkbox-list

npm version CodeFactor Coverage Status Codacy Badge

The goal of rn-checkbox-list is to achieve the checkbox list with minimal effort and easy customisation.

Android screenshots

iOS screenshots

Support

rn-checkbox-list versionPlatformRN Version
>= 1.0.0Android, iOS, Windows>=0.62.3
> 0.3Android, iOS, Windows0.61.5
<=0.2Android0.61.5

Setup

This library is available on npm, install it with: npm i @react-native-community/checkbox rn-checkbox-list or yarn add @react-native-community/checkbox rn-checkbox-list

Usage

  1. Import rn-checkbox-list:
import CheckboxList from 'rn-checkbox-list';
  1. Create data with id and name:
[{ id: 1, name: 'Green Book' }, { id: 2, name: 'Bohemian Rhapsody' }];
  1. Add data to imported component
<CheckboxList headerName="This is header name" listItems={data} />

Sample example

<CheckboxList
  headerName="Movies"
  theme="red"
  listItems={data}
  onChange={({ ids, items }) => console.log('My updated list :: ', ids)}
  listItemStyle={{ borderBottomColor: '#eee', borderBottomWidth: 1 }}
  checkboxProp={{ boxType: 'square' }} // iOS (supported from v0.3.0)
  onLoading={() => <LoaderComponent />}
/>

Check for complete example here.

Available props

NameTypeDefaultDescription
listItemsobject array[]List of checkboxes
selectedListItemsobject array[]List of selected items(subset of listItems)
headerNamestring''Shows header with the given name
listItemStyleobject{}Each check list style
checkboxPropobject{}Custom checkbox style
headerStyleobjectSee hereHeader check list style
onChangefunctionnullFires on each checkbox select or deselect
onLoadingfunctionnullWhen the list is empty and a loader needs to be shown
themestring#1A237ECustom theme color for checkbox
v1.1.0 & above
renderItemfunctionText ComponentCustom render component for each list item

Refer wiki for detailed usecases of the props

Improvements

  • Importing checkbox through updated react-native package (removing warnings)
  • Customisable checkbox colors
  • Provide selected items and selected ids
  • Support for default selected items
  • Support iOS

Pull requests, feedbacks and suggestions are welcome!

Downloads/wk

67

GitHub Stars

10

LAST COMMIT

1yr ago

MAINTAINERS

2

CONTRIBUTORS

4

OPEN ISSUES

3

OPEN PRs

3
VersionTagPublished
1.1.0
latest
1yr ago
No alternatives found
No tutorials found
Add a tutorial

Rate & Review

100
No reviews found
Be the first to rate