React Native - IntelliSense suggesting react-native/types instead of react-native

Question

I want to import <View from react-native but instead, what I got is react-native/types

How can I fix this? This is a new project start from scratch and I added TypeScript like the doc guide:

yarn add --dev @tsconfig/react-native @types/jest @types/react @types/react-test-renderer typescript

Reminisce

I'm having the same issue and it's very annoying. Seems it should be pretty straightforward since I just installed the default docs React Native template and opened the project and VScode is failing at using the simplest components (View, Text) – Lahdidah

Answer 1

So, for me, I had to install npm i -D @types/react-native into my project

Pretty dumb, but it worked.

Cimino

Yup, that's the fix right there. Thanks! – Radke

Answer 2

I had this problem too, but I manage to solve it somehow.

---

SHORT ANSWER

Check if you have @types/react and @types/react-native installed as dev dependencies. This is the step I think worked for me.

---

LONG ANSWER

I don't know what solved it, so this are all the steps I did:

1. I checked my eslint settings:

{
  "extends": ["react-native-wcandillon", "plugin:prettier/recommended"],
  "plugins": ["prettier"],
  "rules": {
    "max-len": ["error", { "code": 120 }],
    "prettier/prettier": [
      "warn",
      {
        "singleQuote": false,
        "printWidth": 120
      }
    ]
  }
}

2. I checked my babel settings

module.exports = {
  presets: ["module:metro-react-native-babel-preset"],
  plugins: ["react-native-reanimated/plugin"],
};

3. I checked my tsconfig settings:

{
  "extends": "eslint-config-react-native-wcandillon/tsconfig.base",
}

4. I checked my --dev dependencies and installed some more (maybe this helped?)

  "devDependencies": {
    "@babel/core": "^7.21.3",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.21.0",
    "@react-native-community/eslint-config": "^3.2.0",
    "@tsconfig/react-native": "^2.0.3",
    "@types/react": "^18.0.29",
    "@types/react-native": "^0.71.5",
    "@types/react-test-renderer": "^18.0.0",
    "@types/uuid": "^9.0.1",
    "@typescript-eslint/eslint-plugin": "^5.56.0",
    "@typescript-eslint/parser": "^5.56.0",
    "eslint": "^8.36.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-config-react-native-wcandillon": "^3.9.1",
    "eslint-plugin-import": "^2.27.5",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.32.2",
    "jest": "^29.2.1",
    "metro-react-native-babel-preset": "0.76.0",
    "prettier": "2.8.7",
    "react-native-svg-transformer": "^1.0.0",
    "react-test-renderer": "18.2.0",
    "typescript": "4.8.4"
  },

Keyser