CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-navigation
Arda Tümay
Arda Tümay

Reputation: 97

How to modify navigationOptions of parent component in child component?

I have a component called main.js where all other components are rendered inside. Moreover all other components have their specific navigaitonOptions. However, when I render these components inside the main.js, I was not able to take their navigationOptions and render the navigation header with their navigationOptions. So question is that how can i take child components' navigationOptions variable to the parent component and override parents' with child's navigationOptions?

I tried to pass navigation prop to the child component and set params using setParams function but It didnt work.

showTab() {
switch (this.state.activeTab) {
  case 'NewsRouter':
      return <News navigation={this.props.navigation} />;
      break;
  case 'MenuRouter':
      return <Menu navigation={this.navigationOptions} />;
      break;
  case 'CalendarRouter':
      return <Calendar navigation={this.navigationOptions} />;
      break;
  case 'MoodleRouter':
      return <Moodle navigation={this.navigationOptions} />;
      break;
  case 'CouncilRouter':
      return <Council navigation={this.navigationOptions} />;
      break;
}

}

I chose the component that is going to rendered with this function and i call this function in the render function of the main.js

In each press on the tabbar in the screen related component rendered on the screen and I want to be able to take navigationOptions of related component. I wuould appreciate it too much for any help.

Upvotes: 0

Views: 1583

Answers (2)

Austin France
Austin France

Reputation: 2501

Give parent component a state navigationOptions and a method setNavigationOptions. The Child component would then have a property setNavigationOptions and the Child component can call this.props.setNavigationOptions(navigationOptions) from within componentDidMount.

class Child extends React.PureComponent {
  componentDidMount() {
    this.props.setNavigationOptions(navigationOptions);
  }
  ...
}

class Parent extends React.PureComponent {
  constructor() {
    super();
    this.state = { navigationOptions: [] };
  }
  render() {
    return (
      <React.Fragment>
        <Navigation options={this.state.navigationOptions}/>
        <Child setNavigationOptions={this.setNavigationOptions}/>
      </React.Fragment>
    );
  }
  setNavigationOptions = (navigationOptions) => {
    this.setState({ navigationOptions });
  }
}

Edit l5064487

Upvotes: 2

Arun
Arun

Reputation: 51

try to make it global navigationOptions

Upvotes: 0

Related Questions