eslint-plugin-react-native

To use this plugin, you must install eslint and eslint-plugin-react-native. It is highly recommended to also install eslint-plugin-react for full functionality.

If you are installing ESLint globally, you must also install the plugins globally. Otherwise, install them locally as dev dependencies.

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

The no-raw-text rule ensures that all strings in React Native are wrapped within a <Text> component. In React Native, rendering raw text directly inside a <View> or other non-text components will cause a runtime error. This rule detects patterns where text is placed directly in children of components that are not <Text> components.

// ❌ Incorrect: This will trigger a warning
<View>some text</View>

const text = 'some text';
<View>{`${text}`}</View>

// ✅ Correct: Text is wrapped in a Text component
<View><Text>some text</Text></View>

const text = 'some text';
<View><Text>{`${text}`}</Text></View>

To enable the plugin, add react-native to your ESLint plugins array. You must also ensure your parser is configured to support JSX.

To whitelist browser-like globals common in React Native, add react-native/react-native to your env configuration.

{
  "plugins": ["react", "react-native"],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "react-native/react-native": true
  }
}

The plugin provides an all configuration that enables every available rule. Using this configuration automatically imports the plugin and enables JSX in your parserOptions.

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

The no-raw-text rule accepts an options object to customize its behavior:

• skip: An array of custom component names that the rule should ignore when checking for raw text. Use this if you have custom components that are designed to handle text children safely.

// Example configuration to skip specific components
{
  "rules": {
    "react-native/no-raw-text": ["error", { "skip": ["MyCustomTextContainer"] }]
  }
}

You can customize the regex patterns used to identify Android and iOS platform files via the androidPathRegex and iosPathRegex options. This is useful if you use custom file extensions or non-standard naming conventions.

Option Schema

"react-native/split-platform-components": [ <enabled>, { 
  androidPathRegex: <string>, 
  iosPathRegex: <string> 
}]

You can customize which stylesheet providers the plugin recognizes using the react-native/style-sheet-object-names setting.

Individual rules can be enabled or disabled in the rules section. Common rules include no-unused-styles, split-platform-components, no-inline-styles, no-color-literals, no-raw-text, and no-single-element-style-arrays.

{
  "settings": {
    "react-native/style-sheet-object-names": ["EStyleSheet", "OtherStyleSheet", "PStyleSheet"]
  },
  "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
  }
}

If you want to enforce sorting of the top-level class names in a StyleSheet but do not care about the order of properties within those styles, set ignoreStyleProperties to true.

/* eslint react-native/sort-styles: ["error", "asc", { "ignoreStyleProperties": true }] */

// This is NOT a warning because properties (width, color) are not enforced to be sorted,
// even though the class names (anchor, button) are correctly sorted in 'asc' mode.
const styles = StyleSheet.create({
  anchor: {},
  button: {
    width: 100,
    color: 'green',
  },
});

If you want to enforce sorting of properties inside style objects but do not care about the order of the class names themselves, set ignoreClassNames to true.

/* eslint react-native/sort-styles: ["error", "asc", { "ignoreClassNames": true }] */

// This is NOT a warning because class names (button, anchor) are not enforced to be sorted,
// even though the rule is in 'asc' mode.
const styles = StyleSheet.create({
  button: {
    color: 'green',
    width: 100,
  },
  anchor: {},
});

The react-native/sort-styles rule enforces alphabetical ordering of keys within StyleSheet.create definitions. This helps maintain readability and consistency in React Native style objects. By default, it enforces ascending order for both the class names (the top-level keys in the StyleSheet) and the style properties (the keys within each style object).

// Example of a violation (unsorted keys in ascending mode):
const styles = StyleSheet.create({
  button: {
    width: 100,
    color: 'green',
  },
});

// Example of valid code (sorted keys in ascending mode):
const styles = StyleSheet.create({
  button: {
    color: 'green',
    width: 100,
  },
});

The plugin provides a react-native environment that includes global variables common to React Native development. This is powered by eslint-plugin-react-native-globals.

module.exports = {
  env: {
    'react-native': true,
  },
};