How to control the "rightComponent" in NavigationHeader from my viewContainer

I have implemented rendering of the right navigation button. But since this lives in the NavigationHeader I have to send the button properties (image, onPress) through the props with the dispatch of the pushRoute action. The work is done by NavigationView.renderHeader.renderRightComponent.

Does anyone have a clue of how I can control this button from within the rendered container, i.e. not the navigationView.

Example: When I push my ProjectListViewContainer I want to show an "Add" button to the right in the NavigationHeader. But if the logged in user does not have the right to add projects I want to disable or hide the button (or rather not render it in the first place).

Besides not having control over the button from my container I also think it's kind of messy to have it controlled by props in the navigationView. I'd like to have my ProjectViewContainer or ProjectView dispatching the PROJECT_ADD action.

Hi @michaelswe, How did you add a right navigation button? I am trying to add a button on the right side of the title bar, but it doesn't show up. Here is my code:

  renderHeader(sceneProps) {
    return (
      <NavigationHeader
        {...sceneProps}
        onNavigateBack={this.props.onNavigateBack}
        renderTitleComponent={() => {
          return (
            <NavigationHeader.Title>
              {sceneProps.scene.route.title}
            </NavigationHeader.Title>
          );
        }}
        renderRightComponent={props => {
              return (
                <BurgerIcon action={this.props.onToggleSideBar}/>
              );
        }}
      />
    );
  },

Does anyone have an update on this? Trying to add custom buttons to the header on certain views.

@zachrnolan Turns out my code above works. My problem was that the style of BurgerIcon was not properly set.

I would also like to know how to control the right component. Should the view control what to show or should we use a different approach?

@jsslai A quick fix would be to use conditions in NavigationView:

renderHeader(sceneProps) {
    return (
      <NavigationHeader
        {...sceneProps}
        onNavigateBack={this.props.onNavigateBack}
        renderTitleComponent={() => {
          return (
            <NavigationHeader.Title>
              {sceneProps.scene.route.title}
            </NavigationHeader.Title>
          );
        }}
        renderRightComponent={() => this.renderRightButton(sceneProps.scene.route.key)}
      />
    );
  },

renderRightButton(routeKey) {
    if (routeKey === 'myRoute') {
      return <MySpecificRightButton />;
    }
     return <MyDefaultRightButton />;
  }

@loiclouvet Thanks! How would you handle the button press event if the specific view wants to do something when the button is pressed? Or if the button press should push a new route?

I have moved on to another navigator. Please feel free to close this issue when you are done discussing the solutions.

@loiclouvet Thanks! How would you handle the button press event if the specific view wants to do something when the button is pressed? Or if the button press should push a new route?

@jsslai Use NavigationViewContainer to connect your action to NavigationView

NavigationViewContainer.js

export default connect(
  null,
  dispatch => ({
    yourAction() {
      return dispatch(yourAction());
    },
  })
)(TabsNavigationView);

NavigationView.js

renderRightButton(routeKey) {
    if (routeKey === 'myRoute') {
      return <MySpecificRightButton onPress={this.props.yourAction}/>;
    }
     return <MyDefaultRightButton />;
}

Other solution to trigger action could be EventEmitter but you have to pass the event emitter object down.