fix: onPress functionality logic

Author: WrathChaos

lib/BouncyCheckbox.tsx

@@ -184,8 +184,8 @@ class BouncyCheckbox extends React.Component<IBouncyCheckboxProps, IState> {
         }}
         onPressOut={() => {
           this.bounceEffect(bounceEffectOut, bounceVelocityOut, bouncinessOut);
-          this.handleCheck();
         }}
+        onPress={this.handleCheck}
       >
         {this.renderCheckIcon()}
         {this.renderCheckboxText()}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-bouncy-checkbox",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "Fully customizable animated bouncy checkbox for React Native",
   "keywords": [
     "bouncy",

v3example/App.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import {
+  Alert,
   SafeAreaView,
   ScrollView,
   StatusBar,
@@ -8,7 +9,8 @@ import {
   useColorScheme,
   View,
 } from 'react-native';
-import BouncyCheckbox from 'react-native-bouncy-checkbox';
+// import BouncyCheckbox from 'react-native-bouncy-checkbox';
+import BouncyCheckbox from './lib/BouncyCheckbox';
 
 const App = () => {
   return (
@@ -18,15 +20,22 @@ const App = () => {
         alignItems: 'center',
         justifyContent: 'center',
       }}>
-      <BouncyCheckbox size={50} onPress={() => {}} />
+      <BouncyCheckbox
+        size={50}
+        onPress={isChecked => {
+          console.log('OUTSIDE: ', isChecked);
+        }}
+      />
       <BouncyCheckbox
         onPress={() => {}}
         unfillColor={'#030'} //? Inner color of the checkbox
         fillColor="#faf" //? Outer color (radius) of the checkbox
         isChecked={true} //? Checks initial state, doesn't update state yet
         size={35} //? Size of the checkbox
-        innerIconStyle={{
-          borderWidth: 3, //? Make the TODO checkbox thicker than default
+        iconStyle={{
+          borderWidth: 3,
+          alignItems: 'center',
+          justifyContent: 'center',
         }}
       />
     </SafeAreaView>

v3example/__tests__/App-test.tsx

@@ -0,0 +1,59 @@
+import { ViewStyle, TextStyle, StyleSheet } from "react-native";
+
+export const _iconContainer = (
+  size: number,
+  checked: boolean,
+  fillColor: string,
+  unfillColor: string,
+): ViewStyle => {
+  return {
+    width: size,
+    height: size,
+    borderRadius: size / 2,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: checked ? fillColor : unfillColor,
+  };
+};
+
+export const _textStyle = (checked: boolean): TextStyle => {
+  return {
+    fontSize: 16,
+    color: "#757575",
+    textDecorationLine: checked ? "line-through" : "none",
+  };
+};
+
+export default StyleSheet.create<any>({
+  container: {
+    alignItems: "center",
+    flexDirection: "row",
+  },
+  iconImageStyle: {
+    width: 10,
+    height: 10,
+  },
+  textContainer: {
+    marginLeft: 16,
+  },
+  iconContainer: (
+    size: number,
+    checked: boolean,
+    fillColor: string,
+    unfillColor: string,
+  ) => ({
+    width: size,
+    height: size,
+    borderRadius: size / 2,
+    backgroundColor: checked ? fillColor : unfillColor,
+  }),
+  innerIconContainer: (size: number, fillColor: string) => ({
+    width: size,
+    height: size,
+    borderWidth: 1,
+    borderColor: fillColor,
+    borderRadius: size / 2,
+    alignItems: "center",
+    justifyContent: "center",
+  }),
+});

v3example/lib/BouncyCheckbox.style.ts

@@ -0,0 +1,193 @@
+import * as React from 'react';
+import {
+  Text,
+  View,
+  Image,
+  Animated,
+  StyleProp,
+  ViewStyle,
+  TextStyle,
+  Pressable,
+  ImageSourcePropType,
+  TouchableWithoutFeedbackProps,
+} from 'react-native';
+import styles, {_textStyle} from './BouncyCheckbox.style';
+
+type CustomStyleProp = StyleProp<ViewStyle> | Array<StyleProp<ViewStyle>>;
+type CustomTextStyleProp = StyleProp<TextStyle> | Array<StyleProp<TextStyle>>;
+type BaseTouchableProps = Pick<
+  TouchableWithoutFeedbackProps,
+  Exclude<keyof TouchableWithoutFeedbackProps, 'onPress'>
+>;
+
+export interface IBouncyCheckboxProps extends BaseTouchableProps {
+  size?: number;
+  text?: string;
+  fillColor?: string;
+  isChecked?: boolean;
+  unfillColor?: string;
+  disableText?: boolean;
+  bounceEffect?: number;
+  bounceFriction?: number;
+  useNativeDriver?: boolean;
+  disableBuiltInState?: boolean;
+  ImageComponent?: any;
+  TouchableComponent?: any;
+  bounceEffectIn?: number;
+  bounceEffectOut?: number;
+  bounceVelocityIn?: number;
+  bounceVelocityOut?: number;
+  bouncinessIn?: number;
+  bouncinessOut?: number;
+  iconComponent?: React.ReactNode;
+  textComponent?: React.ReactNode;
+  iconStyle?: CustomStyleProp;
+  innerIconStyle?: CustomStyleProp;
+  style?: CustomStyleProp;
+  textStyle?: CustomTextStyleProp;
+  iconImageStyle?: CustomStyleProp;
+  textContainerStyle?: CustomStyleProp;
+  checkIconImageSource?: ImageSourcePropType;
+  onPress?: (checked: boolean) => void;
+}
+
+interface IState {
+  checked: boolean;
+  springValue: Animated.Value;
+  bounceValue: Animated.Value;
+}
+
+const defaultCheckImage = require('./check.png');
+
+class BouncyCheckbox extends React.Component<IBouncyCheckboxProps, IState> {
+  constructor(props: IBouncyCheckboxProps) {
+    super(props);
+    this.state = {
+      checked: false,
+      springValue: new Animated.Value(1),
+      bounceValue: new Animated.Value(1),
+    };
+  }
+
+  componentDidMount() {
+    this.setState({checked: this.props.isChecked || false});
+  }
+
+  bounceEffect = (value: number, velocity: number, bounciness: number) => {
+    const {useNativeDriver = true} = this.props;
+    Animated.spring(this.state.bounceValue, {
+      toValue: value,
+      velocity,
+      bounciness,
+      useNativeDriver,
+    }).start();
+  };
+
+  renderCheckIcon = () => {
+    const {checked} = this.state;
+    const {
+      size = 25,
+      iconStyle,
+      iconComponent,
+      iconImageStyle,
+      fillColor = '#ffc484',
+      ImageComponent = Image,
+      unfillColor = 'transparent',
+      disableBuiltInState,
+      isChecked,
+      innerIconStyle,
+      checkIconImageSource = defaultCheckImage,
+    } = this.props;
+
+    const checkStatus = disableBuiltInState ? isChecked! : checked;
+    return (
+      <Animated.View
+        style={[
+          {transform: [{scale: this.state.bounceValue}]},
+          styles.iconContainer(size, checkStatus, fillColor, unfillColor),
+          iconStyle,
+        ]}>
+        <View
+          style={[styles.innerIconContainer(size, fillColor), innerIconStyle]}>
+          {iconComponent ||
+            (checkStatus && (
+              <ImageComponent
+                source={checkIconImageSource}
+                style={[styles.iconImageStyle, iconImageStyle]}
+              />
+            ))}
+        </View>
+      </Animated.View>
+    );
+  };
+
+  renderCheckboxText = () => {
+    const {
+      text,
+      textComponent,
+      isChecked,
+      textStyle,
+      textContainerStyle,
+      disableBuiltInState,
+      disableText = false,
+    } = this.props;
+    const {checked} = this.state;
+    const checkDisableTextType = typeof disableText === 'undefined';
+    return (
+      (!disableText || checkDisableTextType) &&
+      (textComponent || (
+        <View style={[styles.textContainer, textContainerStyle]}>
+          <Text
+            style={[
+              _textStyle(disableBuiltInState ? isChecked! : checked),
+              textStyle,
+            ]}>
+            {text}
+          </Text>
+        </View>
+      ))
+    );
+  };
+
+  handleCheck = () => {
+    const {disableBuiltInState = false} = this.props;
+    const {checked} = this.state;
+    if (!disableBuiltInState) {
+      this.setState({checked: !checked}, () => {
+        this.props.onPress && this.props.onPress(this.state.checked);
+      });
+    } else {
+      this.props.onPress && this.props.onPress(this.state.checked);
+    }
+  };
+
+  render() {
+    const {
+      style,
+      bounceEffectIn = 0.9,
+      bounceEffectOut = 1,
+      bounceVelocityIn = 0.1,
+      bounceVelocityOut = 0.4,
+      bouncinessIn = 20,
+      bouncinessOut = 20,
+      TouchableComponent = Pressable,
+    } = this.props;
+    return (
+      <TouchableComponent
+        {...this.props}
+        style={[styles.container, style]}
+        onPressIn={() => {
+          this.bounceEffect(bounceEffectIn, bounceVelocityIn, bouncinessIn);
+        }}
+        onPressOut={() => {
+          this.bounceEffect(bounceEffectOut, bounceVelocityOut, bouncinessOut);
+        }}
+        onPress={this.handleCheck}>
+        {this.renderCheckIcon()}
+        {this.renderCheckboxText()}
+      </TouchableComponent>
+    );
+  }
+}
+
+export default BouncyCheckbox;