fix: weird typescript ReactNode errors

[robinvw1]

Description

Encountered several weird TypeScript errors, when working in this repository:

'Reanimated.View' cannot be used as a JSX component.
  Its instance type 'View' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'React.ReactNode' is not assignable to type 'import("/Users/xxx/react-native-graph/node_modules/@types/react-native/node_modules/@types/react/index").ReactNode'.
        Type '{}' is not assignable to type 'ReactNode'.

Seems @mrousavy encountered the same looking at this as any: https://github.com/margelo/react-native-graph/blob/main/src/AnimatedLineGraph.tsx#L29-L30

Cause

Tracked down to this https://github.com/facebook/react/issues/24304, stating:

some library (incorrectly) specifies @types/react as a dependency with version * rather than an optional peer dependency

// in @types/react v17:
type ReactFragment = {} | ReactNodeArray;

// in @types/react v18:
type ReactFragment = Iterable<ReactNode>;

Fix

A comment from a React contributor https://github.com/facebook/react/issues/24304#issuecomment-1094565891 suggests to force @types/react@* to your React 17 version by using overrides (npm) or resolutions (yarn).

Even better is to open an issue at the responding library's repo.

@mrousavy I'm fine with closing this PR, because it's a suboptimal fix (and making package.json grow even further). In any case, now you know what is causing these errors and this fixes it for the time being. It's your choice.

[chrispader]

I think the better approach would be to keep this variable in the library ("@types/react": "*") and apply this yarn resolutions per app. Many users have already switched or will switch to RN 0.69 soon, which includes React 18.

[chrispader]

What do you think @robinvw1 ? :)

[robinvw1]

I agree, @chrispader. :)

[522848942]

It's this the same problem? Component cannot be used as a JSX component. Its return type 'ReactNode' is not a valid JSX element. https://github.com/pmndrs/drei/issues/1059

[chrispader]

It's this the same problem? Component cannot be used as a JSX component. Its return type 'ReactNode' is not a valid JSX element. https://github.com/pmndrs/drei/issues/1059

yes, if you are using yarn and you're still on RN <0.69 you will have to add

"resolutions": {
    "@types/react": "*"
}

to your package.json.

[522848942]

It's this the same problem? Component cannot be used as a JSX component. Its return type 'ReactNode' is not a valid JSX element. https://github.com/pmndrs/drei/issues/1059

yes, if you are using yarn and you're still on RN <0.69 you will have to add

"resolutions": {
    "@types/react": "*"
}

to your package.json.

oh thanks, it works!