ComponentPropsWithRef is not working with react native, on pnpm monorepo

Question

when attempting to use ComponentPropsWithRef with a react native Button or View like so:

export type Props = React.ComponentPropsWithRef<typeof Button> & {
    children?: React.ReactNode
}

i get the following type errors:

Type 'typeof Button' does not satisfy the constraint 'ElementType<any, keyof IntrinsicElements>'.
  Type 'typeof Button' is not assignable to type 'ComponentClass<any, any>'.
    Types of property 'contextType' are incompatible.
      Type 'import("/folder/node_modules/.pnpm/@[email protected]/node_modules/@types/react/index").Context<any> | undefined' is not assignable to type 'React.Context<any> | undefined'.
        Type 'import("/folder/node_modules/.pnpm/@[email protected]/node_modules/@types/react/index").Context<any>' is not assignable to type 'React.Context<any>'.
          The types of 'Provider.propTypes' are incompatible between these types.
            Type 'import("/folder/node_modules/.pnpm/@[email protected]/node_modules/@types/react/index").WeakValidationMap<import("/folder/node_modules/.pnpm/@[email protected]/node_modules/@types/react/index").ProviderProps<any>> | undefined' is not assignable to type 'React.WeakValidationMap<React.ProviderProps<any>> | undefined'.
              Type 'import("/folder/node_modules/.pnpm/@[email protected]/node_modules/@types/react/index").WeakValidationMap<import("/folder/node_modules/.pnpm/@[email protected]/node_modules/@types/react/index").ProviderProps<any>>' is not assignable to type 'React.WeakValidationMap<React.ProviderProps<any>>'.
                Types of property 'children' are incompatible.
                  Type 'import("/folder/node_modules/.pnpm/@[email protected]/node_modules/@types/react/index").Validator<import("/folder/node_modules/.pnpm/@[email protected]/node_modules/@types/react/index").ReactNode> | undefined' is not assignable to type 'React.Validator<React.ReactNode> | undefined'.
                    Type 'import("/folder/node_modules/.pnpm/@[email protected]/node_modules/@types/react/index").Validator<import("/folder/node_modules/.pnpm/@[email protected]/node_modules/@types/react/index").ReactNode>' is not assignable to type 'import("/folder/node_modules/.pnpm/@[email protected]/node_modules/@types/prop-types/index").Validator<React.ReactNode>'.
                      Type 'import("/folder/node_modules/.pnpm/@[email protected]/node_modules/@types/react/index").ReactNode' is not assignable to type 'React.ReactNode'.
                        Type 'ReactElement<any, string | JSXElementConstructor<any>>' is not assignable to type 'ReactNode'.
                          Property 'children' is missing in type 'ReactElement<any, string | JSXElementConstructor<any>>' but required in type 'ReactPortal'.ts(2344)
index.d.ts(369, 9): 'children' is declared here.

this is my package.json:

{
    "name": "@acme/react-native",
    "version": "0.0.0",
    "main": "./dist/index.js",
    "types": "./dist/index.d.ts",
    "exports": {
        ".": {
            "types": "./dist/index.d.ts",
            "import": "./dist/index.mjs",
            "default": "./dist/index.js"
        },
        "./package.json": "./package.json"
    },
    "sideEffects": false,
    "files": [
        "dist"
    ],
    "scripts": {
        "build": "tsup",
        "dev": "tsup --watch",
        "lint": "eslint \"**/*.{ts,tsx}\" --max-warnings 0",
        "test": "jest --config ./jest.config.ts --passWithNoTests",
        "test:watch": "jest --config ./jest.config.ts --watch",
        "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
        "typecheck": "tsc --noEmit"
    },
    "devDependencies": {
        "@acme/eslint-config": "workspace:*",
        "@acme/tsconfig": "workspace:*",
        "@acme/tsup-config": "workspace:*",
        "@types/react": "^18.2.63",
        "eslint": "^8.15.0",
        "react": "^18.2.0",
        "react-native": "^0.73.5",
        "typescript": "4.8.4"
    },
    "peerDependencies": {
        "react": "*",
        "react-native": "*"
    },
    "publishConfig": {
        "access": "public"
    },
    "eslintConfig": {
        "root": true,
        "extends": [
            "@topaz/eslint-config/base",
            "@topaz/eslint-config/react"
        ]
    }
}

i have tried uninstalling @types/react, and then reinstalling it again, including different versions of it.

deleting node_modules and installing again did not fix the issue

i have also tried different versions of react and react-native.

running pnpm store prune and installing again did not work

Answer 1

Ensuring that every single package had the same version solved the issue.

for example, i had to go to every package.json that had @types/react and set the version as "18.2.0"