Getting eslint right in React Native

Gustavo Machado
Jul 1, 2016 · 2 min read

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": [
"extends": [
"rules": {
// overrides

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

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

The React Native Log

All things React Native — tutorials, experiments, tips &…

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store