title: How to update the header while the component is still rendered using React Navigation?
body: <p>I'm writing a React Native app and I'm using React Navigation (V2) with it. I want to update the <code>navigationOptions</code> and add a new button, after my component has updated. Here is the code with which I tried it:</p>
  
  <pre><code>  static navigationOptions = ({ navigation }) =&gt; {
      const options = {
        headerTitle: SCREEN_TEXT_MENU_HEADER,
        headerStyle: {
          borderBottomWidth: 0,
          marginBottom: -5
        }
      };
      if (navigation.getParam("drawer", true)) {
        options["headerLeft"] = (
          &lt;HeaderIconButton
            onClick={() =&gt; {
              navigation.openDrawer();
            }}
            icon={require("../../assets/icons/burgerMenu.png")}
          /&gt;
        );
      }
      if (navigation.getParam("renderBillButton", false)) {
        options["headerRight"] = (
          &lt;HeaderIconButton
            onClick={() =&gt; {
              navigation.navigate("BillScreen");
            }}
            type="primary"
            icon={require("../../assets/icons/euro.png")}
          /&gt;
        );
      }
      return options;
    };
  
    componentDidUpdate = prevProps =&gt; {
      const { navigation, orders } = this.props;
      if (prevProps.orders.length !== orders.length) {
        navigation.setParams({
          renderBillButton: orders.length &gt; 0
        });
      }
    };
  </code></pre>
  
  <p>The problem with this approach is, that the <code>navigationOptions</code> do not get reset after <code>componentDidUpdate()</code>. How can I dynamically adjust the header with React Navigation?</p>