react navigationv2, navigate function not in header props - react-native

Question

I have setup my StackNavigator like so:
const AppNavigator = StackNavigator(
{
Home: {
screen: HomeScreen
},
Month: {
screen: Month
},
Day: {
screen: Day
}
},
{
headerMode: "screen",
navigationOptions: {
header: props => <CustomHeader {...props} />
}
}
);
I can navigate from each screen using this.props.navigation.navigate("Month");
However, in my CustomHeader, I cannot see this prop navigate to invoke. I need to navigate back to the home screen using a button in my header.
resetForm() {
const {
resetForm,
clearCredentials,
navigation
} = this.props;
this.props.navigation.navigate("Home");
}
How can I access the navigate prop to move to another screen?
CustomHeader in full:
import React, { Component } from "react";
import { connect } from "react-redux";
import {
Image,
View,
Text,
Modal,
Button,
TouchableOpacity,
AsyncStorage,
StyleSheet,
Platform,
Alert,
TouchableHighlight
} from "react-native";
import Icon from "react-native-vector-icons/MaterialCommunityIcons";
import { NavigationActions } from "react-navigation";
import {
setYear,
setStudent,
setGroup,
fetchCategories,
resetForm,
resetData,
fetchEvents
} from "../actions/events";
class CustomHeader extends Component {
constructor() {
super();
this.resetForm = this.resetForm.bind(this);
this.fetchEvents = this.fetchEvents.bind(this);
this.showAlert = this.showAlert.bind(this);
}
resetForm() {
const navigateAction = NavigationActions.navigate({
routeName: "Home",
params: {},
action: NavigationActions.navigate({ routeName: "Home" })
});
this.props.dispatch(navigateAction);
}
showAlert() {
Alert.alert("Events refreshed");
}
fetchEvents() {
const {
fetchEvents,
navigate,
credentials: { group }
} = this.props;
resetData();
fetchEvents(group);
navigate("Month");
this.showAlert();
}
render() {
return (
<View style={styles.container}>
<TouchableOpacity onPress={this.resetForm}>
<Image
source={require("../img/logout.png")}
style={{ width: 25, height: 30 }}
/>
</TouchableOpacity>
<TouchableOpacity onPress={this.fetchEvents}>
<Image
source={require("../img/refresh.png")}
style={{ width: 20, height: 30 }}
/>
</TouchableOpacity>
</View>
);
}
}
const mapDispatchToProps = dispatch => {
return {
resetForm: () => dispatch(resetForm()),
fetchEvents: id => dispatch(fetchEvents(id)),
resetData: () => dispatch(resetData())
};
};
const mapStateToProps = state => {
return {
categories: state.fetchCategories,
isLoading: state.isLoading,
credentials: state.setCredentials
};
};
export default connect()(CustomHeader);

Answer 1

You must pass navigation to navigationOptions to use in header component. Your AppNavigator should be like this
const AppNavigator = StackNavigator(
{
Home: {
screen: HomeScreen
},
Month: {
screen: Month
},
Day: {
screen: Day
}
},
{
headerMode: "screen",
navigationOptions: ({ navigation }) => ({
header: props => <CustomHeader {...props} navigation={navigation}/>
})
}
);
CustomHeader
...
resetForm() {
const {navigation} = this.props;
navigation.navigate("Home");
}
...