rnc
react-native-checkbox-card
npm i react-native-checkbox-card
rnc

react-native-checkbox-card

Checkbox Card is customizable and animated built-in check state integration for React Native

by FreakyCoder

0.1.0 (see all)License:MITTypeScript:Not Found
npm i react-native-checkbox-card
Readme
React Native Checkbox Card

Checkbox Card is customizable and animated built-in check state integration for React Native

npm version npm Platform - Android and iOS License: MIT styled with prettier

React Native Checkbox Card React Native Checkbox Card React Native Checkbox Card

Installation

Add the dependency:

npm i react-native-checkbox-card

Peer Dependencies

IMPORTANT! You need install them
"@freakycoder/react-native-bounceable": "^0.2.0",

Usage

Import

import RNCheckboxCard from "react-native-checkbox-card";

Fundamental Usage

<RNCheckboxCard
  text="Banana"
  onPress={(checked: boolean) => console.log("Checked: ", checked)}
/>

Quantity Prop Usage

<RNCheckboxCard
  darkMode
  text="Banana"
  quantity="x2"
  enableQuantityText
  onPress={(checked: boolean) => console.log("Checked: ", checked)}
/>

Configuration - Props

Fundamental Props

PropertyTypeDefaultDescription
textstringundefinedset the main checkbox text
onPressfunctiondefaultchanges the checkbox's state and returns the changed checked value
PropertyTypeDefaultDescription
quantitystringundefinedset the checkbox's quantity text
enableQuantityTextbooleanfalseMUST use it for using the quantity prop, it enables the quantity text
isCheckedbooleanfalseinitial checked prop
darkModebooleanfalseactivates the dark mode

Customization & Optional Props

PropertyTypeDefaultDescription
ImageComponentcomponentImageset your own Image component instead of react native's default one such as: FastImage
rightIconComponentcomponentdefaultset your own component instead of right aligned sort icon image component
checkIconComponentcomponentdefaultset your own component instead of check icon image component
checkImageSourceimagedefaultset your own image instead of default check icon
sortIconImageSourceimagedefaultset your own image instead of default sort icon
textStylestyledefaultadd or override the current text style
quantityTextStylestyledefaultadd or override the current quantity text style
widthnumberScreenWidth * 0.9change the checkbox card's width
heightnumber60change the checkbox card's height
borderRadiusnumber10change the checkbox card's border radius
backgroundColorstringdefaultchange the checkbox card's background color
checkedTextColorstringdefaultchange the checked text color
uncheckedTextColorstringdefaultchange the unchecked text color
circleSizenumber25change the circle's size (width/height)
circleBorderColorstringdefaultchange the circle's border color
circleBorderRadiusnumber25change the circle's border radius
circleBackgroundColornumberdefaultchange the circle's background color

Future Plans

  • LICENSE
  • Write an article about the lib on Medium

Author

FreakyCoder, kurayogun@gmail.com

License

React Native Checkbox Card is available under the MIT license. See the LICENSE file for more info.

Downloads/wk

6

GitHub Stars

18

LAST COMMIT

2yrs ago

MAINTAINERS

1

CONTRIBUTORS

1

OPEN ISSUES

0

OPEN PRs

0
VersionTagPublished
0.1.0
latest
2yrs ago
No alternatives found
No tutorials found
Add a tutorial

Rate & Review

100
No reviews found
Be the first to rate