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 (
    
      
    
  );
};

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(null);

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

  return (
    
      
       setCheckboxState(!checkboxState)}
      />
       {
          bouncyCheckboxRef.current?.onCheckboxPress();
        }}>
        
      
    
  );
};

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

• [x] LICENSE
• [x] Typescript Challange!
• [x] Version 2.0.0 is alive 🥳
• [x] Synthetic Press Functionality
• [x] Disable built-in check state
• [x] React Native Bouncy Checkbox Group Library Extension
• [x] New Animation and More Customizable Animation
• [x] Version 3.0.0 is alive 🚀
• [x] Better Documentation
• [x] Version 4.0.0 is alive 🚀
• [x] 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