Giter VIP home page Giter VIP logo

rn-checkbox-list's Introduction

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 version Platform RN Version
>= 1.0.0 Android, iOS, Windows >=0.62.3
> 0.3 Android, iOS, Windows 0.61.5
<=0.2 Android 0.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

and then run npx pod-install

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

Name Type Default Description
listItems object array [] List of checkboxes
selectedListItems object array [] List of selected items(subset of listItems)
headerName string '' Shows header with the given name
listItemStyle object {} Each check list style
checkboxProp object {} Custom checkbox style
headerStyle object See here Header check list style
onChange function null Fires on each checkbox select or deselect
onLoading function null When the list is empty and a loader needs to be shown
theme string #1A237E Custom theme color for checkbox
v1.1.0 & above
renderItem function Text Component Custom 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!

rn-checkbox-list's People

Contributors

dependabot[bot] avatar javatutorials2016 avatar rinku-k avatar sameer-j avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

rn-checkbox-list's Issues

headerStyle doesnt handle header text style

headerStyle doesnt handle header text style.

Cross-checked with code as well.

const CheckListHeader = ({ children, text, style, checkboxProp, onPress, isActive, theme }) => (
<Touchable onPress={onPress} style={{ padding: 10, flexDirection: 'row', alignItems: 'center', backgroundColor: '#F2F6FC', ...style }}>
<CheckBox
theme={theme}
isActive={isActive}
checkboxProp={checkboxProp}
/>
{ !!text &&
<View style={{ flex: 1 }}>
<Text numberOfLines={1} style={{ color: '#212121', fontWeight: 'bold', fontSize: 16 }}>{text}</Text>
</View>
}
{children}
</Touchable>
);

Multi Checkbox list support

I tried to add multi checkbox lists on a screen and every time list update both states on selecting one of the list items.

e.g.

if i have gender selections state and then department selections state, whenever i tried to select the gender it also sets the departments aswell.

checkbox text customization

checkbox text should support customization using text props.
All props should be supported including style.

line break support for checkbox text

Currently multiline works only when the text overflows the width.
Multiline may support text with line break as well.

Requires discussion around how to provide this text in the data.

error headerName

when headerName active
and i checked or not checked my list remove item

selected item issue

how to empty the selected item list after going back from the screen that have the CheckboxList ?

because every time i go back and empty the selected list it doesn't change i guess it's a problem in the onchange attribute because every time i console.log inside it like this
onChange={({ ids, items }) => {console.log(items}}
the items remains the same !
can u help me plz !

How to get selected values


state = {
    data: [
      {
        id: 1,
        name: 'Green Book',
      },
      {
        id: 2,
        name: 'Red Book',
      },
    ],
  };

 <CheckboxList
         theme="red"
         listItems={this.state.data}
         onChange={data => console.warn('My updated list :: ', data)}
         listItemStyle={{
         borderBottomColor: '#eee',
         borderBottomWidth: 1,
           }}
   />

It only gives My updated list :: [1, 2].
Is it possible to get array with values of selected items onChange?

Elements in the list disappear

I dont know if this is a known problem but in android after clicking on the select all option, if you try to uncheck an element it will get removed from the list.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.