https://github.com/wrathchaos/react-native-checkbox-card
Checkbox Card is customizable and animated built-in check state integration for React Native
https://github.com/wrathchaos/react-native-checkbox-card
card card-view checkbox checkbox-card front-end front-end-development react react-native react-native-app react-native-checkbox react-native-checkbox-card react-native-component reactjs view
Last synced: 4 months ago
JSON representation
Checkbox Card is customizable and animated built-in check state integration for React Native
- Host: GitHub
- URL: https://github.com/wrathchaos/react-native-checkbox-card
- Owner: WrathChaos
- Created: 2020-10-07T12:37:34.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-04-21T12:41:38.000Z (about 2 years ago)
- Last Synced: 2025-02-01T04:31:37.596Z (5 months ago)
- Topics: card, card-view, checkbox, checkbox-card, front-end, front-end-development, react, react-native, react-native-app, react-native-checkbox, react-native-checkbox-card, react-native-component, reactjs, view
- Language: TypeScript
- Homepage: https://freakycoder.com
- Size: 64 MB
- Stars: 21
- Watchers: 3
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://github.com/WrathChaos/react-native-checkbox-card)
[](https://www.npmjs.com/package/react-native-checkbox-card)
[](https://www.npmjs.com/package/react-native-checkbox-card)
[](https://opensource.org/licenses/MIT)
[](https://github.com/prettier/prettier)
Checkbox Card
Checkbox Card with Quantity Feature
Checkbox Card Light Mode
# Installation
Add the dependency:
```bash
npm i react-native-checkbox-card
```
## Peer Dependencies
IMPORTANT! You need install them
```json
"@freakycoder/react-native-bounceable": ">= 1.0.3"
```
# Usage
## Import
```jsx
import RNCheckboxCard from "react-native-checkbox-card";
```
## Fundamental Usage
```jsx
console.log("Checked: ", checked)}
/>
```
## Quantity Prop Usage
```jsx
console.log("Checked: ", checked)}
/>
```
# Configuration - Props
### Fundamental Props
| Property | Type | Default | Description |
| -------- | :------: | :-------: | ------------------------------------------------------------------ |
| text | string | undefined | set the main checkbox text |
| onPress | function | default | changes the checkbox's state and returns the changed checked value |
### Featured Props
| Property | Type | Default | Description |
| ------------------ | :-----: | :-------: | --------------------------------------------------------------------- |
| quantity | string | undefined | set the checkbox's quantity text |
| enableQuantityText | boolean | false | MUST use it for using the quantity prop, it enables the quantity text |
| isChecked | boolean | false | initial checked prop |
| darkMode | boolean | false | activates the dark mode |
### Customization & Optional Props
| Property | Type | Default | Description |
| --------------------- | :-------: | :----------------: | --------------------------------------------------------------------------------------- |
| ImageComponent | component | Image | set your own Image component instead of react native's default one such as: `FastImage` |
| rightIconComponent | component | default | set your own component instead of right aligned sort icon image component |
| checkIconComponent | component | default | set your own component instead of check icon image component |
| checkImageSource | image | default | set your own image instead of default check icon |
| sortIconImageSource | image | default | set your own image instead of default sort icon |
| textStyle | style | default | add or override the current text style |
| quantityTextStyle | style | default | add or override the current quantity text style |
| width | number | ScreenWidth \* 0.9 | change the checkbox card's width |
| height | number | 60 | change the checkbox card's height |
| borderRadius | number | 10 | change the checkbox card's border radius |
| backgroundColor | string | default | change the checkbox card's background color |
| checkedTextColor | string | default | change the checked text color |
| uncheckedTextColor | string | default | change the unchecked text color |
| circleSize | number | 25 | change the circle's size (width/height) |
| circleBorderColor | string | default | change the circle's border color |
| circleBorderRadius | number | 25 | change the circle's border radius |
| circleBackgroundColor | number | default | change the circle's background color |
## Future Plans
- [x] ~~LICENSE~~
- [ ] Write an article about the lib on Medium
## Credits
Heavily inspired by [Eugeniusz Eudokimow](https://dribbble.com/shots/11610076-Shopping-List-App/attachments/3231900?mode=media), thank you so much! :)
## Author
FreakyCoder, [email protected]
## License
React Native Checkbox Card is available under the MIT license. See the LICENSE file for more info.