In my React Native project, I am utilizing Flow for type checking.
For more information, visit:
I currently have two files named SvgRenderer.js and Cartoon.js where:
Cartoon extends SvgRenderer
Below is the source code for both of these files:
SvgRenderer.js
import React from 'react';
import Svg, { G } from 'react-native-svg';
export default class SvgRenderer<T> extends React.Component<T> {
width: number;
height: number;
scaleFactor: number;
constructor(props: T) {
super(props);
}
...
config(originalSize: number[]) {
switch (true) {
case (this.props.width != undefined):
this.scaleFactor = this.props.width / originalSize[0];
this.width = this.props.width;
this.height = originalSize[1] * this.scaleFactor;
break;
case (this.props.height != undefined):
this.scaleFactor = this.props.height / originalSize[1];
this.width = originalSize[0] * this.scaleFactor;
this.height = this.props.height;
break;
}
}
}
Cartoon.js
import React from 'react';
import SvgRenderer from './SvgRenderer';
type Props = {
for: string,
width?: number,
height?: number,
};
export default class Cartoon extends SvgRenderer<Props> {
firstBorder: string;
constructor(props: Props) {
super(props);
}
render() {
return ...
}
}
My issue arises when executing the command:
$ npm run flow
The error message received is:
Error -------------------- src/helpers/SvgRenderer.js:32:24
Cannot get this.props.width because property width is missing in T [1].
src/helpers/SvgRenderer.js
29| this.originalWidth = originalSize[0];
30| this.originalHeight = originalSize[1];
31| switch (true) {
32| case (this.props.width != undefined):
33| this.scaleFactor = this.props.width / this.originalWidth;
34| this.width = this.props.width;
35| this.height = this.originalHeight * this.scaleFactor;
Error -------------------- src/helpers/SvgRenderer.js:33:39
Cannot get this.props.width because property width is missing in T [1].
src/helpers/SvgRenderer.js
30| this.originalHeight = originalSize[1];
31| switch (true) {
32| case (this.props.width != undefined):
33| this.scaleFactor = this.props.width / this.originalWidth;
34| this.width = this.props.width;
35| this.height = this.originalHeight * this.scaleFactor;
36| break;
An image showing the error can be found here: https://i.stack.imgur.com/C1Hn5.png
The confusion lies in why Flow indicates (for SvgRenderer):
Cannot get this.props.width because property width is missing in T [1].
even though I defined width within Cartoon, as shown below:
type Props = {
for: string,
width?: number,
height?: number,
};
While aware that width and height may be considered types, I require them as such.
Any suggestions on adjusting the code so that Flow deems it acceptable?
Thank you!