Open jacob-cross99 opened 7 years ago
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' } }
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.
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.