React Navigation: Missing prop at top level component

Question

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

Stewart Stewart · Accepted Answer · 2017-03-21T12:44:25

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}
                          />),
               };
           },
},

React Navigation: Missing prop at top level component

2 Answers