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