I'm setting up react-sketchapp using the basic-setup-typescript example.The example application is not compiling due to an type error related to styling.It looks like Text and View components with the fontweight
css rule in style definition results in a typescript error: No overload matches this definition error
Considering this code snippet from my-command.tsx
const Swatch = ({ name, hex }: SwatchProps) => (<View name={`Swatch ${name}`} style={{ height: 96, width: 96, margin: 4, backgroundColor: hex, padding: 8, }}><Text name="Swatch Name" style={{ color: textColor(hex), fontWeight: 'bold' }}> {name}</Text><Text name="Swatch Hex" style={{ color: textColor(hex) }}> {hex}</Text></View>);
You can see that the style definition for the View
component has multiple rules while the Text
component has only two. This example results in the error above error TS2769: No overload matches this call.
Removing fontWeight
from the Text
component allows the code to compile and render the example.
<Text name="Swatch Name" style={{ color: textColor(hex) }}> {name}</Text>
Moving fontWeight
to the View
component results in the typescript error again.
<View name={`Swatch ${name}`} style={{ height: 96, width: 96, margin: 4, backgroundColor: hex, padding: 8, fontWeight: 'bold'<--- added }}>
It looks like there is a problem with the type definitions, but I'm having difficulty tracking it down. I did find a types file (src/types
) in which TextStyle
extends ViewStyle
type definition and does include fontWeight as optional:
export type TextStyle = ViewStyle & { ... fontWeight?: string; ...
A couple of questions here:
- Does the error I'm seeing indicate a problem in the type definitionor something else?
- What are my options for fixing this?