How to call redux action from static navigationOptions? - react-native

Question

I need to call a action from static navigationOptions but cannot access my action through this.props. How to call this action? I am getting error "Cannot read property 'logout' of undefined" in console.
static navigationOptions = ({navigation}) =>( {
title: 'Home',
header: <Header headerTitle={navigation.state.routeName} logoutButtonPress={() => {
this.props.logout(); // this action is not working
NavigationActions.reset({
index: 0,
actions: [NavigationActions.navigate({ routeName: "Welcome" })]
})
navigation.navigate('Welcome');
}
}
/>,
});

Answer 1

In component of screen where there is navigationOptions
componentDidMount() {
this.props.navigation.setParams({
logOut: this.actionLogOut
});
}
actionLogOut = () => {
this.props.dispatch(logOut()); };
Load function action of logout in params of navigation when componentDidMount and then
static navigationOptions = ({ navigation }) => {
return {
headerTitle: (
<Text
style={{
left: Platform.OS == "android" ? 20 : 0
}}
>
Personal Data
</Text>
),
headerRight: (
<Aux>
<Icon
name="md-notifications"
size={27}
color="#9D9B9C"
style={{ paddingLeft: 15, marginRight: 15 }}
/>
<Icon
name="ios-log-out"
size={27}
color="red"
style={{ paddingLeft: 15, marginRight: 15 }}
onPress={() => {
console.log(navigation);
navigation.state.params.logOut();
navigation.dispatch(NavigationActions.back({ index: "Login" }));
navigation.popToTop();
}}
/>
</Aux>
)
};
};
In navigationOptions use as navigation.state.params.logOut();
This component must use connect using import { connect } from "react-redux" and connect with component

Answer 2

You need to make the logout button as a component and bind the props explicitly from the react-redux module mapDispatchToProps
For example
const LogoutButton = ({logout}) => {
return (
<TouchableOpacity style={{height: 50, width: 100}} onPress={() => logout()}>
<Text>Logout</Text>
</TouchableOpacity>
)
}
const mapDispatchToProps = dispatch => ({
logout: () => /*dispatch your logout action here*/
})
and use it in your static navigationOptions as
static navigationOptions = ({navigation}) =>( {
title: 'Home',
header: <Header headerTitle={navigation.state.routeName}
/><Logout/>,
});
or modify your component to support this component.