Skip to content

WrathChaos/react-native-bouncy-checkbox

Repository files navigation

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:

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

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

React Native Bouncy Checkbox

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

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.