Skip to content
master
Switch branches/tags
Go to file
Code

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

Version 2.0.0 is Here 🥳

  • Typescript
  • Zero Dependency
  • More Customization Options
  • New customization props are available:
    • iconStyle
    • bounceEffect
    • bounceFriction

Import

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

Usage

Basic Usage

<BouncyCheckbox onPress={(isChecked: boolean) => {}} />

Advanced Custom Usage

<BouncyCheckbox
  size={25}
  fillColor="red"
  unfillColor="#FFFFFF"
  text="Custom Checkbox"
  iconStyle={{ borderColor: "red" }}
  textStyle={{ fontFamily: "JosefinSans-Regular" }}
  onPress={(isChecked: boolean) => {}}
/>

Configuration - Props

Property Type Default Description
text string undefined set the checkbox's text
onPress function null set your own onPress functionality after the bounce effect
disableText boolean false if you want to use checkbox without text, you can enable it
size number 25 size of width and height of the checkbox
style style default set/override the container style
textStyle style default set/override the text style
iconStyle style default set/override the icon style
isChecked boolean false set the default checkbox value
fillColor color #f09f48 change the checkbox's filled color
unfillColor color transparent change the checkbox's un-filled color when it's not checked
useNativeDriver boolean true enable/disable the useNativeDriver for animation
iconComponent component Icon set your own icon component
checkIconImageSource image default set your own check icon image
ImageComponent component Image set your own Image component instead of RN's default Image
bounceEffect number 1 change the bounce effect
bounceFriction number 3 change the bounce friction

Future Plans

  • LICENSE
  • Typescript Challange!
  • Version 2.0.0 is alive 🥳
  • 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.