I am working on a React Native app built with TypeScript. I have a component which uses the same props as a View element. If there is a style prop, I need to pull the width in order to pass a calculated width to a child. A simplified example might look like this.
const WidgetContainer = ({ style = {}, ...props }: ViewProps) => { const { width = DEFAULT_WIDTH } = style; const widgetWidth = Math.floor(width / 3); return (<View style={[style, { width }]} {...props}><WidgetRow widgetWidth={widgetWidth} /></View> );};Everything uses absolute positioning and we can safely assume only numeric widths will be used. This should work. Expo runs the code just fine and nothing seems amiss.
But if I explicitly do a type check, either in VS Code or by running tsc, I get this error on the second line:
Property 'width' does not exist on type 'StyleProp<ViewStyle>'This is frankly baffling. I use width in View styles all over the code base. If I look up the declaration file for react-native types, I can see ViewStyle:
https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react-native/index.d.ts#L1963
It extendsFlexStyle:
https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react-native/index.d.ts#L692
And width is right there!!
https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react-native/index.d.ts#L743
I am at a loss. Is this a bug? Am I missing something silly?
Relevant versions:
- react: 17.0.38
- react-native: 0.64.3
- tsc: 4.3.5
- node_modules/expo: 44.0.6
- expo CLI: 5.4.9