Method is not being invoked when i press the button - react-native

Question

I am using react navigation and have added a button on the right to signout from my app using default navigation options as shown below :
const otherApp = createStackNavigator({
Welcome : {
screen : WelcomeScreen
}
},
{
defaultNavigationOptions : ({navigation}) => ({
title : 'Welcome',
headerStyle: {
backgroundColor: '#29434e',
shadowColor: 'transparent',
elevation: 0
},
headerRight: (
<TouchableOpacity
style={{ backgroundColor: '#DDDDDD', padding: 5 }}
onPress={() => navigation.getParam('logout')}>
<Text
style={{
fontSize: 10,
}}>
Logout
</Text>
</TouchableOpacity>
),
})
});
And i am binding the method to be invoked as follows :
_Logout() {
this.props.signOut();
}
componentDidMount(){
this.props.navigation.setParams({ logout : this._Logout.bind(this) })
}
Function is maped to props using the redux
const mapDispatchToProps = (dispatch) => {
return {
Signout : ()=> dispatch(Signout())
}
}
But the problem is when i press the button, it does not invoke the method !

Answer 1

You can also use onFocus method of react-navigation to see whether the screen is on focus or not. If the screen is on focus then call the function.
import { withNavigation } from "react-navigation";
componentDidMount() {
const { navigation } = this.props;
this.focusListener = navigation.addListener("didFocus", () => {
// The screen is focused
// Call any action
});
}
componentWillUnmount() {
// Remove the event listener
this.focusListener.remove();
}
export default withNavigation(Your Class Name);
Method : 2
import { NavigationEvents } from "react-navigation";
onFocus = () => {
//Write the code here which you want to do when the screen comes to focus.
};
render() {
return (
<NavigationEvents
onDidFocus={() => {
this.onFocus();
}}
/>
)}

Answer 2

I got the solution, what i was doing wrong that i wasn't passing a call back in the onPress of the button !
logoutFromFirebase = () => {
this.props.Signout();
this.props.navigation.navigate(this.props.user.uid ? 'App' : 'Auth')
}
componentDidMount(){
this.props.navigation.setParams({ logout : this.logoutFromFirebase })
}
And default navigation
defaultNavigationOptions : ({navigation}) => ({
title : 'Welcome',
headerStyle: {
backgroundColor: '#29434e',
shadowColor: 'transparent',
elevation: 0
},
headerRight: (
<TouchableOpacity
style={{ backgroundColor: '#DDDDDD', padding: 5 }}
onPress={navigation.getParam('logout' , () => Reactotron.log('Logout not callled'))}>
<Text
style={{
fontSize: 10,
}}>
Logout
</Text>
</TouchableOpacity>
),
})
And now it is working fine !