Installation

Add the dependency:

Zero Dependency 🥳

React Native

npm i react-native-bouncy-checkbox

🥳 Version 4.1.2 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

Animation Configurations

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

License

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