react-native-bouncy-checkbox

Installation

Add the dependency:

Zero Dependency 🥳

React Native

npm i react-native-bouncy-checkbox

🥳 Version 4.1.1 is here 🚀

• Complete re-written with Modern Functional Component
• Fully Refactored with React Hooks
• Imperative Handle Support
• Checkbox is controllable with isChecked prop
• onLongPress support
• testID support
• Finally, get rid of disableBuiltInState prop
• Cool customizable animation options
• Control your own check state with useBuiltInState to disable
• Typescript
• Community Supported Stable Version

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" }}
  innerIconStyle={{ borderWidth: 2 }}
  textStyle={{ fontFamily: "JosefinSans-Regular" }}
  onPress={(isChecked: boolean) => {console.log(isChecked)}}
/>

Disable Built-In State

To fully control checkbox state outside with your own state, just set useBuiltInState to false and send your state value to isChecked prop

const [localChecked, setLocalChecked] = React.useState(false);

 <BouncyCheckbox
   isChecked={localChecked}
   disableText
   fillColor="green"
   size={50}
   useBuiltInState={false}
   iconImageStyle={styles.iconImageStyle}
   iconStyle={{borderColor: 'green'}}
   onPress={(checked: boolean) => {
         // These two should be same value
         console.log('::Checked::', checked);
         console.log('::LocalChecked::', localChecked);
         setLocalChecked(!localChecked);
   }}
/>

Configuration - Props

Property	Type	Default	Description
isChecked	boolean	undefined	if you want to control check state yourself, you can use isChecked prop now!
onPress	function	null	set your own onPress functionality after the bounce effect, callback receives the next isChecked boolean if disableBuiltInState is false
onLongPress	function	null	set your own onLongPress functionality after the bounce effect, callback receives the next isChecked boolean if disableBuiltInState is false
text	string	undefined	set the checkbox's text
textComponent	component	undefined	set the checkbox's text by a React Component
disableText	boolean	false	if you want to use checkbox without text, you can enable it
useBuiltInState	boolean	false	to fully control the checkbox itself outside with your own state, just set to false and send your state value to isChecked prop
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 outer icon container style
innerIconStyle	style	default	set/override the inner icon container style
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
checkIconImageSource	image	default	set your own check icon image
textContainerStyle	ViewStyle	default	set/override the text container style
ImageComponent	component	Image	set your own Image component instead of RN's default Image
TouchableComponent	Component	Pressable	set/override the main TouchableOpacity component with any Touchable Component like Pressable

Animation Configurations

Property	Type	Default	Description
bounceEffectIn	number	0.9	change the bounce effect when press in
bounceEffectOut	number	1	change the bounce effect when press out
bounceVelocityIn	number	0.1	change the bounce velocity when press in
bounceVelocityOut	number	0.4	change the bounce velocity when press out
bouncinessIn	number	20	change the bounciness when press in
bouncinessOut	number	20	change the bounciness when press out

Synthetic Press Functionality with Manual Controlling State

Please check the example runnable project to how to make it work on a real project.

• The onPress callback WILL RECEIVE the next isChecked when using ref is used.
• You MUST set the isChecked prop to use your own check state manually.

Here is the basic implementation:

