Installation

Add the dependency:

npm i react-native-checkbox-card

Peer Dependencies

"@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

• [x] ~~LICENSE~~
• [ ] Write an article about the lib on Medium

Credits

Heavily inspired by Eugeniusz Eudokimow, 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.