MainNavigator.js

/* eslint-disable react/prop-types */
import React from 'react';
import { createSwitchNavigator } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { createBottomTabNavigator } from 'react-navigation-tabs';

import LoginScreen from '../screens/Auth/LoginScreen';
import LoadingScreen from '../screens/Auth/LoadingScreen';
import RegistrationScreen from '../screens/Auth/RegistrationScreen';
import HomeScreen from '../screens/App/HomeScreen';
import ProfileScreen from '../screens/App/ProfileScreen';
import EditProfileScreen from '../screens/App/EditProfileScreen';

import { Icon } from '@ui-kitten/components';
import { Colors } from '../styles/theme';

const AuthStack = createStackNavigator({
  Login: {
    screen: LoginScreen,
    navigationOptions: {
      header: null,
    },
  },
  Register: {
    screen: RegistrationScreen,
  },
});

const TabStack = createBottomTabNavigator(
  {
    Home: {
      screen: HomeScreen,
      navigationOptions: {
        tabBarIcon: ({ focused, tintColor }) => {
          let iconName = `home${focused ? '' : '-outline'}`;
          return <Icon name={iconName} width={24} height={24} fill={tintColor} />;
        },
      },
    },
    Profile: {
      screen: ProfileScreen,
      navigationOptions: {
        tabBarIcon: ({ focused, tintColor }) => {
          let iconName = `person${focused ? '' : '-outline'}`;
          return <Icon name={iconName} width={24} height={24} fill={tintColor} />;
        },
      },
    },
  },
  {
    tabBarOptions: {
      showIcon: true,
      showLabel: false,
      activeTintColor: Colors.primary, //Can be hex code.
      inactiveTintColor: Colors.primary,
    },
  }
);

const AppStack = createStackNavigator(
  {
    MainTabs: {
      screen: TabStack,
      navigationOptions: {
        header: null,
      },
    },
    EditProfile: {
      screen: EditProfileScreen,
      navigationOptions: {
        title: 'Edit Profile',
      },
    },
  },
  {
    defaultNavigationOptions: {
      headerStyle: {
        //Add something
      },
    },
  }
);

const MainNavigator = createSwitchNavigator(
  {
    Loading: LoadingScreen,
    App: AppStack,
    Auth: AuthStack,
  },
  {
    initialRouteName: 'Loading',
  }
);

export default MainNavigator;