React Native - navigation.addListner is not an object

App.js:

import React, { Component } from 'react';
import {View,Text} from 'react-native';
import { createDrawerNavigator } from 'react-navigation-drawer';
import {createAppContainer} from 'react-navigation';

import Epics from './screens/tmp';
import Pager from './screens/Pager';

const DrawerNavigator = createDrawerNavigator({
 Home: {screen: Epics},
 Page: {screen: Pager}
},{initialRouteName: 'Home'});

const Stack = createAppContainer(DrawerNavigator);

export default class App extends Component {
  render() {
    return <Stack />;
  }
}

Trying to invoke fetch API everytime a user lands on screen using navigation addListner event

componentDidMount() {
   this.loadFeed(); // fetch API
   const { navigation } = this.props;
   this.focus = navigation.addListener('willFocus', () => {
     this.loadFeed(); // fetch API
   });
}

React Navigation version from package.json:

• "react-navigation": "^4.2.2"
• "react-navigation-drawer": "^2.4.2"

Is there a better way to detect an active screen on app and invoke the fetch API? Or fix for the given error below?

Type Error: undefined is not an object (evaluating 'navigation.addListner'):Error when the app launches