Re-structre of the library. All icons are able to disable now except …

…main iocn

lib/src/components/BottomBar.js → lib/src/BottomBar.js

@@ -1,10 +1,11 @@
 import React, { Component } from "react";
 import { View } from "react-native";
-// Other Components
-import Shape from "./Shape";
-import BottomIcons from "./BottomIcons";
-// Styles
-import styles from "./styles/BottomBar.style";
+/**
+ * ? Local Imports
+ */
+import styles from "./BottomBar.style";
+import Shape from "./components/Shape/Shape";
+import BottomIcons from "./components/BottomIcons/BottomIcons";
 
 export default class BottomBar extends Component {
   renderTabBar = () => {
@@ -38,6 +39,7 @@ export default class BottomBar extends Component {
           secondIconComponent={secondIconComponent}
           thirdIconComponent={thirdIconComponent}
           fourthIconComponent={fourthIconComponent}
+          {...this.props}
         />
       </View>
     );

lib/src/components/BottomIcons/BottomIcons.js

@@ -0,0 +1,82 @@
+import React, { Component } from "react";
+import { View } from "react-native";
+/**
+ * ? Local Imports
+ */
+import styles from "./BottomIcons.style";
+import MiniButton from "../MiniButton/MiniButton";
+import MainIconButtonStyle from "../MainIconButton/MainIconButton.style";
+import MainIconButton from "../MainIconButton/MainIconButton";
+
+export default class BottomIcons extends Component {
+  render() {
+    const {
+      mainIcon,
+      mainIconColor,
+      mainIconOnPress,
+      mainIconGradient,
+      disableFourthIcon,
+      miniButtonsColor,
+      disableFirstIcon,
+      disableThirdIcon,
+      disableSecondIcon,
+      mainIconComponent,
+      firstIconComponent,
+      thirdIconComponent,
+      fourthIconComponent,
+      secondIconComponent
+    } = this.props;
+
+    return (
+      <View style={[styles.iconContainer]}>
+        <View style={styles.iconStyles.main}>
+          {!disableFirstIcon &&
+            (firstIconComponent || (
+              <MiniButton
+                style={styles.iconStyles.firstIconStyle}
+                color={miniButtonsColor}
+              />
+            ))}
+          {!disableSecondIcon &&
+            (secondIconComponent || (
+              <MiniButton
+                style={styles.iconStyles.secondIconStyle}
+                color={miniButtonsColor}
+              />
+            ))}
+          <View style={[MainIconButtonStyle.mainIconStyle.container]}>
+            {mainIconComponent || (
+              <MainIconButton
+                mainIcon={mainIcon}
+                mainIconColor={mainIconColor}
+                mainIconGradient={mainIconGradient}
+                mainIconOnPress={mainIconOnPress}
+              />
+            )}
+          </View>
+          {!disableThirdIcon &&
+            (thirdIconComponent || (
+              <MiniButton
+                style={styles.iconStyles.thirdIconStyle}
+                color={miniButtonsColor}
+              />
+            ))}
+          {!disableFourthIcon &&
+            (fourthIconComponent || (
+              <MiniButton
+                style={styles.iconStyles.fourthIconStyle}
+                color={miniButtonsColor}
+              />
+            ))}
+        </View>
+      </View>
+    );
+  }
+}
+
+BottomIcons.defaultProps = {
+  disableFirstIcon: false,
+  disableSecondIcon: false,
+  disableThirdIcon: false,
+  disableFourthIcon: false
+};

lib/src/components/styles/BottomIcons.style.js → lib/src/components/BottomIcons/BottomIcons.style.js

@@ -1,5 +1,5 @@
-import { Dimensions, Platform } from "react-native";
-import colors from "./common/colors";
+import { Platform } from "react-native";
+import colors from "../styles/colors";
 import {
   isIPhoneXFamily,
   ScreenWidth
@@ -85,45 +85,6 @@ export default {
           alignSelf: "flex-end"
         }
       })
-    },
-    mainIconStyle: {
-      container: {
-        ...Platform.select({
-          ios: {
-            bottom: 15,
-            alignItems: "center",
-            justifyContent: "center"
-          },
-          android: {
-            bottom: 5,
-            alignItems: "center",
-            justifyContent: "center"
-          }
-        })
-      },
-      button: {
-        ...Platform.select({
-          ios: {
-            width: 70,
-            height: 70,
-            borderRadius: 35,
-            position: "absolute",
-            shadowColor: colors.theme.light.shadowColor,
-            shadowOffset: { width: 2, height: 3 },
-            shadowOpacity: 0.3,
-            shadowRadius: 3
-          },
-          android: {
-            width: 70,
-            height: 70,
-            borderRadius: 35,
-            position: "relative",
-            alignItems: "center",
-            justifyContent: "center",
-            backgroundColor: colors.theme.light.primary
-          }
-        })
-      }
     }
   }
 };

