react-native-checkbox-flex
react-native-checkbox-flex copied to clipboard
WrathChaos
Fully customizable, easy to use checkbox with flexible component by React Native on Android and iOS
|
|
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 ireact-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
- [x] ~~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, [email protected]
License
React Native Checkbox Flex is available under the MIT license. See the LICENSE file for more info.
Metadata
19
Stars
2
Forks
Watchers
Owner
WrathChaos
Metadata
Fully customizable, easy to use checkbox with flexible component by React Native on Android and iOS