Skip to content
Fully customizable animated bouncy checkbox for React Native
JavaScript Objective-C Ruby Java Python
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode README is updated. Lib is completed. Oct 13, 2019
assets
example Example is upgraded Oct 16, 2019
lib/src Unused folders, files and codes are deleted Oct 16, 2019
.eslintrc.js Initial Commit Sep 7, 2019
.gitattributes Initial Commit Sep 7, 2019
.gitignore Initial Commit Sep 7, 2019
.npmignore Initial Commit Sep 7, 2019
LICENSE Create LICENSE Oct 13, 2019
README.md Update README.md Oct 13, 2019
package.json

README.md

React Native Bouncy Checkbox

Battle Tested ✅

Fully customizable animated bouncy checkbox for React Native

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

React Native Bouncy Checkbox React Native Bouncy Checkbox

Installation

Add the dependency:

React Native:

npm i react-native-bouncy-checkbox

Peer Dependencies

IMPORTANT! You need install them.
"react": ">= 16.x.x",
"react-native": ">= 0.55.x",
"react-native-vector-icons": ">= 6.6.0",
"react-native-dynamic-vector-icons": ">= 0.2.1"

Import

import BouncyCheckbox from "react-native-bouncy-checkbox";

Usage

Basic (Default) Usage

<BouncyCheckbox />

Customizable Usage

<BouncyCheckbox
  isChecked
  textColor="#000"
  fillColor="red"
  iconComponent={your-own-component}
  fontFamily="JosefinSans-Regular"
  text="Buy tickets for concert 🎉 🎊"
/>

Configuration - Props

Property Type Default Description
text string Call my mom 😇 set the checkbox's text
textColor color #757575 change the text's color
fontFamily string JosefinSans-Regular set your own font family
fontSize number 16 change the text's font size
isChecked boolean false set the default checkbox value
checkboxSize number 25 change the checkbox's size
borderRadius number size/2 change the checkbox's border radius if you do not want the circle one
borderColor color #f09f48 change the checkbox's border color
fillColor color #f09f48 change the checkbox's filled color
unfillColor color transparent change the checkbox's un-filled color when it's not checked
iconComponent component Icon set your own icon component

Future Plans

  • LICENSE
  • Remove item feature
  • Re-sort the list availability feature
  • Write an article about the lib on Medium

Author

FreakyCoder, kurayogun@gmail.com

License

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

You can’t perform that action at this time.