tabNav

import { Button, Footer, FooterTab, Icon } from "native-base";
import React from "react";
import { Platform, Image, StyleSheet, Text } from "react-native";
import { createAppContainer, createBottomTabNavigator } from "react-navigation";
import Account from "../../../screen/Container/Account";
import Inbox from "../../../screen/Container/Inbox";
import Order from "../../../screen/Container/Order";
import globalStyles, { colors } from "../../styles/global";
import Home from "../../../screen/Container/Home";
import { store } from "../../../store";
import { isEdit } from "../../../actions/user";
import { setCurrentTab } from "../../../actions/navigation";

const styles = StyleSheet.create({
  btnTab: {
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "white",
    paddingTop: 15,
    height: "100%"
  },
  titleTab: {
    paddingBottom: 10,
    fontSize: 14
  }
});

const MainScreenNavigator = createBottomTabNavigator(
  {
    Home: {
      screen: Home
    },
    Order: {
      screen: Order
    },
    Inbox: {
      screen: Inbox
    },
    Account: {
      screen: Account,
      navigationOptions: {
        header: null
      }
    }
  },
  {
    tabBarPosition: "bottom",
    tabBarComponent: props => {
      let navigateTab = (routeName, index) => {
        props.navigation.navigate(routeName);
        store.dispatch(setCurrentTab(routeName));

        routeName !== "Account" ? store.dispatch(isEdit(false)) : null;
      };
      let index = props.navigation.state.index;
      return (
        <Footer
          style={{
            backgroundColor: "white",
            borderTopColor: "#f4f4f4",
            borderTopWidth: 0.8
          }}
        >
          <FooterTab
            style={{
              backgroundColor: "white"
            }}
          >
            <Button
              vertical
              style={styles.btnTab}
              transparent
              active={index === 0}
              onPress={() => navigateTab("Home", index)}
            >
              {index === 0 ? (
                <Image
                  source={require("../../img/icon/ic_home/ic_home_active.png")}
                />
              ) : (
                <Image source={require("../../img/icon/ic_home/ic_home.png")} />
              )}
              <Text
                style={[
                  globalStyles.font,
                  styles.titleTab,
                  {
                    color: index === 0 ? "#2a48b2" : "#c4c4c4"
                  }
                ]}
              >
                Home
              </Text>
            </Button>
            <Button
              vertical
              style={styles.btnTab}
              transparent
              active={index === 1}
              onPress={() => navigateTab("Order", index)}
            >
              {index === 1 ? (
                <Image
                  source={require("../../img/icon/ic_pesanan/ic_pesanan_active.png")}
                />
              ) : (
                <Image
                  source={require("../../img/icon/ic_pesanan/ic_pesanan.png")}
                />
              )}
              <Text
                style={[
                  globalStyles.font,
                  styles.titleTab,
                  {
                    color: index === 1 ? "#2a48b2" : "#c4c4c4"
                  }
                ]}
              >
                Order
              </Text>
            </Button>
            <Button
              vertical
              style={styles.btnTab}
              transparent
              active={index === 2}
              onPress={() => navigateTab("Inbox", index)}
            >
              {index === 2 ? (
                <Image
                  source={require("../../img/icon/ic_inbox/ic_inbox_active.png")}
                />
              ) : (
                <Image
                  source={require("../../img/icon/ic_inbox/ic_inbox.png")}
                />
              )}
              <Text
                style={[
                  globalStyles.font,
                  styles.titleTab,
                  {
                    marginTop: 5,
                    color: index === 2 ? "#2a48b2" : "#c4c4c4"
                  }
                ]}
              >
                Inbox
              </Text>
            </Button>
            <Button
              vertical
              style={styles.btnTab}
              transparent
              active={index === 3}
              onPress={() => navigateTab("Account", index)}
            >
              {index === 3 ? (
                <Image
                  source={require("../../img/icon/ic_account/ic_Account_active.png")}
                />
              ) : (
                <Image
                  source={require("../../img/icon/ic_account/ic_Account.png")}
                />
              )}
              <Text
                style={[
                  globalStyles.font,
                  styles.titleTab,
                  {
                    color: index === 3 ? "#2a48b2" : "#c4c4c4"
                  }
                ]}
              >
                Account
              </Text>
            </Button>
          </FooterTab>
        </Footer>
      );
    },
    tabBarOptions: {
      activeTintColor: colors.WHITE,
      activeBackgroundColor: colors.DARK_BLUE,
      iconStyle: { flex: 1, width: 15, height: 15, padding: 0 },
      // labelStyle: { fontSize: 10, paddingHorizontal: 0 },
      style: {
        backgroundColor:
          Platform.OS === "ios" ? colors.DARK_BLUE : colors.DARK_BLUE,
        marginBottom: Platform.OS == "android" ? -10 : 0,
        // height: Metrics.screenHeight * 0.1,
        borderTopColor: "#fafafa"
        // flex: 1,
      },
      indicatorStyle: {
        flex: 1,
        backgroundColor: colors.DARK_BLUE
      },
      tabStyle: {
        flex: 1,
        backgroundColor: Platform.OS == "android" ? colors.DARK_BLUE : null
      },
      labelStyle: {
        fontSize: 10
      }
    }
  }
);

const Tab = createAppContainer(MainScreenNavigator);

export default Tab;