how to use Flow with external Higher Order Component Wrapper

Question

Flow documentation only shows how to declare a custom Higher Order Component to work with custom Class and its Props. In my case I have a custom Class like:

type Props = {
  navigation: Object,
  isFocused: boolean
}

type State = {
  config: AppConfig,
  pack: Package,
  init: boolean,
}

class MainAppScreen extends React.Component<Props, State> {
...
}
export default withNavigationFocus(MainAppScreen);

and want to wrap it with external HOC from 'react-navigation';

What should I do (beside //$FlowFixMe) to get rid of this message:

Error:(111, 16) Cannot build a typed interface for this module. You should annotate the exports of this module with types. Cannot determine the type of this call expression. Please provide an annotation, e.g., by adding a type cast around this expression. (signature-verification-failure)

Thanks.

UPDATE:
As @user11307804 pointed into the right direction, I have been also trying involving flow-typs for external libraries. However it still seems not to be possible to import a type for a (HOC) function like:

  declare export function withNavigationFocus<Props: {...}, ComponentType: React$ComponentType<Props>>(
    Component: ComponentType
  ): React$ComponentType<$Diff<React$ElementConfig<ComponentType>, {| isFocused: ?boolean |}>>;

When I try to import it like: (following this example)

import type {withNavigationFocus} from 'react-navigation';

I get the error:

Error:(22, 14) Cannot import the value `withNavigationFocus` as a type. `import type` only works on type exports like type aliases, interfaces, and classes. If you intended to import the type of a value use `import typeof` instead.

and if I try with typeof I get:

import typeof {withNavigationFocus} from 'react-navigation';

I get the errors:

Error:(22, 16) Cannot declare  `withNavigationFocus` [1] because the name is already bound.
Error:(112, 16) Cannot call `withNavigationFocus` because  Named import from module `react-navigation` [1] is not a function.
Error:(112, 16) Cannot build a typed interface for this module. You should annotate the exports of this module with types. Cannot determine the type of this call expression. Please provide an annotation, e.g., by adding a type cast around this expression. (`signature-verification-failure`)

Thanks.

I can not tell, the API Reference is not very specific about it: reactnavigation.org/docs/en/with-navigation-focus.html — Macilias
Your code examples for “When I try to import it like” and “if I try with typeof” are identical; they both have typeof in them. Is that just a copy-paste error, or did you forget to try import { withNavigationFocus } from 'react-navigation';? — Rory O'Kane
Also note that you are trying to import withNavigationFocus, but the declare statement you quoted earlier is for withNavigation, a different function. withNavigationFocus does have a type declaration though. — Rory O'Kane
@RoryO'Kane good observation, It was just copy and waste here. I'll update the question, thanks! — Macilias

user11307804 user11307804 · Accepted Answer · 2019-12-18T17:46:29

Flow is complaining that withNavigationFocused is untyped. Fortunately, the flow-typed project has react-navigation types. (There are other definition files for different version of react-navigation or flow; the one I've linked is for react-navigation^4.0.0 and flow^0.114.0.) You can include the library definition in your project following the Library Definitions documentation (essentially, just save the file in <PROJECT_ROOT>/flow-typed directory).

how to use Flow with external Higher Order Component Wrapper

1 Answers