created tabBar Component as a generic comp changed styles

src/components/tabBar/index.js

@@ -0,0 +1,4 @@
+import TabBar from "./view/tabBarView";
+
+export { TabBar };
+export default TabBar;

src/components/tabBar/view/tabBarStyles.js

@@ -0,0 +1,23 @@
+import EStyleSheet from "react-native-extended-stylesheet";
+
+export default EStyleSheet.create({
+    tab: {
+        flex: 1,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    tabs: {
+        height: 50,
+        flexDirection: "row",
+        justifyContent: "space-around",
+        borderWidth: 1,
+        borderTopWidth: 0,
+        borderLeftWidth: 0,
+        borderRightWidth: 0,
+        borderColor: "#f4f4f4",
+    },
+    tabButton: {
+        flex: 1,
+    },
+    tabButtonText: {},
+});

src/components/tabBar/view/tabBarView.js

@@ -1,7 +1,5 @@
-/* eslint-disable no-unused-vars */
 import React, { Component } from "react";
 import {
-    StyleSheet,
     Text,
     View,
     Animated,
@@ -10,31 +8,34 @@ import {
     Platform,
     Dimensions,
 } from "react-native";
-/* eslint-enable no-unused-vars */
 
-export default class CustomTabBar extends Component {
+// Styles
+import styles from "./tabBarStyles";
+
+export default class TabBar extends Component {
+    /* Props
+    * ------------------------------------------------ TODO: Fill fallowlines
+    *   @prop { type }    name            - Description.
+    *   @prop { type }    name            - Description.
+    * 
+    */
+
     constructor(props) {
         super(props);
 
-        this.state = {
+        this.state = {};
-            activeDefaultColor: "#08086b",
-            inactiveDefaultColor: "#666666",
-        };
     }
 
-    _renderTab(name, page, isTabActive, onPressHandler) {
+    _renderTab = (name, page, isTabActive, onPressHandler) => {
-        const { textStyle } = this.props;
+        const { activeColor, inactiveColor } = this.props;
-        const textColor = isTabActive
+        const textColor = isTabActive ? activeColor : inactiveColor;
-            ? this.props.activeColor
-            : this.props.inactiveColor;
-
         const fontWeight = isTabActive ? "bold" : "normal";
-
         const Button = Platform.OS == "ios" ? ButtonIos : ButtonAndroid;
+        // TODO: make generic component!!
 
         return (
             <Button
-                style={{ flex: 1 }}
+                style={styles.tabButton}
                 key={name}
                 accessible={true}
                 accessibilityLabel={name}
@@ -48,36 +49,43 @@ export default class CustomTabBar extends Component {
                 </View>
             </Button>
         );
-    }
+    };
 
-    _renderUnderline() {
+    _renderUnderline = () => {
-        const containerWidth = Dimensions.get("window").width / 1;
+        const {
-        const numberOfTabs = this.props.tabs.length;
+            activeColor,
-        const underlineWidth = this.props.tabUnderlineDefaultWidth
+            tabs,
-            ? this.props.tabUnderlineDefaultWidth
+            tabUnderlineDefaultWidth,
-            : containerWidth / (numberOfTabs * 2);
+            tabUnderlineScaleX,
-        const scale = this.props.tabUnderlineScaleX
+            scrollValue,
-            ? this.props.tabUnderlineScaleX
+            underlineStyle,
-            : 2;
+        } = this.props;
+
+        const containerWidth = Dimensions.get("window").width;
+        const numberOfTabs = tabs.length;
+        const underlineWidth =
+            tabUnderlineDefaultWidth || containerWidth / (numberOfTabs * 2);
+        const scale = tabUnderlineScaleX || 2;
         const deLen = (containerWidth / numberOfTabs - underlineWidth) / 2;
         const tabUnderlineStyle = {
             position: "absolute",
             width: underlineWidth,
             height: 2,
             borderRadius: 2,
-            backgroundColor: this.props.activeColor,
+            backgroundColor: activeColor,
             bottom: 0,
             left: deLen,
         };
 
-        const translateX = this.props.scrollValue.interpolate({
+        const translateX = scrollValue.interpolate({
             inputRange: [0, 1],
             outputRange: [0, containerWidth / numberOfTabs],
         });
 
         const scaleValue = defaultScale => {
-            let number = 4;
+            const number = 4;
-            let arr = new Array(number * 2);
+            const arr = new Array(number * 2);
+
             return arr.fill(0).reduce(
                 function(pre, cur, idx) {
                     idx == 0
@@ -92,7 +100,7 @@ export default class CustomTabBar extends Component {
             );
         };
 
-        const scaleX = this.props.scrollValue.interpolate(scaleValue(scale));
+        const scaleX = scrollValue.interpolate(scaleValue(scale));
 
         return (
             <Animated.View
@@ -101,29 +109,26 @@ export default class CustomTabBar extends Component {
                     {
                         transform: [{ translateX }, { scaleX }],
                     },
-                    this.props.underlineStyle,
+                    underlineStyle,
                 ]}
             />
         );
-    }
+    };
 
     render() {
+        const { activeTab, backgroundColor, goToPage, style } = this.props;
+
         return (
             <View
                 style={[
                     styles.tabs,
-                    { backgroundColor: this.props.backgroundColor },
+                    { backgroundColor: backgroundColor },
-                    this.props.style,
+                    style,
                 ]}
             >
                 {this.props.tabs.map((name, page) => {
-                    const isTabActive = this.props.activeTab === page;
+                    const isTabActive = activeTab === page;
-                    return this._renderTab(
+                    return this._renderTab(name, page, isTabActive, goToPage);
-                        name,
-                        page,
-                        isTabActive,
-                        this.props.goToPage
-                    );
                 })}
                 {this._renderUnderline()}
             </View>
@@ -144,21 +149,3 @@ const ButtonAndroid = props => (
 const ButtonIos = props => (
     <TouchableOpacity {...props}>{props.children}</TouchableOpacity>
 );
-
-const styles = StyleSheet.create({
-    tab: {
-        flex: 1,
-        alignItems: "center",
-        justifyContent: "center",
-    },
-    tabs: {
-        height: 50,
-        flexDirection: "row",
-        justifyContent: "space-around",
-        borderWidth: 1,
-        borderTopWidth: 0,
-        borderLeftWidth: 0,
-        borderRightWidth: 0,
-        borderColor: "#f4f4f4",
-    },
-});

src/screens/authorProfile/screen/authorScreen.js

@@ -17,7 +17,7 @@ import { Navigation } from "react-native-navigation";
 import FastImage from "react-native-fast-image";
 
 // Internal Components
-import CustomTabBar from "../../home/customTab";
+import { TabBar } from "../../../components/tabBar";
 import PostCard from "../../../components/post-card/postCard";
 import Comment from "../../../components/comment/comment";
 
@@ -443,7 +443,7 @@ class AuthorScreen extends Component {
                         style={styles.tabs}
                         style={{ flex: 1 }}
                         renderTabBar={() => (
-                            <CustomTabBar
+                            <TabBar
                                 style={styles.tabbar}
                                 tabUnderlineDefaultWidth={30} // default containerWidth / (numberOfTabs * 4)
                                 tabUnderlineScaleX={3} // default 3

src/screens/home/home.js

@@ -3,7 +3,8 @@ import { Text, View, Dimensions, TouchableOpacity } from "react-native";
 import { Navigation } from "react-native-navigation";
 
 import ScrollableTabView from "@esteemapp/react-native-scrollable-tab-view";
-import CustomTabBar from "./customTab";
+import TabBar from "../../components/tabBar";
+
 import Ionicons from "react-native-vector-icons/Ionicons";
 
 import FastImage from "react-native-fast-image";
@@ -113,7 +114,7 @@ export default class Home extends React.PureComponent {
                 <ScrollableTabView
                     style={styles.tabView}
                     renderTabBar={() => (
-                        <CustomTabBar
+                        <TabBar
                             style={styles.tabbar}
                             tabUnderlineDefaultWidth={80} // default containerWidth / (numberOfTabs * 4)
                             tabUnderlineScaleX={2} // default 3

src/screens/login/screen/loginScreen.js

@@ -14,7 +14,7 @@ import { Navigation } from "react-native-navigation";
 import Ionicons from "react-native-vector-icons/Ionicons";
 import FastImage from "react-native-fast-image";
 
-import Tabs from "../../home/customTab";
+import { TabBar } from "../../../components/tabBar";
 import ScrollableTabView from "@esteemapp/react-native-scrollable-tab-view";
 import { Login } from "../../../providers/steem/auth";
 
@@ -155,7 +155,7 @@ class LoginScreen extends Component {
                 <ScrollableTabView
                     style={styles.tabView}
                     renderTabBar={() => (
-                        <Tabs
+                        <TabBar
                             style={styles.tabbar}
                             tabUnderlineDefaultWidth={100} // default containerWidth / (numberOfTabs * 4)
                             tabUnderlineScaleX={2} // default 3

src/screens/profile/profile.js

@@ -11,7 +11,7 @@ import moment from "moment";
 import FastImage from "react-native-fast-image";
 
 import ScrollableTabView from "@esteemapp/react-native-scrollable-tab-view";
-import CustomTabBar from "../home/customTab";
+import { TabBar } from "../../../components/tabBar";
 import DiscoverPage from "../discover/discover";
 import PostCard from "../../components/post-card/postCard";
 import Comment from "../../components/comment/comment";
@@ -276,7 +276,7 @@ class ProfilePage extends React.Component {
                             style={styles.tabs}
                             style={{ flex: 1 }}
                             renderTabBar={() => (
-                                <CustomTabBar
+                                <TabBar
                                     style={styles.tabbar}
                                     tabUnderlineDefaultWidth={30} // default containerWidth / (numberOfTabs * 4)
                                     tabUnderlineScaleX={3} // default 3

src/screens/profile/screen/profileScreen.js

@@ -6,7 +6,7 @@ import moment from "moment";
 import FastImage from "react-native-fast-image";
 
 import ScrollableTabView from "@esteemapp/react-native-scrollable-tab-view";
-import CustomTabBar from "../../home/customTab";
+import { TabBar } from "../../../components/tabBar";
 import DiscoverPage from "../../discover/discover";
 import PostCard from "../../../components/post-card/postCard";
 import Comment from "../../../components/comment/comment";
@@ -258,7 +258,7 @@ class ProfileScreen extends React.Component {
                             style={styles.tabs}
                             style={{ flex: 1 }}
                             renderTabBar={() => (
-                                <CustomTabBar
+                                <TabBar
                                     style={styles.tabbar}
                                     tabUnderlineDefaultWidth={30} // default containerWidth / (numberOfTabs * 4)
                                     tabUnderlineScaleX={3} // default 3