Skip to content

WrathChaos/react-native-checkbox-card

Repository files navigation

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

Checkbox Card Checkbox Card with Quantity Feature
React Native Checkbox Card React Native Checkbox Card
Checkbox Card Light Mode
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": ">= 1.0.3"

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

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

  • LICENSE
  • Write an article about the lib on Medium

Credits

Heavily inspired by Eugeniusz Eudokimow, thank you so much! :)

Author

FreakyCoder, kurayogun@gmail.com

License

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