withState HOC add a header on my react navigation Tab Screen (expo snack)

[softhib]

Hi !

I recently added a withState HOC on a screen of my tabNavigator and I found the following problem :

Here is an expo snack to handle the issue:
https://snack.expo.io/@softhib/tabnavigator-and-recompose-withstate

The problem is on the HomeScreen.js at line 152.

[Ivan Starkov]

Magic?

[Ivan Starkov]

BTW the answer is in

static navigationOptions = {
    header: null,
    //title: 'home',
  };

as you see it's static field of base component and not enhanced

[Ivan Starkov]

PS: compose without HOCs returns base component itself so it works without setState

[softhib]

I didn't understand what you explained but I resolved the problem by using this.props.navigation.getParam() and this.props.navigation.setParams() of react navigation.

[Ivan Starkov]

What is YourComponentExt = compose(withState(..))(YourComponent) it's a new Component (new Class or function)
so if YourComponent has static field it does not mean that YourComponentExt has it too

Native navigator uses navigationOptions for some logic, so to fix all you need is to declare static field on proper compoent, that's all

YourComponentExt.navigationOptions = {
    header: null,
  }

[softhib]

I tried to change the code like this but the header still here.

https://snack.expo.io/@softhib/tabnavigator-and-recompose-withstate

In MainTabNavigator.js:

HomeStack.navigationOptions = {
  header: null,
  tabBarLabel: 'Home',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={
        Platform.OS === 'ios'
          ? `ios-information-circle${focused ? '' : '-outline'}`
          : 'md-information-circle'
      }
    />
  ),
};

In HomeScreen.js

 /*static navigationOptions = {
    header: null,
  };*/

[Ivan Starkov]

Please read carefully what I wrote, you need to set static on extended component
In your case

ConnectedHomeScreen.navigationOptions = {
    header: null,
  };

so you will get

[softhib]

Yes I read what you write but I don't know what is an extended component. I better understand code than react vocabulary. If you can communicate a complete snippet and the name of the file, it is more comfortable to me !

[Maria Esther Cuan]

Your extended component is the component that got wrapped by the HOC. This is what I did to fix the problem:

const extendedComponent = withHigherOrderComponent(HomeScreen)

extendedComponent.navigationOptions = {
  header: null,
}
export default extendedComponent