TS error on React Native when using compilerOptions.moduleSuffixes #311
Description
What did you do?
I have configured a new React Native Expo project from scratch. I have configured the tsconfig.json file with:
{
"extends": "expo/tsconfig.base",
"compilerOptions": {
"strict": true,
"moduleSuffixes": [".native", ".ios", ".android", ".web", ""]
}
}
And then added the ContentLoader in the App.tsx:
import ContentLoader, { Rect } from "react-content-loader/native";
import { View } from 'react-native';
export default function App() {
return (
<View>
<ContentLoader height={70} width={"100%"}>
<Rect
y={7.5}
ry={5}
rx={5}
width={180}
height={25}
/>
<Rect
y={37.5}
ry={5}
rx={5}
width={100}
height={25}
/>
</ContentLoader>
</View>
);
}
If I remove the "web" from the moduleSuffixes array, no TS error appears.
What did you expect to happen?
No TS error.
What happened actually?
TS error:
Type '{ children: Element[]; height: number; width: string; }' is not assignable to type 'IntrinsicAttributes & IContentLoaderProps'.
Property 'children' does not exist on type 'IntrinsicAttributes & IContentLoaderProps'.ts(2322)
Which versions of react-content-loader, and which browser are affected by this issue?
"dependencies": {
"expo": "~49.0.11",
"expo-status-bar": "~1.6.0",
"react": "18.2.0",
"react-content-loader": "6.2.1",
"react-native": "0.72.4",
"react-native-svg": "13.9.0"
},
"devDependencies": {
"@babel/core": "^7.20.0",
"@types/react": "18.2.20",
"typescript": "5.1.6"
},