Tab navigator within tab nav within stack

route.js

import React from 'react';
import { createStackNavigator, createBottomTabNavigator, createMaterialTopTabNavigator, TabBarTop, TabNavigator } from 'react-navigation';
import { Text } from 'react-native';
import Welcome from './screens/Welcome';
import Loading from './screens/Loading';
import Offerings from './screens/Offerings';
import CreateAccount from './screens/signup/CreateAccount';
import ReferInformationScreen from './screens/signup/ReferInformationScreen';
import NetWorth from './screens/signup/NetWorth';
import EmploymentStatus from './screens/signup/EmploymentStatus';
import PreTaxIncome from './screens/signup/PreTaxIncome';
import InvestmentObjective from './screens/signup/InvestmentObjective';
import InvestmentTimeHorizon from './screens/signup/InvestmentTimeHorizon';
import PortfolioCall from './screens/signup/PortfolioCall';
import InvestmentExperience from './screens/signup/InvestmentExperience';
import Profile from './screens/Profile';
import Login from './screens/Login';
import AccountVerification from './screens/signup/AccountVerification';
import TermsAndConditions from './screens/signup/TermsAndConditions';
import VerifyFinish from './screens/signup/VerifyFinish';
import AccountVerificationCode from './screens/signup/AccountVerficationCode';
import InvestorType from './screens/signup/InvestorType';
import OfferingsScreen from './screens/OfferingsScreen';
import NewUserPortfolio from './screens/new-user-portfolio/NewUserPortfolio';
import Account from './screens/account/Account';
import Settings from './screens/Settings';
import AnimatedLoader from './modules/loader/AnimatedLoader';
import GlobalStyles from './enum/GlobalStyles';
import Contact from './screens/contact/Contact';
import Research from './screens/Research';
import FooterItem from './components/footer-item/FooterItem';
import NavigationEnums from './enum/Navigation';
import AccountTransaction from './screens/account/AccountTransaction';

import AccountDashboard from './screens/account/AccountDashboard';
import NavHeader from './modules/nav-header/NavHeader';

export const AccountTabs = createMaterialTopTabNavigator(
  {
    Dashboard: {
      screen: AccountDashboard,
      navigationOptions: {
        tabBarLabel: props => (<Text style={labelStyle(props, 'flex-end', 0)}>DASHBOARD</Text>),
      },
    },
    Transactions: {
      screen: AccountTransaction,
      navigationOptions: {
        tabBarLabel: props => (<Text style={labelStyle(props, 'flex-start', 0)}>TRANSACTIONS</Text>),
      },
    },
  },
  {
    swipeEnabled: true,
    tabBarOptions: {
      activeTintColor: GlobalStyles.color.turquoise,
      inactiveTintColor: GlobalStyles.color.black,
      indicatorStyle: {
        backgroundColor: GlobalStyles.color.turquoise,
        // marginLeft: 50,
        // marginRight: 50,
        // width: 100,
      },
      style: {
        height: 35,
        paddingTop: 10,
        backgroundColor: GlobalStyles.color.white,
      },
    },
  },
);

// tabBarLabel style for top navigation Bar
const labelStyle = (props, alignSelf) => ({
  alignSelf,
  alignItems: 'center',
  justifyContent: 'center',
  fontSize: 12,
  fontFamily: GlobalStyles.font.roboto,
  marginTop: -9,
  color: props.focused ? props.tintColor : GlobalStyles.color.black,
});

