@hoangha2001/react-native-bouncy-checkbox v3.0.8

Installation

Add the dependency:

Zero Dependency

React Native

npm i react-native-bouncy-checkbox

Version 3.0.0 is here 🚀

• Typescript
• Zero Dependency
• New and More Customizable Animation
  • bounceEffectIn
  • bounceEffectOut
  • bounceVelocityIn
  • bounceVelocityOut
  • bouncinessIn
  • bouncinessOut
• 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) => {}}
/>

Configuration - Props

Animation Configurations

Synthetic Press Functionality with Manual Check State

Please check the example-manual-state runable project to how to make it work on a real project.

Be careful while using disableBuiltInState you MUST set the isChecked prop to use your own check state manually. The onPress callback will NOT receive the next isChecked when disableBuiltInState is used.

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={{
          height: 30,
          width: 150,
          alignItems: "center",
          justifyContent: "center",
          borderRadius: 12,
          backgroundColor: checkboxState ? "#34eb83" : "#eb4034",
        }}
      >
        <Text
          style={{ color: "#fff" }}
        >{`Check Status: ${checkboxState.toString()}`}</Text>
      </View>
      <BouncyCheckbox
        style={{ marginTop: 16 }}
        ref={(ref: any) => (bouncyCheckboxRef = ref)}
        isChecked={checkboxState}
        text="Synthetic Checkbox"
        disableBuiltInState
        onPress={() => setCheckboxState(!checkboxState)}
      />
      <RNBounceable
        style={{
          marginTop: 16,
          height: 50,
          width: "90%",
          backgroundColor: "#ffc484",
          borderRadius: 12,
          alignItems: "center",
          justifyContent: "center",
        }}
        onPress={() => bouncyCheckboxRef?.onPress()}
      >
        <Text style={{ color: "#fff" }}>Synthetic Checkbox Press</Text>
      </RNBounceable>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({});

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
}}

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 | Separation of Documentation
• 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.