React functional HOC component with Hooks, copying static methods

Question

I have a functional HOC component that uses hooks.

I am using Wix Native Navigation and most of my screen are using static methods.

But static methods are not copied over when using HOC:

When you apply a HOC to a component, though, the original component is wrapped with a container component. That means the new component does not have any of the static methods of the original component.

I am trying to use hoistNonReactStatic but without success:

Here is my HOC:

const WithOfflineAlertContainer = WrappedComponent => (props) => {
  const isConnected = useNetInfo();
  return hoistNonReactStatics(
    <Fragment>
      <WrappedComponent {...props} />
      {!isConnected && <OfflineAlert />}
    </Fragment>, WrappedComponent,
  );
};

this is how is use the hoc with wix-react-native-navigation :

  Navigation.registerComponentWithRedux(screens.gallery, () => WithOfflineAlert(Gallery), Provider, store);

But it doesnt seem to work, as I don't see the styles applied from static options() from wix native navigation

score 1 · Answer 1 · answered Apr 28 '19 at 20:38

So I managed to make it work using this answer from another post.

Here is the working version

const WithOfflineAlert = (Component) => {
  const WrappedComponent = (props) => {
    const isConnected = useNetInfo();
    return (
      <Fragment>
        <Component {...props} />
        {!isConnected && <OfflineAlert />}
      </Fragment>
    );
  };
  hoistNonReactStatics(WrappedComponent, Component);
  return WrappedComponent;
}

React functional HOC component with Hooks, copying static methods

1 Answers1