New props: useNativeDriver & textStyle 🥳

Author: WrathChaos

README.md

@@ -103,6 +103,8 @@ import BouncyCheckbox from "react-native-bouncy-checkbox";
 | iconType              |  string   |     Entypo     | change the react-native-vector-icons' type                            |
 | iconColor             |  string   |    #fdfdfd     | change the react-native-vector-icons' color                           |
 | disableTextDecoration |  boolean  |     false      | enable/disable text decoration for Text                               |
+| useNativeDriver       |  boolean  |      true      | enable/disable the useNativeDriver for animation                      |
+| textStyle             |   style   |    default     | set your own text style                                               |
 
 ### Future Plans
 

example/App.js

@@ -26,7 +26,7 @@ const App = () => {
           />
           <BouncyCheckbox
             fontFamily="JosefinSans-Regular"
-            onPress={checked => {
+            onPress={(checked) => {
               alert(checked);
             }}
           />

example/index.js

@@ -2,8 +2,8 @@
  * @format
  */
 
-import {AppRegistry} from 'react-native';
-import App from './App';
-import {name as appName} from './app.json';
+import { AppRegistry } from "react-native";
+import App from "./App";
+import { name as appName } from "./app.json";
 
 AppRegistry.registerComponent(appName, () => App);

example/package.json

@@ -15,7 +15,7 @@
     "react": "16.12.0",
     "react-native": "0.61.5",
     "react-native-bottom-search-bar": "0.1.1",
-    "react-native-bouncy-checkbox": "0.1.1",
+    "react-native-bouncy-checkbox": "0.1.2",
     "react-native-dynamic-vector-icons": "^0.2.1",
     "react-native-iphone-x-helper": "^1.2.1",
     "react-native-vector-icons": "^6.6.0"

lib/src/BouncyCheckbox.js

@@ -2,14 +2,14 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 import { Animated, Easing, Text, TouchableOpacity, View } from "react-native";
 import Icon from "react-native-dynamic-vector-icons";
-import styles, { iconContainer, textStyle } from "./BouncyCheckbox.style";
+import styles, { _iconContainer, _textStyle } from "./BouncyCheckbox.style";
 
 class BouncyCheckbox extends Component {
   constructor(props) {
     super(props);
     this.state = {
       checked: false,
-      springValue: new Animated.Value(1)
+      springValue: new Animated.Value(1),
     };
   }
 
@@ -18,12 +18,14 @@ class BouncyCheckbox extends Component {
   }
 
   spring = () => {
+    const { useNativeDriver } = this.props;
     const { checked, springValue } = this.state;
     this.setState({ checked: !checked }, () => {
       springValue.setValue(0.7);
       Animated.spring(springValue, {
         toValue: 1,
-        friction: 3
+        friction: 3,
+        useNativeDriver,
       }).start();
       // Outside of the onPress function
       const { onPress } = this.props;
@@ -34,29 +36,29 @@ class BouncyCheckbox extends Component {
   renderCheckIcon = () => {
     const { checked, springValue } = this.state;
     const {
-      checkboxSize,
-      borderColor,
-      fillColor,
-      borderRadius,
-      unfillColor,
-      iconComponent,
       iconName,
       iconSize,
       iconType,
-      iconColor
+      iconColor,
+      fillColor,
+      borderColor,
+      unfillColor,
+      checkboxSize,
+      borderRadius,
+      iconComponent,
     } = this.props;
     return (
       <Animated.View
         style={[
-          iconContainer(
+          _iconContainer(
             checkboxSize,
             checked,
             borderRadius,
             borderColor,
             fillColor,
             unfillColor
           ),
-          { transform: [{ scale: springValue }] }
+          { transform: [{ scale: springValue }] },
         ]}
       >
         {iconComponent || (
@@ -74,10 +76,11 @@ class BouncyCheckbox extends Component {
   render() {
     const {
       text,
+      fontSize,
       textColor,
+      textStyle,
       fontFamily,
-      fontSize,
-      disableTextDecoration
+      disableTextDecoration,
     } = this.props;
 
     return (
@@ -88,13 +91,16 @@ class BouncyCheckbox extends Component {
         {this.renderCheckIcon()}
         <View style={styles.textContainer}>
           <Text
-            style={textStyle(
-              this.state.checked,
-              textColor,
-              fontFamily,
-              fontSize,
-              disableTextDecoration
-            )}
+            style={
+              textStyle ||
+              _textStyle(
+                this.state.checked,
+                textColor,
+                fontFamily,
+                fontSize,
+                disableTextDecoration
+              )
+            }
           >
             {text}
           </Text>
@@ -106,20 +112,21 @@ class BouncyCheckbox extends Component {
 
 BouncyCheckbox.propTypes = {
   text: PropTypes.string,
-  textColor: PropTypes.string,
-  fontFamily: PropTypes.string,
-  borderRadius: PropTypes.number,
-  fontSize: PropTypes.number,
   isChecked: PropTypes.bool,
-  checkboxSize: PropTypes.number,
-  borderColor: PropTypes.string,
-  fillColor: PropTypes.string,
-  unfillColor: PropTypes.string,
+  fontSize: PropTypes.number,
   iconName: PropTypes.string,
-  iconSize: PropTypes.number,
   iconType: PropTypes.string,
+  iconSize: PropTypes.number,
   iconColor: PropTypes.string,
-  disableTextDecoration: PropTypes.bool
+  textColor: PropTypes.string,
+  fillColor: PropTypes.string,
+  fontFamily: PropTypes.string,
+  unfillColor: PropTypes.string,
+  borderColor: PropTypes.string,
+  borderRadius: PropTypes.number,
+  checkboxSize: PropTypes.number,
+  useNativeDriver: PropTypes.bool,
+  disableTextDecoration: PropTypes.bool,
 };
 
 BouncyCheckbox.defaultProps = {
@@ -135,8 +142,9 @@ BouncyCheckbox.defaultProps = {
   iconColor: "#fdfdfd",
   text: "Call my mom 😇",
   borderColor: "#ffc484",
+  useNativeDriver: true,
   unfillColor: "transparent",
-  disableTextDecoration: false
+  disableTextDecoration: false,
 };
 
 export default BouncyCheckbox;

lib/src/BouncyCheckbox.style.js

@@ -1,4 +1,4 @@
-export const iconContainer = (
+export const _iconContainer = (
   size,
   checked,
   borderRadius,
@@ -14,11 +14,11 @@ export const iconContainer = (
     borderWidth: 1,
     alignItems: "center",
     justifyContent: "center",
-    backgroundColor: checked ? fillColor : unfillColor
+    backgroundColor: checked ? fillColor : unfillColor,
   };
 };
 
-export const textStyle = (
+export const _textStyle = (
   checked,
   textColor,
   fontFamily,
@@ -30,15 +30,15 @@ export const textStyle = (
     fontFamily,
     color: textColor,
     textDecorationLine:
-      !disableTextDecoration && checked ? "line-through" : "none"
+      !disableTextDecoration && checked ? "line-through" : "none",
   };
 };
 
 export default {
   container: {
     margin: 8,
     alignItems: "center",
-    flexDirection: "row"
+    flexDirection: "row",
   },
-  textContainer: { marginLeft: 16 }
+  textContainer: { marginLeft: 16 },
 };

package.json

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