DrawerComponent.js

import React from 'react';
import PropTypes from 'prop-types';
import { View, Image, Text, Dimensions } from 'react-native';
import { DrawerItems } from 'react-navigation';

const SCREEN_HEIGHT = Dimensions.get('window').height;

const BammsLogo = require('../../images/logo_login.png');

const DrawerComponent = (props) => {
  const { Container, DrawerLogo, ProfileContainer, OwnerPosition } = styles;
  return (
    <View style={Container}>

      <Image source={BammsLogo} style={DrawerLogo} />

      <View style={ProfileContainer}>
        <Text style={{ color: '#eebc5a', alignSelf: 'center' }}>Alexander</Text>
        <Text style={OwnerPosition}>
          Tenant Relation Officer
        </Text>
      </View>

      <DrawerItems {...props} onItemPress={props.onPress} />

    </View>
  );
};

DrawerComponent.propTypes = {
  props: PropTypes.any,
};

const styles = {
  Container: {
    backgroundColor: '#252525',
    flex: 1,
  },
  DrawerLogo: {
    alignSelf: 'center',
    marginTop: SCREEN_HEIGHT * (45 / SCREEN_HEIGHT),
  },
  OwnerPosition: {
    color: '#8d8d8d',
    alignSelf: 'center',
    marginTop: 10,
    fontSize: 11,
  },
  ProfileContainer: {
    backgroundColor: '#2d2d2d',
    height: SCREEN_HEIGHT * (87 / SCREEN_HEIGHT),
    justifyContent: 'center',
    marginTop: 10,
  },
};

export default DrawerComponent;

EntryPoint.js

import React, { Component } from 'react';
import { DrawerNavigator, StackNavigator } from 'react-navigation';
import { Provider } from 'react-redux';
import DrawerIcon from '../components/DrawerLayout/DrawerIcon';
import DrawerComponent from '../components/DrawerLayout/DrawerComponent';

import {
  InquiryListScreen,
  DashboardScreen,
  // InquiryDetailScreen,
  LoginScreen,
  AddItemScreen,
} from '../screen';

import store from '../store';

const HOME_ICON = require('../images/home.png');
const INQUIRIES_ICON = require('../images/Inquiry.png');

// TODO: DONT DELETE ANYTHING  AUGUST 3 2017
// this is the component for the drawer

export default class EntryPoint extends Component {
  constructor(props) {
    super(props);

    this.state = { active: false };
  }
  toggleIndicator = () => {
    this.setState({ active: true });
  };

  render() {
    const Dash = StackNavigator(
      {
        NavScreen: {
          screen: DrawerNavigator(
            {
              Dashboard: {
                screen: DashboardScreen,
                navigationOptions: {
                  drawerIcon: () => <DrawerIcon icon={HOME_ICON} active={this.state.active} />,
                  drawerLabel: 'Home',
                },
              },
              InquiryList: {
                screen: InquiryListScreen,
                navigationOptions: {
                  drawerIcon: () => <DrawerIcon icon={INQUIRIES_ICON} active={this.state.active} />,
                  drawerLabel: 'Inquiries',
                },
              },
              // InquiryDetail: {
              //   screen: InquiryDetailScreen,
              //   navigationOptions: {
              //     drawerIcon: () => <DrawerIcon icon={HOME_ICON} />,
              //     drawerLabel: 'Home',
              //   },
              // },
            },
            {
              contentComponent: props => (
                <DrawerComponent {...props} onPress={() => this.toggleIndicator()} />
              ),
              contentOptions: {
                labelStyle: { color: '#ffffff' },
                activeBackgroundColor: 'transparent',
                inactiveBackgroundColor: 'transparent',
                activeItemKey: 'Dashboard',
              },
            },
          ),
        },

        Login: { screen: LoginScreen },
        AddItem: { screen: AddItemScreen },
      },
      {
        headerMode: 'none',
      },
    );

    return (
      <Provider store={store}>
        <Dash onNavigationStateChange={null} />
      </Provider>
    );
  }
}