/react-native-checkbox-flex

Fully customizable, easy to use checkbox with flexible component by React Native on Android and iOS

Primary LanguageTypeScript

React Native Checkbox Flex

React Native Checkbox Flex

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

React Native Checkbox Flex React Native Checkbox Flex

Installation

Add the dependency:

npm i react-native-checkbox-flex

Peer Dependencies

IMPORTANT! You need install them
"@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

Property Type Default Description
title string undefined set the checkbox title
date string undefined set the checkbox date
description string undefined set the checkbox description
imageSource image undefined set the checkbox icon image source

Customization (Optionals)

Property Type Default Description
onPress function undefined set your own logic for the button functionality when it is pressed
onCardPress function undefined set your own logic for the card button functionality when it is pressed
isActive boolean false set the initial isActive state
style ViewStyle default set or override the style object for the main container
checkboxContainerStyle ViewStyle default set or override the style object for the checkbox container
iconContainerStyle ViewStyle default set or override the style object for the icon container
iconImageStyle ImageStyle default set or override the style object for the icon image
titleTextStyle TextStyle default set or override the style object for the title text
dateTextStyle TextStyle default set or override the style object for the date text
descriptionTextStyle TextStyle default set or override the style object for the description text
titleNumberOfLines number 2 change the title number of lines
checkboxBorderColor color "rgba(100,100,100,0.9)" change the checkbox border color
activeCheckboxBackgroundColor color "#63eead" change the active checkbox container background color
inactiveCheckboxBackgroundColor color "transparent" change the inactive checkbox container background color
activeCardBackgroundColor color "#2173FF" change the active card container background color
activeCheckboxBackgroundColor color "#343c4d" change the inactive card container background color
disableBuiltInActiveSystemForCheckbox boolean false disable the built in active control system for checkbox
disableBuiltInActiveSystemForCard boolean false disable the built in active control system for card
disableDate boolean false disable date component
dateContainerStyle ViewStyle default set or override the style object for the checkbox date container
titleContainerStyle ViewStyle default set or override the style object for the checkbox title container
descriptionContainerStyle ViewStyle default set 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.