Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6211

Components with fontweight css rule in style definition results in a typescript error: No overload matches this definition error

$
0
0

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:

  1. Does the error I'm seeing indicate a problem in the type definitionor something else?
  2. What are my options for fixing this?

Viewing all articles
Browse latest Browse all 6211

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>