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';

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

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

export const Drawer = createDrawerNavigator({
  Home: {
    screen: StackHomeNavigator,
  },
  Categories: {
    screen: StackCategoriesNavigator,
  },
});