ESLint does not find React Native components

Question

I'm getting these ESLint errors in all of my js files, which import React Native components. Imports from all other libraries work just fine and the app also compiles and runs without problems. Any idea what could be the reason?

  3:3  error  Text not found in 'react-native'        import/named
  4:3  error  View not found in 'react-native'        import/named
  5:3  error  ScrollView not found in 'react-native'  import/named
  6:3  error  StyleSheet not found in 'react-native'  import/named

Import:

import {
  Text,
  View,
  ScrollView,
  StyleSheet 
} from 'react-native';

package.json

"react-native": "0.62.0",
"eslint": "6.8.0",
"eslint-plugin-react-native": "3.8.1",
"@react-native-community/eslint-config": "1.0.0",
"flow-bin": "0.121.0" (not using in my code)

.eslintrc:

{
  "env": {
    "es6": true,
    "node": true
  },
  "parserOptions": {
    "ecmaVersion": 7,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true,
      "experimentalObjectRestSpread": true
    }
  },
  "extends": [
    "eslint:recommended",
    "plugin:import/recommended"
  ],
  "plugins": [
    "babel",
    "react",
    "react-native",
    "import"
  ],
  "parser": "babel-eslint",
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".json", ".native.js"]
      }
    }
  },
  "rules": {
    "keyword-spacing": [1, { "before": true }],
    "key-spacing": [1, { "afterColon": true }],
    "react/jsx-uses-react": "error",
    "react/jsx-uses-vars": "error",
    "react-native/no-unused-styles": 1,
    "react-native/split-platform-components": 2,
    "react-native/no-inline-styles": 0,
    "react-native/no-color-literals": 0,
    "consistent-return": 1,
    "no-unexpected-multiline": 1,
    "no-extra-boolean-cast": 1,
    "no-console": 0,
    "semi": [
      1,
      "always"
    ],
    "no-undef-init": 2,
    "no-undef": 2,
    "no-unused-vars": [1, {
      "vars": "all",
      "args": "after-used",
      "varsIgnorePattern": "hJSX",
      "argsIgnorePattern": "^_"
    }],
    "no-var": 1,
    "eqeqeq": 1,
    "dot-notation": 1,
    "no-caller": 2,
    "no-eval": 2,
    "no-extend-native": 1,
    "no-implied-eval": 2,
    "no-shadow": [
      2,
      {
        "allow": [
          "err"
        ]
      }
    ],
    "quotes": [1, "single"],
    "no-multi-spaces": 1,
    "prefer-arrow-callback": 1,
    "import/default": 0,
    "no-multiple-empty-lines": 1,
    "require-atomic-updates": 0,
    "space-infix-ops": 1,
    "space-unary-ops": 1,
    "comma-spacing": 1,
    "no-mixed-spaces-and-tabs": 1,
    "curly": 1
  },
  "globals": {
    "after": true,
    "afterEach": true,
    "before": true,
    "beforeEach": true,
    "describe": true,
    "xdescribe": true,
    "it": true,
    "xit": true,

    "fetch": true,
    "__DEV__": true
  }
}

Answer 1

It's a known issue

• You can track the problem on react-native #28549

• Also, I opened a Github issue on eslint-plugin-import about this problem.

Short explanation

Looking at node_modules/react-native/index.js, you can see that it uses getters to define all the exports.

module.exports = {
  // Components
  get AccessibilityInfo(): AccessibilityInfo {
    return require('./Libraries/Components/AccessibilityInfo/AccessibilityInfo');
  },
  get ActivityIndicator(): ActivityIndicator {
    return require('./Libraries/Components/ActivityIndicator/ActivityIndicator');
  },
  get Button(): Button {
    return require('./Libraries/Components/Button');
  },

This interferes with the linter's ability to statically resolve imports.

Workaround

You can work around this issue by ignoring the entire react-native dependency in the eslint-plugin-import import/ignore setting:

{
  "settings": {
    "import/ignore": ["react-native"]
  }
}