How to call this.props from a static navigationOptions - react-navigation - react-native

Question

I am trying to call a handlelogout() in onPress of button in the header of a stack navigator and then in the handlelogout() I am calling this.props.logout action which will call a navigation reducer to reset to login screen.....but this.props.logout doesnt call an action....nothing happens
static navigationOptions = ({ navigation }) => {
const { params } = navigation.state;
console.log("navigation", navigation);
return {
title: "Profile List",
gesturesEnabled: false,
headerLeft: null,
headerRight: <Button title={"Logout"} onPress={() => params.handlelogout && params.handlelogout({ state: navigation.state })} />
}
};
this is my handlelogout function
handlelogout(state) {
console.log("in handlelogout", this.props.logout, state);
this.props.logout;
}
i am attaching the log i printed in the console
here I am binding the logout to mapdispatchprops
function mapDispatchToProps(dispatch) {
return bindActionCreators(ReduxActions, dispatch);
}

Answer 1

You can try to put the button inside another element then handle your logout from that element/class.
import ButtonForLogout from './test/buttonforlogout';
...
static navigationOptions = ({ navigation }) => {
const { params } = navigation.state;
console.log("navigation", navigation);
return {
title: "Profile List",
gesturesEnabled: false,
headerLeft: null,
headerRight: <ButtonForLogout />
}
};
buttonforlogout.js
import React, { Component } from 'react';
import { View, Button } from 'react-native';
import { connect } from 'react-redux';
import { ReduxActions } from './youractions';
class ButtonForLogout extends Component {
render(){
return(
<View>
<Button title={"Logout"} onPress={this.props.logout} />
</View>
);
}
}
const mapStateToProps = state => ({});
export default connect(mapStateToProps, ReduxActions)(ButtonForLogout);
Something like that.