Nerdiest Political Manifesto

    react-native-checkbox-flex

    0.2.0 • Public • Published

    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

    • [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, kurayogun@gmail.com

    License

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

    Install

    npm i react-native-checkbox-flex

    DownloadsWeekly Downloads

    62

    Version

    0.2.0

    License

    MIT

    Unpacked Size

    50.5 kB

    Total Files

    17

    Last publish

    Collaborators

    • freakycoder