Issue
I have a stack navigator set up in the following way
const wishlizt = StackNavigator({
Splash: {screen: SplashScreen},
SignIn: {screen: SignInScreen},
SignUp: {screen: SignUpScreen},
Profile: {screen: ProfileScreen},
Home: {screen: MainScreenNavigator},
Chat: {screen: ChatScreen}
},
{
navigationOptions: {
title: 'Wishlizt',
header: {
style: {
backgroundColor: Colors.bgBrand,
elevation: null,
},
titleStyle: {
color: Colors.lightest
},
right: <HeaderRight />
}
},
initialRouteName: 'Splash'
});
As you can see I use a component HeaderRight in my header which contains some icons - settings cog, profile, etc. I want to be able to navigate from those icons' TouchableOpacity onPress method. But the navigation prop 'this.props.navigation' is missing in that component.
The official documentation page has this code sample on how to call navigate on the top level component and recommends using 'ref'
const AppNavigator = StackNavigator(SomeAppRouteConfigs);
class App extends React.Component {
someEvent() {
// call navigate for AppNavigator here:
this.navigator && this.navigator.dispatch({ type: 'Navigate', routeName, params });
}
render() {
return (
<AppNavigator ref={nav => { this.navigator = nav; }} />
);
}
}
I am unable to see how this can work in my example. Can anyone help on this? Thanks
Huge
Solution
The header
property can be a function as well as an object. When it is a function, the navigation
object is passed in as the first parameter, it can then be passed to the HeaderRight
component as a prop
.
navigationOptions: {
header: (navigation) => {
return {
style: {
backgroundColor: Colors.bgBrand,
elevation: null,
},
titleStyle: {
color: Colors.lightest
},
right: (<HeaderRight
navigation={navigation}
/>),
};
},
},
Answered By - Stewart
Answer Checked By - Candace Johnson (JavaFixing Volunteer)