Package Exports

eslint-plugin-react-native
eslint-plugin-react-native/lib/rules/no-inline-styles

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (eslint-plugin-react-native) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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 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 eslint-plugin-react

Similarly, install eslint-plugin-react-native

$ npm install 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.

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

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,
  }
}

List of supported rules

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

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.