ESLint plugin for React Native

React Native specific linting rules for ESLint. This repository is structured like (and contains code from) the excellent eslint-plugin-react.

Installation

Install ESLint either locally or globally.

$ npm install --save-dev eslint

To make most use of this plugin, its recommended to install eslint-plugin-react in addition to ESLint. If you installed ESLint globally, you have to install eslint-plugin-react globally too. Otherwise, install it locally.

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

Similarly, install eslint-plugin-react-native

$ npm install --save-dev eslint-plugin-react-native

Configuration

Add plugins section and specify ESLint-plugin-React (optional) and ESLint-plugin-react-native as a plugin.

{
  "plugins": [
    "react",
    "react-native"
  ]
}

If it is not already the case you must also configure ESLint to support JSX.

{
  "parserOptions": {
      "ecmaFeatures": {
          "jsx": true
      }
  }
}

In order to whitelist all browser-like globals, add react-native/react-native to your config.

{
  "env": {
    "react-native/react-native": true
  }
}

To use another stylesheet providers.

settings: {
    'react-native/style-sheet-object-names': ['EStyleSheet', 'OtherStyleSheet', 'PStyleSheet']
}

Finally, enable all of the rules that you would like to use.

{
  "rules": {
    "react-native/no-unused-styles": 2,
    "react-native/split-platform-components": 2,
    "react-native/no-inline-styles": 2,
    "react-native/no-color-literals": 2,
    "react-native/no-raw-text": 2,
    "react-native/no-single-element-style-arrays": 2,
  }
}

List of supported rules

• no-unused-styles: Detect StyleSheet rules which are not used in your React components
• sort-styles: Require style definitions to be sorted alphabetically
• 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
• no-raw-text: Detect raw text outside of Text component
• no-single-element-style-arrays: No style arrays that have 1 element only <View style={[{height: 10}]}/>

Shareable configurations

All

This plugin also exports an all configuration that includes every available rule.

{
  "plugins": [
    /* ... */
    "react-native"
  ],
  "extends": [/* ... */, "plugin:react-native/all"]
}

Note: These configurations will import eslint-plugin-react-native and enable JSX in parser options.