import React from "react";
import {
  SafeAreaView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from "react-native";
import BouncyCheckbox from "./lib/BouncyCheckbox";
import RNBounceable from "@freakycoder/react-native-bounceable";

const App = () => {
  let bouncyCheckboxRef: BouncyCheckbox | null = null;
  const [checkboxState, setCheckboxState] = React.useState(false);

  return (
    <SafeAreaView
      style={{
        flex: 1,
        alignItems: "center",
        justifyContent: "center",
      }}
    >
      <View style={styles.checkboxesContainer}>
        <Text style={styles.titleSynthetic}>Synthetic Checkbox</Text>
        <Text style={styles.checkboxSyntheticSubtitle}>
          Control Checkbox with Another Button
        </Text>
        <View style={styles.checkboxSyntheticContainer}>
          <BouncyCheckbox
                  ref={bouncyCheckboxRef}
                  disableText
                  fillColor="#9342f5"
                  size={50}
                  iconImageStyle={styles.iconImageStyle}
                  iconStyle={{borderColor: '#9342f5'}}
                  onPress={isChecked => {
                    Alert.alert(`Checked:: ${isChecked}`);
                  }}
          />
          <RNBounceable
                  style={styles.syntheticButton}
                  onPress={() => {
                    if (bouncyCheckboxRef.current) {
                      bouncyCheckboxRef.current.onCheckboxPress();
                    }
                  }}>
            <Text style={{color: '#fff', fontWeight: '600'}}>
              Change Checkbox
            </Text>
          </RNBounceable>
        </View>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({});

export default App;

Another example with isChecked prop:

import React, {useRef} from 'react';
import {ImageBackground, StyleSheet, Text, View} from 'react-native';
import RNBounceable from '@freakycoder/react-native-bounceable';
import BouncyCheckbox, {BouncyCheckboxHandle} from './build/dist';

const App = () => {
  const bouncyCheckboxRef = useRef<BouncyCheckboxHandle>(null);

  const [checkboxState, setCheckboxState] = React.useState(false);

  return (
    <ImageBackground
      style={styles.container}
      source={require('./assets/bg.jpg')}>
      <View
        style={[
          styles.stateContainer,
          {
            backgroundColor: checkboxState ? '#34eb83' : '#eb4034',
          },
        ]}>
        <Text
          style={
            styles.stateTextStyle
          }>{`Check Status: ${checkboxState.toString()}`}</Text>
      </View>
      <BouncyCheckbox
        size={50}
        textStyle={styles.textStyle}
        style={{marginTop: 16}}
        iconImageStyle={styles.iconImageStyle}
        fillColor={'#00C0EE'}
        unFillColor={'transparent'}
        ref={bouncyCheckboxRef}
        isChecked={checkboxState}
        text="Synthetic Checkbox"
        onPress={() => setCheckboxState(!checkboxState)}
      />
      <RNBounceable
        style={styles.syntheticButton}
        onPress={() => {
          bouncyCheckboxRef.current?.onCheckboxPress();
        }}>
        <Text style={{color: '#fff'}}>Synthetic Checkbox Press</Text>
      </RNBounceable>
    </ImageBackground>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  stateContainer: {
    height: 45,
    width: 175,
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 12,
    marginBottom: 12,
  },
  stateTextStyle: {
    color: '#fff',
    fontWeight: 'bold',
  },
  syntheticButton: {
    height: 50,
    marginTop: 64,
    borderRadius: 12,
    width: '60%',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#00C0EE',
  },
  iconImageStyle: {
    width: 20,
    height: 20,
  },
  textStyle: {
    color: '#010101',
    fontWeight: '600',
  },
});

export default App;

React Native Bouncy Checkbox Group

We have also this library's checkbox group library as well 🍻 Please take a look 😍

FAQ

How to disable strikethrough?

• Simply use the textStyle prop and set the textDecorationLine to none

textStyle={{
  textDecorationLine: "none",
}}

How to make square checkbox?

• Simply use the iconStyle prop and set the borderRadius to 0

innerIconStyle={{
  borderRadius: 0, // to make it a little round increase the value accordingly
}}

How to use multiple checkbox and control all of them with one checkbox?

• You can use isChecked prop to control all of them one by one and with simple handling function to make them all checked or not

  const data = [
    {
      id: 0,
      isChecked: false,
    },
    {
      id: 1,
      isChecked: false,
    },
    {
      id: 2,
      isChecked: false,
    },
  ]

  const [checkBoxes, setCheckBoxes] = useState(data);


  const handleCheckboxPress = (checked: boolean, id: number) => {
    if (id === 0) {
      setCheckBoxes(
        checkBoxes.map(item => ({
          ...item,
          isChecked: checked,
        })),
      );
      return;
    }

    setCheckBoxes(
      checkBoxes.map(item =>
        item.id === id ? {...item, isChecked: checked} : item,
      ),
    );
  };

Please check out the example for this: https://github.com/WrathChaos/react-native-bouncy-checkbox-check-all-with-one-checkbox

Future Plans

• LICENSE
• Typescript Challange!
• Version 2.0.0 is alive 🥳
• Synthetic Press Functionality
• Disable built-in check state
• React Native Bouncy Checkbox Group Library Extension
• New Animation and More Customizable Animation
• Version 3.0.0 is alive 🚀
• Better Documentation
• Version 4.0.0 is alive 🚀
• Get rid of disableBuiltInState prop
• Write an article about the lib on Medium

Credits

Photo by Milad Fakurian on Unsplash

Author

FreakyCoder, [e-mail]

License

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