eslint-plugin-react-native

What is eslint-plugin-react-native?

eslint-plugin-react-native is an ESLint plugin that provides specific linting rules for React Native projects. It helps developers maintain code quality and consistency by enforcing best practices and catching common errors specific to React Native development.

What are eslint-plugin-react-native's main functionalities?

No Unused Styles

This rule helps to identify and remove unused styles in your React Native components, ensuring that your stylesheets are clean and maintainable.

module.exports = {
  "rules": {
    "react-native/no-unused-styles": "error"
  }
};

No Inline Styles

This rule discourages the use of inline styles in React Native components, promoting the use of StyleSheet objects for better performance and readability.

module.exports = {
  "rules": {
    "react-native/no-inline-styles": "error"
  }
};

No Raw Text

This rule prevents the use of raw text outside of Text components, ensuring that all text is properly styled and localized.

module.exports = {
  "rules": {
    "react-native/no-raw-text": ["error", { "skip": ["CustomText"] }]
  }
};

Split Platform Components

This rule enforces the use of platform-specific file extensions (e.g., .ios.js, .android.js) for components that have different implementations for iOS and Android.

module.exports = {
  "rules": {
    "react-native/split-platform-components": "error"
  }
};

Other packages similar to eslint-plugin-react-native

eslint-plugin-react

eslint-plugin-react is an ESLint plugin for React projects. It provides a wide range of linting rules for React applications, including best practices and common error prevention. While it is not specific to React Native, it can be used alongside eslint-plugin-react-native to cover both React and React Native linting needs.

eslint-plugin-jsx-a11y

eslint-plugin-jsx-a11y is an ESLint plugin that provides accessibility linting rules for JSX elements. It helps ensure that your React components are accessible to all users, including those with disabilities. While it is not specific to React Native, it can be used to improve the accessibility of React Native applications.

eslint-plugin-react-hooks

eslint-plugin-react-hooks is an ESLint plugin that enforces the rules of hooks in React applications. It ensures that hooks are used correctly and consistently, preventing common mistakes. This plugin is useful for both React and React Native projects that use hooks.

README

ESLint plugin for React Native

Project update

Dear users, first of all, thanks for using the plugin! At the moment development activity is low, I've personally not worked with React Native for many years and have little time to continue updating the plugin. I'll do my best to update the plugin to ensure compatibility with new eslint versions, but unfortunately I do not have time to asses new features/pull requests. Thanks for your understanding!

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.