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 !
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 !