1

I'm having an issue with

"react-navigation": "2.18.2", "@types/react-navigation": "2.13.0", "typescript": "3.1.6",

I'm trying to use withNavigation HOC in a child component, but that causes the parent component to say that not all necessary props are passed down. I.e.

In parent:

render() {
  return (
    <Child
      someProp={true}
    />
  );
}

In child:

export interface IChildProps {
  someProp: boolean
}

class Child extends React.Component<IChildProps & NavigationInjectedProps> {
  render() {
    return (<Text>Child component </Text>)
  }
}

export default withNavigation(Child)

I get this error in the parent: Property 'navigation' is missing in type ..., indicating that the parent can't seem to figure out that navigation is passed to the child through the withNavigation HOC for some reason?

I can of course pass down the navigation prop from the parent, but that renders withNavigation kind of useless, and just moves the problem up the ancestor chain :smiley:

I've looked at the type definitions, and can't find any errors with it. Can someone here perhaps help me clear up what the problem is?

jhm
  • 4,379
  • 5
  • 33
  • 49

1 Answers1

1

I can reproduce the problem if I enable the strictFunctionTypes compiler option. The declaration of withNavigation in the @types/react-navigation package wasn't designed to work with this option. I've submitted a pull request to fix it. See this answer for the possible ways to use my modified declarations until the pull request is merged.

Matt McCutchen
  • 28,856
  • 2
  • 68
  • 75