Optional property error when property is defined with static defaultProps

[rumax]

Flow version: 0.78.0 / 0.86.0

Expected behavior

Flow understands static defaultProps and optional properties properly

Actual behavior

Flow does not respect default properties defined with static defaultProps

• Link to Try-Flow or Github repo: https://www.npmjs.com/package/react-native-view-pdf

Example:

Assuming I have the properties defined as following:

type Props = {
  /**
   * A Function. Invoked on load error with {nativeEvent: {error}}.
   */
  onError?: (Error) => void,

  /**
   * A Function. Invoked when load completes successfully.
   */
  onLoad?: () => void,

 ....

And have

static defaultProps = {
    onError: () => {},
    onLoad: () => {},
    ...
  };

Trying to use them lead to flow error:

onError: (event: any) => void;
onError(event: any) {
    const { nativeEvent } = event || {};
    this.props.onError(nativeEvent || new Error('unknown error'));
}

Workarounds

Workarounds like making the properties required are not acceptable because:

• It leads to confusion in documentation
• It leads to ESLINT error

[jbrown215]

It looks like you're conflating Props with Config. In Props, you don't need to mark the defaultProps optional. Props represents the type of this.props, so if you make props optional there then even specifying them in defaultProps won't make them optional.

When you pass props to a component, Flow uses the Config of the component to determine which props are required. Flow automatically takes your Props and defaultProps and figures out the Config.

[rumax]

So you want to say that I should have:

type Props = {
  onError: (Error) => void,
 ...

(without ?) ?

But this was my initial point. When I want to provide the component, such syntax is confusing, because from the definition I clearly see that the property is requires, which means that the user should provide onError callback. But it's wrong, because it should be optional and searching for defaultProps in each component doesn't make any sense for the user.