const MainTabNavigator = createBottomTabNavigator(
  {
    Account: {
      screen: AccountTabs,
      navigationOptions: {
        tabBarLabel: NavigationEnums.ACCOUNT,
        tabBarIcon: ({ focused }) => (
          <FooterItem focused={focused} tabLabel={NavigationEnums.ACCOUNT} />
        ),
      },
    },
    Offerings: {
      screen: Offerings,
      navigationOptions: {
        tabBarLabel: NavigationEnums.OFFERINGS,
        tabBarIcon: ({ focused }) => (
          <FooterItem focused={focused} tabLabel={NavigationEnums.OFFERINGS} />
        ),
      },
    },
    Settings: {
      screen: Settings,
      navigationOptions: {
        tabBarLabel: NavigationEnums.SETTINGS,
        tabBarIcon: ({ focused }) => (
          <FooterItem focused={focused} tabLabel={NavigationEnums.SETTINGS} />
        ),
      },
    },
    Contact: {
      screen: Contact,
      navigationOptions: {
        tabBarLabel: NavigationEnums.CONTACT,
        tabBarIcon: ({ focused }) => (
          <FooterItem focused={focused} tabLabel={NavigationEnums.CONTACT} />
        ),
      },
    },
    Research: {
      screen: Research,
      navigationOptions: {
        tabBarLabel: NavigationEnums.RESEARCH,
        tabBarIcon: ({ focused }) => (
          <FooterItem focused={focused} tabLabel={NavigationEnums.RESEARCH} />
        ),
      },
    },
  },
  {
    tabBarOptions: {
      activeTintColor: GlobalStyles.color.turquoise,
      showIcon: true,
      tabStyle: {
        marginTop: 10,
        marginBottom: 3,
      },
      labelStyle: {
        fontSize: 8,
        fontFamily: GlobalStyles.font.markWebMedium,
      },
      style: {
        borderTopColor: GlobalStyles.color.transparent,
        backgroundColor: GlobalStyles.color.lightGrey10,
      },
      animated: true,
    },
  },
);

MainTabNavigator.navigationOptions = (props) => {
  const stateObject = props.navigation.state;

  const routeIndex = stateObject.index;

  const targetOptionsArray = stateObject.routes[routeIndex];

  // console.log(targetOptionsArray)

  const targetRouteTitle = targetOptionsArray.routeName;

  return {
    header: props => (
      <NavHeader
        middleChoice="title"
        titleText={targetRouteTitle}
        leftChoice="no-notification"
        rightChoice="wallet"
        isNavOptions
      />
    ),
  };
};


const TopLevelNavigator = createStackNavigator({
  Loading: {
    screen: Loading,
    navigationOptions: {
      header: () => null,
    },
  },
  Welcome: {
    screen: Welcome,
    navigationOptions: {
      header: () => null,
    },
  },
  Account: {
    screen: Account,
    navigationOptions: {
      header: () => null,
    },
  },
  CreateAccount: {
    screen: CreateAccount,
    navigationOptions: {
      header: () => null,
    },
  },
  NewUserPortfolio: {
    screen: NewUserPortfolio,
    navigationOptions: {
      header: () => null,
    },
  },
  OfferingsScreen: {
    screen: OfferingsScreen,
    navigationOptions: {
      header: () => null,
    },
  },
  ReferInformationScreen: {
    screen: ReferInformationScreen,
    navigationOptions: {
      header: () => null,
    },
  },
  AccountVerification: {
    screen: AccountVerification,
    navigationOptions: {
      header: () => null,
    },
  },
  TermsAndConditions: {
    screen: TermsAndConditions,
    navigationOptions: {
      header: () => null,
    },
  },
  VerifyFinish: {
    screen: VerifyFinish,
    navigationOptions: {
      header: () => null,
    },
  },
  AccountVerificationCode: {
    screen: AccountVerificationCode,
    navigationOptions: {
      header: () => null,
    },
  },
  InvestorType: {
    screen: InvestorType,
    navigationOptions: {
      header: () => null,
    },
  },
  NetWorth: {
    screen: NetWorth,
    navigationOptions: {
      header: () => null,
    },
  },
  EmploymentStatus: {
    screen: EmploymentStatus,
    navigationOptions: {
      header: () => null,
    },
  },
  PreTaxIncome: {
    screen: PreTaxIncome,
    navigationOptions: {
      header: () => null,
    },
  },
  InvestmentObjective: {
    screen: InvestmentObjective,
    navigationOptions: {
      header: () => null,
    },
  },
  InvestmentTimeHorizon: {
    screen: InvestmentTimeHorizon,
    navigationOptions: {
      header: () => null,
    },
  },
  PortfolioCall: {
    screen: PortfolioCall,
    navigationOptions: {
      header: () => null,
    },
  },
  InvestmentExperience: {
    screen: InvestmentExperience,
    navigationOptions: {
      header: () => null,
    },
  },
  Profile: {
    screen: Profile,
    navigationOptions: {
      header: () => null,
    },
  },
  Login: {
    screen: Login,
    navigationOptions: {
      header: () => null,
    },
  },
  AnimatedLoader: {
    screen: AnimatedLoader,
    navigationOptions: {
      header: () => null,
    },
  },
  TabNavigator: {
    screen: MainTabNavigator,
  },
});

export default TopLevelNavigator;