TS error on React Native when using compilerOptions.moduleSuffixes

[Estevete]

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"
  },

[Estevete]

So this is maybe due to react-native-svg package software-mansion/react-native-svg#1920.
It was fixed & merged in version 13.11.0 software-mansion/react-native-svg#2091

Is it possible to upgrade the dependency version of react-native-svg?

[mpadel78]

Hey @Estevete were you able to solve this error?