navigator.js

import React from 'react';
import { createDrawerNavigator, createStackNavigator } from 'react-navigation';
import { Home, Categories } from './views/';
import { MenuButton } from './common';
import { Button } from 'react-native';
import Theme from './common/style/theme.style';
import Icon from 'react-native-vector-icons/FontAwesome';
import themeStyle from './common/style/theme.style';

const InnerNavigator = createDrawerNavigator(
  {
    Home: {
      screen: Home,
      navigationOptions: {
        drawerIcon: ({ tintColor }) => (
          <Icon name="home" size={24} style={{ color: 'black' }} />
        ),
      },
    },
    Categories: {
      screen: Categories,
      navigationOptions: {
        drawerIcon: ({ tintColor }) => (
          <Icon name="users" size={24} style={{ color: 'black' }} />
        ),
      },
    },
  },
  {
    contentOptions: {
      activeTintColor: themeStyle.SECONDARY_COLOR,
    },
  }
);

export const RootNavigator = createStackNavigator(
  {
    Landing: {
      screen: InnerNavigator,
      navigationOptions: {
        title: 'Home',
      },
    },
  },
  {
    navigationOptions: ({ navigation }) => ({
      headerLeft: <MenuButton navigation={navigation} />,
      headerStyle: {
        backgroundColor: Theme.PRIMARY_COLOR,
      },
      headerTitleStyle: {
        color: '#fff',
      },
      headerTintColor: {},
    }),
  }
);