withContext doesn't pass static properties forward

[ghmendonca]

I am developing an app with React Native v0.54 and I am using React Navigation for the router. When I try to render a screen that is wrapped with my consumer, for some reason the wrapper don't pass the necessary data for the router and this breaks alot of features that I need, for example the title of my screen and the DrawerMenu title of this screen.

This happens only when I wrap my screen with my consumer using the decorator or exporting the function.

Any idea why or can you fix it?

This code doesn't work:

@ProdutoConsumer
export default class Notificacoes extends React.Component {
  static navigationOptions = {
    title: "Notificações"
  }

  render(){
    return(
      <View>
        <Text>Notificações</Text>
      </View>
    )
  }
}

This works:

export default class Notificacoes extends React.Component {
  static navigationOptions = {
    title: "Notificações"
  }

  render(){
    return(
      <View>
        <Text>Notificações</Text>
      </View>
    )
  }
}

EDIT: Testing a little more, I think the problem is that withContext is not passing static properties forward, but I don't know how to fix it neither a workaround yet.

[ghmendonca]

After studying the code for a while, I managed to get what I want to work. The real issue is that the Connected object never receive the static properties. So, I changed the wrap function and added this piece of code:

if(WrappedComp.navigationOptions){
    Connected.navigationOptions = WrappedComp.navigationOptions;
}

And it worked, now the Router can get my navigationOptions from my screen. But this is just a workaround for my specific problem, with you want to pass all your static properties unknowing the name of each property, this will not work.

[SunHuawei]

@ghmendonca , really glad to see your feedback and question. Yes, it is a issue, I did not hoist all none react static properties. It is a common thing in HOC, which I just forget to do.

The idea is to use this, https://github.com/mridgway/hoist-non-react-statics
just like the other HOC does.
Here is a talk about this, reduxjs/react-redux#276

I can review and merge PR, if you want to contribute. Or you could wait for the next version, I will fix it in days.

[ghmendonca]

I just fixed in my project using the hoist-non-react-statics, thanks for remind me about that library.

But now I found another bug, even passing the static property to the parent component, if the static property is a function and you need to use the props from the context, it will be undefined because the props are only injected when the render method is called (if I am right). So, in my case is exactly that, I have a static function that I need to take data from the context and doesn't work. I will try to found a workaround for this, but it would be nice if you could fix it by passing the context data in the Connected component constructor or something like this.

And sorry, but I don't feel confortable submiting a PR because I would add a dependency and your very light library will not be so light as it was.

But keep the great work!

@SunHuawei if you want I can open another issue explaining this other bug that I found.

[SunHuawei]

@ghmendonca , thanks for your further feedback. I'm going to reply you in the other issue #2 .

Seems #2 is another thing. Reply here.

I did not reproduce this issue. I made a quick demo by using hoist-non-react-statics, https://codesandbox.io/s/mo7nvmporx

I have a static function in withContext/StatefulComponent.js and use it in withContext/index.js like this:

        <p>
          {"StatefulComponent.static_function() = " +
            StatefulComponent.static_function()}
        </p>

Let me know if I misunderstand anything.