React-navigation with a button in header - react-native

Question

I'am trying to redirect to a profile page from a button in the header with react-navigation.
Here's what the createStackNavigator :
const NavigationApp = createStackNavigator({
Profile: { screen: ProfileScreenContainer },
Application: {
screen: Application,
navigationOptions: {
title: "Title",
headerStyle: {
backgroundColor: "#000",
},
headerTintColor: '#fff',
headerRight: (
<HeaderScreenContainer/>
),
},
},
},
{
initialRouteName: "Application"
});
const App = createAppContainer(NavigationApp);
export default App;
Here's my screen container for the header :
export default class HeaderScreenContainer extends Component {
constructor(props){
super(props);
}
render() {
return (<HeaderScreen profile={this.handleProfile.bind(this)} />);
}
handleProfile() {
this.props.navigation.navigate('Profile');
}
}
This is the button that I am rendering in header and that is supposed to redirect to the profile page.
export default class HeaderScreen extends Component {
constructor(props) {
super(props);
}
render() {
return (
<Button onPress={() => this.props.profile()}>
<Text>Profile</Text>
</Button>
)
}
}
I am constantly getting the error : undefined is not an object (evaluating 'this.props.navigation.navigate').
Actually it's supposed to redirect to the profile page.

Answer 1

I believe you just need to wrap your HeaderScreenContainer in the withNavigation HOC like this...
class HeaderScreenContainer extends Component {
constructor(props){
super(props);
}
render() {
return (<HeaderScreen profile={this.handleProfile.bind(this)} />);
}
handleProfile() {
this.props.navigation.navigate('Profile');
}
}
export default withNavigation(HeaderScreenContainer)