property `hitSlop` is missing in `____ViewStyle_Internal` ie Flow and react-native View not cooperating

Viewed 11

I have a react-native project written in flow, and I have a component:

type Props = {
  +text: string,
  +onPress: () => void,
  +disabled?: boolean,
  +style?: ViewStyle,
};
class MyButton extends React.PureComponent<Props> {
  /* snip */
}

that takes its Props with an optional ViewStyle field. Now ViewStyle is defined as follows:

type ViewProps = React.ElementConfig<typeof View>;
export type ViewStyle = $PropertyType<ViewProps, 'style'>;

Where View is the react-natives View component. Now, View has a hitSlop field, but when I try to set it in styles like so:

function someFunc(){
  const myStyle =  {
      hitSlop: { top: 10, bottom: 10, left: 100, right: 0 },
  };
  return (<MyButton
          text="text"
          onPress={this.onPress}
          disabled={false}
          style={myStyle}
         />);
}

I get the following Flow error:

Cannot create `MyButton` element because property `hitSlop` is missing in  `____ViewStyle_Internal` [1] but exists in  object literal [2] in property `style`.

I can't figure out why Flow types this differently, as indeed ____ViewStyle_Internal does not have a hitSlop field... what can I do to be able to set hitSlop in the style prop?

It's similar to this github issue: https://github.com/facebook/flow/issues/8509 but i don't believe that it is impossible to set the hitSlop property in all Flow projects

0 Answers
Related