react-native-bouncy-checkbox

v4.0.0

Published

17 days ago

Fully customizable animated bouncy checkbox for React Native

Downloads

61,133

Installation

Add the dependency:

Zero Dependency 🥳

React Native

npm i react-native-bouncy-checkbox

🥳 Version 4.0.0 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
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)}}
/>

Configuration - Props

| Property | Type |----------------------| :-------: | isChecked | onPress | function | | onLongPress | function | | text | string | textComponent | component | | disableText | boolean | | size | number | | style | style | | textStyle | style | | iconStyle | style | | innerIconStyle | style | | fillColor | color | | unfillColor | color | iconComponent | component | | checkIconImageSource | image | | textContainerStyle | ViewStyle | | ImageComponent | component | | TouchableComponent | Component | | Default | Description | |:-------------:|------------------------------------------------------------------------------------------------------------------------------------------------| | boolean | undefined | if you want to control check state yourself, you can use isChecked prop now! | null | set your own onPress functionality after the bounce effect, callback receives the next isChecked boolean if disableBuiltInState is false | null | set your own onLongPress functionality after the bounce effect, callback receives the next isChecked boolean if disableBuiltInState is false | | undefined | set the checkbox's text | undefined | set the checkbox's text by a React Component | false | if you want to use checkbox without text, you can enable it | 25 | size of width and height of the checkbox | default | set/override the container style | default | set/override the text style | default | set/override the outer icon container style | default | set/override the inner icon container style | #f09f48 | change the checkbox's filled color | | transparent | change the checkbox's un-filled color when it's not checked | Icon | set your own icon component | default | set your own check icon image | default | set/override the text container style | Image | set your own Image component instead of RN's default Image | 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;