Getting eslint right in React Native

Updated: added support for browser-like APIs.

Eslint is not new for React Native apps, but I admit that getting eslint to work seamlessly in React Native is not so trivial (yet?) and couldn’t find simple documentation on how to do this.

What you’ll need:

• babel-eslint
• eslint
• eslint-plugin-react

The reason for needing babel-eslint is that the default parser used by eslint (espree) does not support static properties.

In order to install what you need, run the following command:

npm install --save-dev babel-eslint eslint eslint-plugin-react

Create an .eslintrc file that uses babel-eslint parser, the react plugin and I recommend using the defaults as well:

{
    "parser": "babel-eslint",
    "env": {
        "browser": true
    },
    "plugins": [
        "react"
    ],
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ],
    "rules": {
        // overrides
    }
}

For documentation about the rules that you can use, you can see the following links:

• eslint-plugin-react: https://github.com/yannickcr/eslint-plugin-react#list-of-supported-rules
• eslint: http://eslint.org/docs/rules/

Browser: true ?

React Native mimics some APIs found in browsers like timers (setInterval, clearInterval, etc…) or Geolocation API.

The reason why I included “browser: true” is so that the linter doesn’t complaint when your code is using these globals. Obviously this is far from ideal, because React Native doesn’t implement the entire API found in browsers, but it’s better than having errors or “eslint-disable-line” comments all over the place.

I have already created an issue in “eslint-plugin-react-native” (see below) to see if they can address this issue.

React Native rules

Even though there is a more specific eslint plugin for React Native, the rules that it adds may not be worth adding it.

The package can be found here https://github.com/Intellicode/eslint-plugin-react-native. At the time of writing this post the rules were:

no-unused-styles: Detect StyleSheet rules which are not used in your React components
split-platform-components: Enforce using platform specific filenames when necessary
no-inline-styles: Detect JSX components with inline styles that contain literal values
no-color-literals: Detect StyleSheet rules and inline styles containing color literals instead of variables

Bonus Tip

In order to use eslint you don’t need a .babelrc file because React Native already provides a default preset, but If you want to customize the babel rules with your own .babelrc file, you can use the package babel-preset-react-native.