Unable to set event handler in react native navigationOptions headerRight - react-native

Question

I'm new to react native. I am trying to setup a event handler to react-navgation. I using navigationOptioins-> headerRight-> icon and trying to set a _BananaButton to handle onPress event. But it is not working. Clicking on icon does not do anything.
The same event handler is working in the TouchableHighlight button but not in the header.
Please suggest.
import React, { Component } from 'react';
import { Alert, Platform, StyleSheet, Button, Text, TouchableHighlight, TouchableOpacity, TouchableNativeFeedback, TouchableWithoutFeedback, View, Linking } from 'react-native';
import FruitViewer from './FruitViewer';
import Icon from 'react-native-vector-icons/FontAwesome';
import PropTypes from 'prop-types'; import {
createStackNavigator,
} from 'react-navigation';
export class Touchables extends Component {
_BananaButton() {
const { navigate } = this.props.navigation;
navigate('FruitViewer');
}
static navigationOptions = ({navigation}) => {
console.log(this.props)
//onPress={navigation.state.params.RightHandler}
return {
title: 'Home',
headerStyle: { backgroundColor: 'white' },
headerTitleStyle: { color: 'blue' },
headerRight: (
<Icon
onPress={this._BananaButton}
name='home'
size={25} //onPress={() => alert('This is a button!')}
color="#0000ff" //onPress={() => alert('This is a button!')}
style={{height:25,width:25}}
/>
),
}
}
constructor(props) {
super(props);
this._BananaButton = this._BananaButton.bind(this)
console.log('constructor')
}
render() {
const { navigate } = this.props.navigation;
return (
<View style={styles.container}>
<TouchableHighlight onPress={this._BananaButton} underlayColor="white" >
<View style={styles.button}>
<Text style={styles.buttonText}>Banana</Text>
</View>
</TouchableHighlight>
</View>
);
}
}
const styles = StyleSheet.create({..})
const App = createStackNavigator({
Touchables: { screen: Touchables },
FruitViewer: { screen: FruitViewer },
});
export default App;

Answer 1

You need to add
componentDidMount() {
this.props.navigation.setParams({ _BananaButton: this._BananaButton });
}
And use it like:
<Icon
onPress={navigation.getParam('_BananaButton')}
Please read react-navigation documentation for this topic Header buttons heandlers