react-native ESLint does not find React Native components

Please provide all the information requested. Issues that do not follow this format are likely to stall.

Description

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 {
  Text,
  View,
  ScrollView,
  StyleSheet 
} from 'react-native';

"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)

React Native version:

System:
    OS: macOS 10.15.3
    CPU: (4) x64 Intel(R) Core(TM) i7-6567U CPU @ 3.30GHz
    Memory: 1.27 GB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.16.1 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.13.4 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.4, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK:
      API Levels: 28, 29
      Build Tools: 21.1.1, 21.1.2, 22.0.0, 22.0.1, 23.0.1, 23.0.2, 23.0.3, 24.0.1, 25.0.0, 25.0.2, 25.0.3, 26.0.0, 26.0.2, 27.0.3, 28.0.0, 28.0.2, 28.0.3, 29.0.2
      Android NDK: Not Found
  IDEs:
    Android Studio: 3.6 AI-192.7142.36.36.6241897
    Xcode: 11.4/11E146 - /usr/bin/xcodebuild
  Languages:
    Python: 2.7.17 - /usr/local/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1 
    react-native: 0.62.1 => 0.62.1 
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

eslint

Expected Results

Describe what you expected to happen.

No errors.

Snack, code example, screenshot, or link to a repository:

https://stackoverflow.com/questions/60973737/eslint-does-not-find-react-native-components

Apr 06 '20 18:04 tapz

:warning: Missing Reproducible Example
:information_source: It looks like your issue is missing a reproducible example. Please provide a Snack or a repository that demonstrates the issue you are reporting in a minimal, complete, and reproducible manner.

:warning:	Missing Reproducible Example
:information_source:	It looks like your issue is missing a reproducible example. Please provide a Snack or a repository that demonstrates the issue you are reporting in a minimal, complete, and reproducible manner.

Apr 08 '20 17:04 github-actions[bot]

Hi @tapz, many factors can be the the root cause of this. eslint version, VS Code plugins, etc.. could you provide a very simple reproducible repo that we can check out? My hunch is that it is an environment issue rather than an issue with React Native.

Apr 08 '20 17:04 safaiyeh

@safaiyeh It cannot be VS code plugin as I run eslint from the command line. Eslint version you can find from the package.json above.

Apr 08 '20 18:04 tapz

My .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
  }
}

Apr 08 '20 18:04 tapz

same problem here:

here's my eslintrc.js

module.exports = {
  root: true,
  extends: [
    '@react-native-community',
    'eslint:recommended',
    'plugin:import/errors',
    'plugin:import/warnings'
  ],
  plugins: ['import'],
  rules: {
    'import/no-unresolved': [2, {commonjs: true, amd: true}],
    'import/named': 2,
    'import/namespace': 2,
    'import/default': 2,
    'import/export': 2,
  }
};

Apr 11 '20 17:04 rush86999

As a temporary workaround until this gets resolved:

module.exports = {
  settings: {
    'import/ignore': ['react-native'],
  }
}

Apr 30 '20 23:04 jchook

Thanks @jchook, this really helped!

May 01 '20 13:05 tapz

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.

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

via: https://stackoverflow.com/a/61734408

Jun 24 '20 18:06 andrewzey

Any reason why the import/export is done this way?

Jun 25 '20 06:06 tapz

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

Note: this actually ignores any packages with react-native in their name, e.g. react-native-svg, as it is parsed as a regex. Much safer to do:

{
  "settings": {
    "import/ignore": [
		"node_modules/react-native/index\\.js$"
	]
  }
}

Jul 12 '20 17:07 benadamstyles

We experienced this when upgrading from v0.61.x to v0.63.0.

We don't have Flow enabled in our project. So in our case, I believe the error is caused by the addition of Flow typings in the updated entry point file. In v0.61.x, the entry point file didn't contain any Flow typings so the Babel parser could handle it.

We're using the workaround posted by @benadamstyles to get around this issue.

Jul 16 '20 13:07 niklas-r

Also in the middle of upgrading from RN 0.61.5 to RN 0.63.1 and Flow 0.122.0 and have encountered this issue.

Jul 24 '20 08:07 jess-dovetail

I have a newly initialized app, still a problem as of the moment. It says:

error Text not found in 'react-native'  import/named

Sep 02 '20 04:09 aprilmintacpineda

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

Dec 25 '20 19:12 stale[bot]

Bumping thread to remove stale label (still an issue).

Jan 07 '21 09:01 mattlubner

still an issue on rn 0.63.4 from 0.61.5

Jan 07 '21 09:01 wolffan

I also hit this issue trying to import react-native into a Gatsby component.

error  Text not found in 'react-native'              import/named                                     
error  View not found in 'react-native'              import/named                                     
error  Linking not found in 'react-native'           import/named                                     
error  Platform not found in 'react-native'          import/named                                     
error  TouchableOpacity not found in 'react-native'  import/named

✖ 5 problems (5 errors, 0 warnings)

Downgrading to 6.14.10 per the gatsby-plugin-react-native-web using the expo archive resolved it for me:

npm i --save https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz

Jan 13 '21 00:01 sangrepura

So is the fix here in RN's court, or ESLint's, or ... ?

Mar 12 '22 03:03 gregfenton

AFAIK the issue is caused by React Native using dynamic imports. Static analysis tools like ESLint do not support that.

Mar 12 '22 05:03 jchook

So perhaps the fix is in the react-native community eslint rules ? Or similar? https://github.com/facebook/react-native/blob/main/packages/eslint-config-react-native-community/index.js