1.0.1 • Published 10 months ago

react-native-checkbox-flex v1.0.1

Weekly downloads
-
License
MIT
Repository
github
Last release
10 months ago

React Native Checkbox Flex

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

Installation

Add the dependency:

npm i react-native-checkbox-flex

Peer Dependencies

"@freakycoder/react-native-bounceable": "^0.2.5",

Usage

Import

import CheckboxFlex from "react-native-checkbox-flex";

Fundamental Usage

<CheckboxFlex
  title="Morning Run"
  date="9:00 AM"
  description="Nulla vitae elit libero, a pharetra augue."
  imageSource={require("./assets/running.png")}
/>

Example Project 😍

You can checkout the example project 🥰

Simply run

  • npm i
  • react-native run-ios/android

should work of the example project.

Configuration - Props

activeCardBackgroundColor?: string; inactiveCardBackgroundColor?: string;

Fundamentals

PropertyTypeDefaultDescription
titlestringundefinedset the checkbox title
datestringundefinedset the checkbox date
descriptionstringundefinedset the checkbox description
imageSourceimageundefinedset the checkbox icon image source

Customization (Optionals)

PropertyTypeDefaultDescription
onPressfunctionundefinedset your own logic for the button functionality when it is pressed
onCardPressfunctionundefinedset your own logic for the card button functionality when it is pressed
isActivebooleanfalseset the initial isActive state
styleViewStyledefaultset or override the style object for the main container
checkboxContainerStyleViewStyledefaultset or override the style object for the checkbox container
iconContainerStyleViewStyledefaultset or override the style object for the icon container
iconImageStyleImageStyledefaultset or override the style object for the icon image
titleTextStyleTextStyledefaultset or override the style object for the title text
dateTextStyleTextStyledefaultset or override the style object for the date text
descriptionTextStyleTextStyledefaultset or override the style object for the description text
titleNumberOfLinesnumber2change the title number of lines
checkboxBorderColorcolor"rgba(100,100,100,0.9)"change the checkbox border color
activeCheckboxBackgroundColorcolor"#63eead"change the active checkbox container background color
inactiveCheckboxBackgroundColorcolor"transparent"change the inactive checkbox container background color
activeCardBackgroundColorcolor"#2173FF"change the active card container background color
activeCheckboxBackgroundColorcolor"#343c4d"change the inactive card container background color
disableBuiltInActiveSystemForCheckboxbooleanfalsedisable the built in active control system for checkbox
disableBuiltInActiveSystemForCardbooleanfalsedisable the built in active control system for card
disableDatebooleanfalsedisable date component
dateContainerStyleViewStyledefaultset or override the style object for the checkbox date container
titleContainerStyleViewStyledefaultset or override the style object for the checkbox title container
descriptionContainerStyleViewStyledefaultset or override the style object for the checkbox description container

Future Plans

  • LICENSE
  • Write an article about the lib on Medium

Credits

Heavily Inspired by Nazar Lenyshyn's To Do List App UI - Animation Design

Author

FreakyCoder, kurayogun@gmail.com

License

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