Emitting one event cause other event to trigger in react native - react-native

Question

Context:
I am rendering a web view and the navigation buttons are on top bar. I send an event when a navigation back button is pressed. And similarly with the forward button it fires an event. The problem is when I press the back button it causes forward button to fire as well. Thus on the console it says, back button pressed and forward button pressed. This behaviour happens in Android only, in ios it works perfect. I am not sure what am I missing in the Android side.
My component is as follows.
import _EventEmitter from 'EventEmitter'
const appEventEmitter = new _EventEmitter()
export { appEventEmitter }
import React, { Component } from 'react'
import {
StyleSheet,
ScrollView,
} from 'react-native'
import { connect } from 'react-redux'
import { WebView } from 'react-native-webview'
import { Linking } from 'react-native'
import Spinner from 'react-native-loading-spinner-overlay'
import { appEventEmitter } from 'src/common'
import { Icon } from 'react-native-elements'
const goBack = 'goBack'
const goForward = 'goForward'
class HomeComponent extends Component {
static navigationOptions = ({navigation}) => {
return {
headerRight:(
<Icon
iconStyle={styles.chevronColor}
name="chevron-right"
onPress={() => appEventEmitter.emit(goForward) }
size={40}
/>),
headerLeft:(
<Icon
iconStyle={styles.chevronColor}
name="chevron-left"
onPress={() => appEventEmitter.emit(goBack) } // This causes to fire back and forward events
size={40}
/>),
}
}
constructor(props) {
super(props);
this.state = {
webViewRef: "webViewRef",
visible: true,
}
}
componentDidMount () {
this.goBackListenerId = appEventEmitter.addListener(goBack, () => this.goBack())
this.goForwardListenerId = appEventEmitter.addListener(goForward, () => this.goForward())
}
componentWillUnmount () {
appEventEmitter.removeListener(this.goBackListenerId)
appEventEmitter.removeListener(this.goForwardListenerId)
}
goBack = () => {
console.log("BACK PRESSED")
this.refs[this.state.webViewRef].goBack();
}
goForward = () => {
console.log("Forward PRESSED")
this.refs[this.state.webViewRef].goForward();
}
hideSpinner() {
this.setState({ visible: false });
}
showSpinner() {
this.setState({ visible: true });
}
render() {
return (
<ScrollView contentContainerStyle={styles.scrollableContainer}>
<Spinner
visible={this.state.visible}
style={styles.spinnerColor}
/>
<WebView
source={{uri: BASE_URL}}
style={styles.container}
onLoadStart={() => this.showSpinner()}
onLoadEnd={() => this.hideSpinner()}
ref={this.state.webViewRef}
javaScriptEnabled={true}
domStorageEnabled={true}
geolocationEnabled={true}
cacheEnabled={true}
/>
</ScrollView>
)
}
}
const styles = StyleSheet.create({
scrollableContainer: {
flex: 1,
},
spinnerColor: {
color: 'white'
},
navigationHeader: {
backgroundColor: colors.primary,
},
container: {
flex: 1,
},
chevronColor: {
color: 'white'
}
});
const Home = connect()(HomeComponent)
export { Home }