Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/wrathchaos/react-native-checkbox-flex

Fully customizable, easy to use checkbox with flexible component by React Native on Android and iOS
https://github.com/wrathchaos/react-native-checkbox-flex

android app app-design app-development apple application front-end ios mobile react react-native reactjs

Last synced: 13 days ago
JSON representation

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

Host: GitHub
URL: https://github.com/wrathchaos/react-native-checkbox-flex
Owner: WrathChaos
Created: 2021-03-02T18:57:53.000Z (over 3 years ago)
Default Branch: master
Last Pushed: 2023-07-10T20:12:00.000Z (over 1 year ago)
Last Synced: 2024-10-25T16:59:20.346Z (21 days ago)
Topics: android, app, app-design, app-development, apple, application, front-end, ios, mobile, react, react-native, reactjs
Language: TypeScript
Homepage: https://freakycoder.com
Size: 25.4 MB
Stars: 19
Watchers: 3
Forks: 2
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

        

[![React Native Checkbox Flex](https://img.shields.io/badge/-Fully%20customizable%2C%20easy%20to%20use%20checkbox%20with%20flexible%20component%20by%20React%20Native%20on%20Android%20and%20iOS-orange?style=for-the-badge)](https://github.com/WrathChaos/react-native-checkbox-flex)

[![npm version](https://img.shields.io/npm/v/react-native-checkbox-flex.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-checkbox-flex)

[![npm](https://img.shields.io/npm/dt/react-native-checkbox-flex.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-checkbox-flex)

![Platform - Android and iOS](https://img.shields.io/badge/platform-Android%20%7C%20iOS-blue.svg?style=for-the-badge)

[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg?style=for-the-badge)](https://opensource.org/licenses/MIT)

[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier)

  

    

      

    

    

      

    

   

# Installation

Add the dependency:

```bash

npm i react-native-checkbox-flex

```

## Peer Dependencies

IMPORTANT! You need install them


```js

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

```

# Usage

## Import

```jsx

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

```

## Fundamental Usage

```jsx

```

## 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](https://dribbble.com/shots/14437015-To-Do-List-App-UI-Animation)

## Author

FreakyCoder, [email protected]

## License

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