lib/src/components/MainIconButton.js → lib/src/components/MainIconButton/MainIconButton.js

@@ -1,28 +1,14 @@
 import React, { Component } from "react";
-import { Platform, View, TouchableOpacity } from "react-native";
+import { View, TouchableOpacity } from "react-native";
 import LinearGradient from "react-native-linear-gradient";
 import Icon from "react-native-dynamic-vector-icons";
-import colors from "./styles/common/colors";
-import { defaultShadowStyle } from "./styles/common/shared.style";
-import BottomIconsStyle from "./styles/BottomIcons.style";
+/**
+ * ? Local Imports
+ */
+import colors from "../styles/colors";
+import styles from "./MainIconButton.style";
+import { defaultShadowStyle } from "../styles/shared.style";
 
-const styles = {
-  container: {
-    position: "relative",
-    alignItems: "center",
-    justifyContent: "center",
-    elevation: 5,
-    shadowRadius: 3,
-    shadowOpacity: 0.3,
-    shadowColor: "#000",
-    shadowOffset: { width: 0, height: 2 }
-  },
-  iconContainer: {
-    alignItems: "center",
-    justifyContent: "center",
-    marginTop: Platform.OS === "ios" ? 15 : 0
-  }
-};
 const blueGradient = ["rgba(156, 180, 249, 1.0)", "rgba(108, 136, 246, 1.0)"];
 
 export default class MainIconButton extends Component {
@@ -39,13 +25,10 @@ export default class MainIconButton extends Component {
     return (
       <TouchableOpacity style={styles.container} onPress={mainIconOnPress}>
         <LinearGradient
-          start={{ x: 0, y: 1 }}
           end={{ x: 1, y: 0 }}
+          start={{ x: 0, y: 1 }}
           colors={mainIconGradient || blueGradient}
-          style={[
-            BottomIconsStyle.iconStyles.mainIconStyle.button,
-            defaultShadowStyle
-          ]}
+          style={[styles.mainIconStyle.button, defaultShadowStyle]}
         >
           <View style={[styles.iconContainer, defaultShadowStyle]}>
             {mainIcon || (

lib/src/components/MainIconButton/MainIconButton.style.js

@@ -0,0 +1,59 @@
+import { Platform } from "react-native";
+import colors from "../styles/colors";
+
+export default {
+  mainIconStyle: {
+    container: {
+      ...Platform.select({
+        ios: {
+          bottom: 15,
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        android: {
+          bottom: 5,
+          alignItems: "center",
+          justifyContent: "center"
+        }
+      })
+    },
+    button: {
+      ...Platform.select({
+        ios: {
+          width: 70,
+          height: 70,
+          borderRadius: 35,
+          position: "absolute",
+          shadowColor: colors.theme.light.shadowColor,
+          shadowOffset: { width: 2, height: 3 },
+          shadowOpacity: 0.3,
+          shadowRadius: 3
+        },
+        android: {
+          width: 70,
+          height: 70,
+          borderRadius: 35,
+          position: "relative",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: colors.theme.light.primary
+        }
+      })
+    }
+  },
+  container: {
+    position: "relative",
+    alignItems: "center",
+    justifyContent: "center",
+    elevation: 5,
+    shadowRadius: 3,
+    shadowOpacity: 0.3,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 2 }
+  },
+  iconContainer: {
+    alignItems: "center",
+    justifyContent: "center",
+    marginTop: Platform.OS === "ios" ? 15 : 0
+  }
+};

lib/src/components/MiniButton.js → lib/src/components/MiniButton/MiniButton.js

@@ -1,9 +1,12 @@
 import React, { Component } from "react";
 import { TouchableOpacity, View } from "react-native";
 import Icon from "react-native-dynamic-vector-icons";
-import styles from "./styles/MiniButton.style";
-import colors from "./styles/common/colors";
-import { shadowStyle } from "./styles/common/shared.style";
+/**
+ * ? Local Imports
+ */
+import colors from "../styles/colors";
+import styles from "./MiniButton.style";
+import { shadowStyle } from "../styles/shared.style";
 
 export default class MiniButton extends Component {
   render() {

lib/src/components/Shape.js → lib/src/components/Shape/Shape.js

@@ -1,20 +1,18 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
-import { View, Platform } from "react-native";
-import { _shapeStyle, _shadowStyle } from "./styles/Shape.style";
+import { View } from "react-native";
 import Androw from "react-native-androw";
+/**
+ * ? Local Imports
+ */
+import { _shapeStyle, _shadowStyle } from "./Shape.style";
 
 class Shape extends Component {
   render() {
     const { shapeStyle, shapeColor, shapeShadowColor } = this.props;
     return (
       <Androw style={_shadowStyle(shapeShadowColor)}>
-        <View
-          style={[
-            _shapeStyle(shapeColor),
-            shapeStyle
-          ]}
-        />
+        <View style={[_shapeStyle(shapeColor), shapeStyle]} />
       </Androw>
     );
   }