It's All Writing.

Writing makes you happy.

How to custom react navigation's header options each screen which using HOC at React Native



Typically, react navigation's header options are written in App.js.
However, this is undesirable for two reasons:

  1. App.js gets bigger and more complex
  2. Knowledge specific to each screen is defined outside the screen

To solve this problem, react navigation provides the ability to override header options with static navigationOptions (setParams from your screen ).
However, if you are using HOC, you need to use static navigationOptions in HOC and you need to devise it.

This time, consider the following simple screen structure example.


ScreenA and ScreenB both use HOC.


ScreenA and ScreenB use navigation.setParams in componentDidMount method to specify screen-specific options.
Then, HOC ( at withCommonProps.js ) receives these options in static navigationOptions method use navigation.getParam.
Note that options not received by the static navigationOptions method are not reflected.