How to integrate icon in menu drawer next to route title

Question

I have been trying to make the home icon appear next to the home page route in the menu drawer. The first time I reloaded the screen after integrating the icon code, it showed the same screen as before integrating the code, which is the page name without the icon with the menu drawer. After a few other modifications, I received an error that stays even after undoing the modification. How can I make the home icon appear next to the home title? Please, can someone help?

here is the error that is shown:

Failed to load bundle(http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false) with error:(SyntaxError: /Users/camillebasbous/Project/Menu/DrawerNavigator.js: Unexpected token, expected ";" (19:11)

[0m [90m 17 | [39m[0m
[0m [90m 18 | [39m[0m
[0m[31m[1m>[22m[39m[90m 19 | [39m  render() {[0m
[0m [90m    | [39m           [31m[1m^[22m[39m[0m
[0m [90m 20 | [39m    [36mreturn[39m ([0m
[0m [90m 21 | [39m      [33m<[39m[33mView[39m style[33m=[39m{styles[33m.[39mcontainer}[33m>[39m[0m
[0m [90m 22 | [39m      [0m (null))

__38-[RCTCxxBridge loadSource:onProgress:]_block_invoke.228
    RCTCxxBridge.mm:414
___ZL36attemptAsynchronousLoadOfBundleAtURLP5NSURLU13block_pointerFvP18RCTLoadingProgressEU13block_pointerFvP7NSErrorP9RCTSourceE_block_invoke.118
__80-[RCTMultipartDataTask URLSession:streamTask:didBecomeInputStream:outputStream:]_block_invoke
-[RCTMultipartStreamReader emitChunk:headers:callback:done:]
-[RCTMultipartStreamReader readAllPartsWithCompletionCallback:progressCallback:]
-[RCTMultipartDataTask URLSession:streamTask:didBecomeInputStream:outputStream:]
__88-[NSURLSession delegate_streamTask:didBecomeInputStream:outputStream:completionHandler:]_block_invoke
__NSBLOCKOPERATION_IS_CALLING_OUT_TO_A_BLOCK__
-[NSBlockOperation main]
-[__NSOperationInternal _start:]
__NSOQSchedule_f
_dispatch_call_block_and_release
_dispatch_client_callout
_dispatch_continuation_pop
_dispatch_async_redirect_invoke
_dispatch_root_queue_drain
_dispatch_worker_thread2
_pthread_wqthread
start_wqthread

I tried modifying the code but an error occurred so I undid it to the last one and have tried resetting the bundler but I am still getting the error I had since modifying it

import * as React from 'react';
import { Text, View, Image, ScrollView, StyleSheet } from 'react-native';
import {
  createDrawerNavigator,
  createAppContainer,
  DrawerItems,
  SafeAreaView,
  contentOptions
} from 'react-navigation';
import homePage from './homePage'
import SettingScreen from './SettingScreen'
import LiveClips from './LiveClips'
import ViewStats from './ViewStats'
import TransferMethod from './TransferMethod'
import Icon from 'react-native-vector-icons/Ionicons'

class DrawerNavigator extends React.Component {

  render() {
    return (
      <View style={styles.container}>

   <homePage/>

      </View>
    );
  }
}




const RouteConfigs = {
  Home: {
    screen: homePage,
  },
'Live clips':{
screen: LiveClips,

},
'View stats':{
screen: ViewStats,

},
'Transfer method':{
screen: TransferMethod,

},
  Settings: {
    screen: SettingScreen,
  },
};

const DrawerNavigatorConfig = {
  intialRouteName: 'Home',
  navigationOptions: {
  drawerIcon: ({ tintColor }) => (
          <Icon name= "home">

        </Icon>

  ),
  },
  contentOptions: {
    // add your styling here 
    activeTintColor: '#0D9DCE',
      inactiveTintColor: '#9B9B9B',
  labelStyle:{fontFamily:'Helvetica',
  fontSize: 14,},
    itemsContainerStyle: {
      marginVertical: 200,

    },
    iconContainerStyle: {
      opacity: 1,
    },
  },
  drawerBackgroundColor: '#262A2C', // sets background color of drawer
};

const Navigator = createDrawerNavigator(RouteConfigs, DrawerNavigatorConfig);

 export default createAppContainer(Navigator);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',

  }
});

Answer 1

Ionicons has two names for home icon ios-home and md-home. Add navigationOptions under each screen to add the icons.

const RouteConfigs = {
  Home: {
    screen: HomePage,
    navigationOptions: {
      drawerIcon: ({ tintColor }) => (
        <Icon name="ios-home" size={20} color={tintColor} />
      ),
    },
  },

  Settings: {
    screen: SettingScreen,
    navigationOptions: {
      drawerIcon: ({ tintColor }) => (
        <Icon name="ios-settings" size={20} color={tintColor} />
      ),
    },
  },
 ....
};

Working Demo