Open Drawer Button

[jacob-cross99]

I have setup a Drawer using the code below. Issue is there is no icon for opening the drawer (but I can still open the drawer). I would like to add an Ionicon from @expo/vector-icons and make it the icon for opening the drawer.

import Expo, { AppLoading } from 'expo';
import React, { Component } from 'react';
import { Text,View } from 'react-native';

import { Ionicons } from '@expo/vector-icons';

import { createRouter, NavigationProvider, StackNavigation, DrawerNavigation, DrawerNavigationItem } from '@expo/ex-navigation';

import ReduxThunk from 'redux-thunk';
import { Provider, connect } from 'react-redux';
import { applyMiddleware, createStore } from 'redux';

import CheckoutView from './views/checkout';
import InitView from './views/init';
import LocationsView from './views/locations';
import LoginView from './views/login';
import ScanView from './views/scan';

import reducers from './reducers';
import store from './store';

const Router = createRouter(() => ({
  checkout: () => CheckoutView,
  init: () => InitView,
  locations: () => LocationsView,
  login: () => LoginView,
  scan: () => ScanView
}));

export default class Setup extends Component {
  render() {
    return (
      <NavigationProvider router={ Router }>
        <Provider store={ createStore(reducers, {}, applyMiddleware(ReduxThunk)) }>
          <DrawerNavigation id='main' initialItem='locations' drawerWidth={200} renderHeader={this._renderHeader}>
            <DrawerNavigationItem id='locations' selectedStyle={styles.selectedItemStyle} renderTitle={isSelected => this._renderTitle('Locations', isSelected)}>
              <StackNavigation id='locations' initialRoute={Router.getRoute('locations')}/>
            </DrawerNavigationItem>
            <DrawerNavigationItem id='checkout' selectedStyle={styles.selectedItemStyle} renderTitle={isSelected => this._renderTitle('Checkout', isSelected)}>
              <StackNavigation id='checkout' initialRoute={Router.getRoute('checkout')}/>
            </DrawerNavigationItem>
          </DrawerNavigation>
        </Provider>
      </NavigationProvider>
    );
  }

  _renderHeader = () => {
    return (
      <View style={styles.header}>
      </View>
    );
  };

  _renderTitle(text: string, isSelected: boolean) {
    return (
      <Text style={[styles.titleText, isSelected ? styles.selectedTitleText : {}]}>
        {text}
      </Text>
    );
  };
}

const styles = {
  header: {
    height: 20
  },
  selectedItemStyle: {
    backgroundColor: 'blue'
  },
  icon: {
    color: '#999',
  },
  selectedText: {
    color: '#0084FF',
  },
  titleText: {
    fontWeight: 'bold'
  },
  selectedTitleText: {
    color: 'white'
  }
}

[jacob-cross99]

Side note, I'm using Native-base and I will be also using buttons on the right side of the navigation bar in some views.