Styles separated as original

Author: jasurkurbanov

lib/src/BouncyCheckbox.js

@@ -1,7 +1,8 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import { Animated, Easing, Text, TouchableOpacity, View, StyleSheet } from 'react-native'
+import { Animated, Easing, Text, TouchableOpacity, View} from 'react-native'
 import Icon from 'react-native-dynamic-vector-icons'
+import styles, { _iconContainer, _textStyle } from "./BouncyCheckbox.style"
 
 class BouncyCheckbox extends Component {
   constructor(props) {
@@ -54,16 +55,7 @@ class BouncyCheckbox extends Component {
         <Animated.View
             style={[
               { transform: [{ scale: springValue }] },
-              {
-                width: size,
-                height: size,
-                borderWidth,
-                borderRadius,
-                alignItems: 'center',
-                justifyContent: 'center',
-                borderColor,
-                backgroundColor: checked ? fillColor : unfillColor
-              },
+              _iconContainer(size, borderWidth, borderRadius, borderColor, checked, fillColor, unfillColor),
               iconStyle
             ]}
         >
@@ -80,32 +72,22 @@ class BouncyCheckbox extends Component {
           {this.renderCheckIcon()}
           <View style={styles.textContainer}>
             <Text
-                style={[
-                  {
-                    fontSize,
-                    fontFamily,
+                style={[_textStyle(
+                    this.state.checked,
                     color,
-                    textDecorationLine: !textDecoration && checked ? 'line-through' : 'none'
-                  },
-                  textStyle
-                ]}
-            >
+                    fontFamily,
+                    fontSize,
+                    textDecoration,
+                ), textStyle ]}>
               {text}
             </Text>
+
           </View>
         </TouchableOpacity>
     )
   }
 }
 
-const styles = StyleSheet.create({
-  container: {
-    margin: 8,
-    alignItems: 'center',
-    flexDirection: 'row'
-  },
-  textContainer: { marginLeft: 16 }
-})
 
 BouncyCheckbox.propTypes = {
   borderWidth: PropTypes.number,

lib/src/BouncyCheckbox.style.js

@@ -0,0 +1,36 @@
+export const _iconContainer = (size, borderWidth, borderRadius, borderColor, checked, fillColor, unfillColor) => {
+    return {
+        width: size,
+        height: size,
+        borderWidth,
+        borderRadius,
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderColor,
+        backgroundColor: checked ? fillColor : unfillColor
+    };
+};
+
+export const _textStyle = (
+    checked,
+    color,
+    fontFamily,
+    fontSize,
+    textDecoration
+) => {
+    return {
+        fontSize,
+        fontFamily,
+        color ,
+        textDecorationLine:!textDecoration && checked ? "line-through" : "none",
+    };
+};
+
+export default {
+    container: {
+        margin: 8,
+        alignItems: "center",
+        flexDirection: "row",
+    },
+    textContainer: { marginLeft: 16 },
+};